Next.js Discord

Discord Forum

Best way to have a footer in nextjs using App Router

Answered
Swedish Lapphund posted this in #help-forum
Open in Discord
Avatar
Swedish LapphundOP
So I've been looking around for a way to have a global footer on all pages, some work in Layout.tsx and some just add it per page. What is the right way to go about this granted I want to have the same footer everywhere?
Answered by Swedish Lapphund
yes, thats perfect
View full answer

16 Replies

Avatar
Ray
app/layout.tsx should be the best place for that
Avatar
Swedish LapphundOP
Image
is there any way I can make it at the bottom of the page, despite the childeren objects being small and not tall?
in this case its just right below the actual content
which looks awkward when a page content isnt tall
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <AppRouterCacheProvider>{children}</AppRouterCacheProvider>
        <Footer />
      </body>
    </html>
  )
}
the icons are the footer right now, fyi
Avatar
Ray
set the footer position to fixed, left 0, right 0, bottom 0
Avatar
Swedish LapphundOP
ah thank you!
I currently have the style just embedded into the code
I suppose a globals.css would be great
for this
Avatar
Ray
yeah
btw, this will make the footer stay at bottom on every page, is that what you want?
Avatar
Swedish LapphundOP
yes, thats perfect
Answer
Avatar
Swedish LapphundOP
thanks!