Navigate Between Pages in NextJS

Navigating between pages in Next.js is smooth and optimized for performance, with the help of its built-in routing capabilities. The framework utilizes client-side navigation and dynamic routing to ensure fast, smooth transitions and an enhanced user experience.

Navigate Between Pages in Next.JS

In Next.js, navigation is primarily handled through the component from next/link, which enables client-side routing. This avoids full page reloads and speeds up page transitions. For programmatic navigation, the useRouter hook from next/router allows navigation based on user actions or logic.

Approach

To provide the navigation between pages we will:

Create the Navbar component for navigating on different pages.
Create the pages we want to navigate to.
Create pages like home.js for the home page, about.js for the about page, contact.js for the contact page and services.js for the services page.
Import the Link component in the navbar component from the next/link.
Use the Link component to wrap the elements that should trigger the navigation.
We will style the links using Bootstrap to make them visually appealing.

Steps to Create NextJS Application

Step 1: Create a NextJS application using the following command

npx create-next-app my-app

Step 2: Navigate to project directory

cd my-app

Project Structure:

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

"dependencies": {
    "bootstrap": "^5.3.3",
    "next": "14.1.3",
    "react": "^18"
}

Example: Implementation to navigate between pages in a Next.js application

JavaScript

// components/Navbar.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-success bg-opacity-75 text-light">
                <div className="container">
                    <div className="collapse navbar-collapse"
                     id="navbarNav">
                        <ul className="navbar-nav mr-auto">
                            <li className="nav-item">
                                <Link
                                    href="/"
                                    className="nav-item nav-link text-light"
                                    style={{ fontSize: "30px" }}
                                >
                                    Home
                                </Link>
                            </li>
                            <li className="nav-item">
                                <Link
                                    href="/about"
                                    className="nav-item nav-link text-light"
                                    style={{ fontSize: "30px" }}
                                >
                                    About
                                </Link>
                            </li>
                            <li className="nav-item">
                                <Link
                                    href="/contact"
                                    className="nav-item nav-link text-light"
                                    style={{ fontSize: "30px" }}
                                >
                                    Contact
                                </Link>
                            </li>
                            <li className="nav-item">
                                <Link
                                    href="services"
                                    className="nav-item nav-link text-light"
                                    style={{ fontSize: "30px" }}
                                >
                                    Sevices
                                </Link>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    );
};

export default Navbar;

JavaScript

// components/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

// page.js

import React from 'react'
import Home from '@/pages/Home';

const page = () => {
    return (
        <>
            <Home />
        </>
    )
}

export default page;

JavaScript

// pages/Home.js

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

const Home = () => {
    return (
        <Layout >
            <div className="container mt-2">
                <h3>Welcomo to GeeksForGeeks</h3>
                <div>This is <b>Home</b> page
            </div>
        </Layout>
    )
}
export default Home;

JavaScript

// pages/about.js

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

const About = () => {
    return (
        <Layout >
            <div className="container mt-2">
                This is <b>About</b> page
        </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 <b>Contact</b> page
        </Layout>
    )
}

export default Contact

Navigate Between Pages in NextJS