How To Add Navbar To All Pages In NextJS ?

Last Updated : 14 May, 2024

A navbar is a common UI element used to navigate between different sections or pages of a website. Adding a navbar to all pages ensures consistent navigation across the site. This article will explore how we can add a navbar to all pages In NextJS.

Output Preview:

Prerequisites:

Approach

To add navbar to all the pages in nextjs application,

Develop a Navbar component to represent the navigation bar. This component will contain links to different pages of the application.
Design a Layout component to encapsulate the overall structure of the application. This component includes the Navbar component and a placeholder for page content.
Create individual page components for different sections of the website, such as Home, About, Contact, and Services. Each page imports the Layout component and includes its content within it.
Import and utilize the Layout component within each page component. This ensures that the navbar appears consistently across all pages.
Update the Navbar component to include links corresponding to each page. Use Next.js's Link component for efficient client-side navigation between pages.

Steps to Setup NextJS Application

Step 1: Create a NextJS application using the following command:

npx create-next-app my-pp

Step 2: Navigate to project directory:

cd my-app

Project Structure:

The updated dependencies in package.json file will look like:

  "dependencies": {
    "next": "14.2.3",
    "react": "^18",
    "react-dom": "^18"
  },

Example: In below example we have created Layout component that will contain a Navbar component. We have wrapped each page inside the Layout component to add Navbar to each pages.

JavaScript

// Layout.js

import React from 'react';
import Navbar from "@/Components/Navbar";

const Layout = ({ children }) => {
    return (
        <div>
            <Navbar />
            <main>{children}</main>
        </div>
    );
};

export default Layout;

JavaScript

// components/Layout.js

import React from 'react';
import Link from 'next/link';
import 'bootstrap/dist/css/bootstrap.min.css';

const Navbar = () => {
    return (
        <div>
            <nav className="navbar navbar-expand-lg 
                            navbar-light bg-dark 
                            bg-opacity-75 text-light">
                <div className="container">
                    <Link className="navbar-brand 
                                    text-light font-bold"
                        href="/">
                        GFG
                    </Link>
                    <div className="collapse navbar-collapse"
                        id="navbarNav">
                        <ul className="navbar-nav mr-auto">
                            <li className="nav-item">
                                <Link href="/about"
                                    className="nav-item nav-link 
                                                 text-light">
                                    Abou
                                </Link>
                            </li>
                            <li className="nav-item">
                                <Link href="/Contact"
                                    className="nav-item nav-link 
                                                 text-light">
                                    Contact
                                </Link>
                            </li>
                            <li className="nav-item">
                                <Link href="services"
                                    className="nav-item nav-link 
                                                text-light">
                                    Sevices
                                </Link>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    );
};

export default Navbar;

JavaScript

// pages/About.js

import Layout from '@/Components/Layout'
import React from 'react'

const About = () => {
    return (
        <Layout >
            <div className="container mt-2">
                This is About page
            </div>
        </Layout>)
}

export default About

JavaScript

// pages/contact.js

import Layout from '@/Components/Layout'
import React from 'react'

const Contact = () => {
    return (
        <Layout >
            <div className="container mt-2">
                This is contact page
            </div>
        </Layout>
    )
}

export default Contact

JavaScript

// pages/services.js

import Layout from '@/Components/Layout'
import React from 'react'

const services = () => {
    return (
        <Layout >
            <div className="container mt-2">
                This is srvices page
            </div>
        </Layout>
    )
}

export default services;

Step to Run Application: Run the application using the following command from the root directory of the project

npm run dev

Output: Your project will be shown in the URL http://localhost:3000/