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

Last Updated : 23 Jul, 2025

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:

👁 Screenshot-(90)

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.

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