Ayu Adiati

Posted on Jul 20, 2023 • Originally published at adiati.com

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

#nextjs #buildinpublic #webdev #beginners

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

Project Link

Codebase

Resources

Next.js docs

🖼️ Credit cover image: unDraw

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

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

DEV Community

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

What I Learned

Root Layout

Metadata

What I Did

Navbar and Footer

Metadata

Some Thoughts

Next Plan

Project Link

Resources

How to reduce TTFB

Top comments (0)

A Workflow Copilot. Tailored to You.

Read next

Using DeepSeek-R1 on Azure with JavaScript

30 Creative Projects created with HTML, CSS and JavaScript- Part 2 #30days30projects

Build a Guitar Scale Visualization App with React, TypeScript, and Next.js

30 Creative Projects created with HTML, CSS and JavaScript - Part 1 #30days30projects