How to Change URL Without Page Refresh in Next.js?

Q: How to Change URL Without Page Refresh in Next.js?

In web development, the ability to change URLs dynamically without triggering a full page refresh is essential for creating smooth, seamless user experiences. Next.js, a popular React framework, offers built-in features to achieve this efficiently through its client-side routing capabilities. In this article, we’ll explore various techniques and approaches to change URLs without page refresh in Next.js applications.

How to start Next.js server ?

How to Customize Bootstrap 5?

In web development, the ability to change URLs dynamically without triggering a full page refresh is essential for creating smooth, seamless user experiences. Next.js, a popular React framework, offers built-in features to achieve this efficiently through its client-side routing capabilities. In this article, we’ll explore various techniques and approaches to change URLs without page refresh in Next.js applications.

Prerequisites:

Understanding Client-Side Routing in Next.js

Next.js uses client-side routing to handle navigation between pages without reloading the entire application. It uses the HTML5 History API to manipulate browser history and update the URL in the address bar dynamically.

Using Link Component for Navigation

Next.js provides the <Link> component to enable client-side navigation between pages. You can import the <Link> component from the ‘next/link’ module and use it to wrap anchor tags (<a>), specifying the href attribute to indicate the target URL.

Steps to Setup NextJS Application

Step 1: Create a NextJS application using the following command

npx create-next-app my-app

Step 2: Navigate to the Project directory

cd my-app

Step 3: Install the necessary packages/libraries in your project using the following commands.

npm i bootstrap

Project Structure:

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

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

Approach

Create Navbar component to contain links to different pages.
Design a Layout component to keep Navbar at each page.
Create different pages like Home, About, Contact, and Services.
Import the Link component in the navbar component from the next/link.
Use the Link component to change the URl without page refresh.
Add basic styling to links using Bootstrap to make them visually appealing.

Example: In example below, we have created a Navbar containing links to different pages, demonstrating how to change the URL without refreshing the page in Next.js.

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-primary 
                            g-opacity-75 text-light">
                <div className="container">
                    <div 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

// pages/index.js

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

const Home = () => {
    return (
        <Layout >
            <div className="container mt-2">
                <h2 className='text-success'>Welcomo to w3wiki</h2>
                <h3>Home page</h3>
            </div>
        </Layout>
    )
}
export default Home;

JavaScript

//About.js

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

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

export default services;