I am using Next.js with the app directory.

Here is my code in footer.js.

"use client"
import React from 'react';
import Typography from '@mui/material/Typography';
import styles from './footer.module.css';

const Footer = () => (
    <footer className={styles.footer}>
        <Typography color = "white" variant = "body2" gutterBottom component = "div" align = "center" style = {{margin: "10px"}}>
            <a style = {{color:'yellow'}} href = "https://google.com" rel = "noreferrer" target = "_blank">I like Google</a><br /> I am a college student
        </Typography>
    </footer>
);

export default Footer;

And here is my footer.module.css code.

.footer {
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    z-index: 9999;
    background-color: #000000;
}

Whenever I import the footer component into a page.js file and insert it at the bottom of the return statement, I notice that the footer overlaps content in that page.

Here is a screenshot of the bottom of a page with the footer (I removed the text in the footer after taking the screenshot). See first screenshot.

And here is a screenshot off the bottom of that same page without the footer. See the second screenshot.

You can see that the pagination/navigation bar at the bottom is hidden inside the footer. How do I ensure this doesn't happen? I'd ideally like the footer to be stuck to the bottom of the page no matter what. If the user has to scroll, that's fine, but the header and footer should always be visible.