Best way to have a footer in nextjs using App Router
Answered
Swedish Lapphund posted this in #help-forum
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?16 Replies
Ray
app/layout.tsx
should be the best place for thatSwedish LapphundOP
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
Ray
set the footer position to fixed, left 0, right 0, bottom 0
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
Ray
yeah
btw, this will make the footer stay at bottom on every page, is that what you want?
Swedish LapphundOP
yes, thats perfect
Answer
Swedish LapphundOP
thanks!