DEV Community

Cover image for Building Portfolio with Next.js: Add Navbar, Footer, and Metadata
Ayu Adiati
Ayu Adiati

Posted on • Originally published at adiati.com

21 1 1 2 2

Building Portfolio with Next.js: Add Navbar, Footer, and Metadata

Hello Friends 👋,

So, I've added a navbar, footer, and metadata to my project.

Yay GIF

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.js in the app folder.

  • 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 components folder in the app folder.

  • I created Navbar.js and Footer.js files in the components folder.

    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.js as 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 🤞🙈.

fingers cross

Project Link

Resources


🖼️ Credit cover image: unDraw

Thank you for reading! Last, you can find me on Twitter, Mastodon, and BlueSky. Let's connect! 😊

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay