Hello Friends 👋,
So, I've added a navbar, footer, and metadata to my project.
What I Learned
Root Layout
Root layout applies to all routes and is required.
To make Navbar and Footer show on every page, we need to import and apply them in the root layout that we can find in the
layout.jsin theappfolder.Say we want a completely different UI or experience, e.g., for public view pages and dashboard. We can create multiple root layouts based on our needs.
Metadata
Metadata (or metainformation) is "data that provides information about other data" — Wikipedia
Next.js has Metadata API that can define our application metadata and automatically generate the relevant
<head>elements for our pages.When a route doesn't define metadata, Next.js will always add two meta tags: meta charset and meta viewport.
What I Did
Navbar and Footer
I created a
componentsfolder in theappfolder.-
I created
Navbar.jsandFooter.jsfiles in thecomponentsfolder.
app ├── (websitePages) ├── components │ ├── Footer.js │ └── Navbar.js ├── globals.css ├── layout.css └── page.js -
Then I imported and applied the Navbar and the Footer in the
RootLayout:
import "./globals.css" import { Inter } from "next/font/google" import Navbar from "./components/Navbar" import Footer from "./components/Footer" const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "Ayu Adiati", description: "Ayu Adiati's portfolio", } export default function RootLayout({ children }) { return ( <html lang='en'> <body className={inter.className}> <Navbar /> {children} <Footer /> </body> </html> ) }
Metadata
-
I added static metadata to all
page.jsas in the example below:
// metadata Blog page export const metadata = { title: "Ayu Adiati | Blog", description: "Ayu Adiati's blog posts", } export default function Blog() {}
Some Thoughts
Reading through the docs, I learned about the
title.template. I probably will use this in the future.I know metadata helps improve SEO, but I need more knowledge. So I will do more research about metadata in general.
Next Plan
-
Basic styling.
I want to have a decent style for the navbar and footer for now.
Potential Blockers
I'm crossing my fingers that I have time to continue the project during vacation 🤞🙈.
Project Link
Resources
🖼️ Credit cover image: unDraw
Thank you for reading! Last, you can find me on Twitter, Mastodon, and BlueSky. Let's connect! 😊
Top comments (0)