Building Portfolio with Next.js: Add Navbar, Footer, and Metadata
Tags: nextjs, buildinpublic, webdev, beginners
Published: 2023-07-20 22:24:09

Hello Friends 👋,

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

![Yay GIF](https://media.giphy.com/media/G1vplGMypxBcp7kx32/giphy.gif)

## What I Learned

### Root Layout

* [Root layout](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required) 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](https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts) based on our needs.
    

### Metadata

> **Metadata** (or **metainformation**) is "data that provides information about other data" — [Wikipedia](https://en.wikipedia.org/wiki/Metadata)

* 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#charset) and [meta viewport](https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag#viewport_basics).
    

## 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.
    
    ```plaintext
    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`:
    
    ```javascript
    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](https://nextjs.org/docs/app/building-your-application/optimizing/metadata#static-metadata) to all `page.js` as in the example below:
    
    ```javascript
    // 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`](https://nextjs.org/docs/app/api-reference/functions/generate-metadata#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](https://media.giphy.com/media/JULfVYQH3XkCxMV0QP/giphy.gif)

## **Project Link**

* [**Codebase**](https://github.com/adiati98/adiatiayu-portfolio)
    

## Resources

* [Next.js docs](https://nextjs.org/docs)
    

---

🖼️ Credit cover image: [**unDraw**](http://undraw.co/)

Thank you for reading! Last, you can find me on [**Twitter**](https://twitter.com/@AdiatiAyu), [**Mastodon**](https://hachyderm.io/@AdiatiAyu)**,** and [**BlueSky**](https://bsky.app/profile/adiati.ayu.bsky.social). Let's connect! 😊