# 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](https://media.giphy.com/media/G1vplGMypxBcp7kx32/giphy.gif align="left")
## 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 `` 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 (
{children}
)
}
```
### 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 align="left")
## **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! π