index.css

html,body{
	margin:0; 
  padding:0;
	width:100%; 
  height:100%;
  background:#182332;
}

#root{
  height: auto;
  min-height: 100%;
  padding-bottom: 100px;
}
footer{
  height: 100px;
  position: fixed;
  align-content: center;
  align-items: center;
  bottom: 0px;
  text-align: center;
  width: 100%;  
}
footer a{
  text-decoration: none;
  color: #fff;
}
footer a:hover{
  color: rgb(164, 164, 225);
}  

Footer.jsx

import Link from 'next/link'
import React from 'react'

const Footer = () => {
  return (
    <div>
        <footer>
            <Link href="https://macaronics.net">macaronics</Link>
        </footer>
    </div>
  )
}

export default Footer