How to Change URL Without Reloading the Page in Next.js?

While making modern web development projects, sometimes you find the need to update the URL dynamically without reloading the web page. Luckily, Next.js is a powerful React framework that provides a built-in method to change the URL without reloading the page.

In this blog, we will explore the method to change the URL dynamically in Next.js to ensure a smooth user experience.

Table of Contents:

• Need to Change URLs Without Reloading?
• Setting Up a Next.js Project
  • Step 1: Install Next.js App
  • Step 2: Go to Your Project Folder
  • Step 3: Start the Development Server
• Client-Side Routing
• Changing URL Without Reloading in Next.js
• Best Practices While Modifying URLs
• Conclusion

Need to Change URLs Without Reloading?

Modifying URLs without reloading the page is a very common practice when working on web development projects. There are several reasons why developers need to modify URLs dynamically without reloading the page:

• Enhancing User Experience: It prevents the optional page reloads and keeps the user experience smooth.
• Maintaining Application State: Stores the front-end state changes in the URL.
• Enabling Deep Linking: Allow users to bookmark or share the specific application states.

Design. Build. Launch Your Dream Career

Become a Web Developer – Enroll Now!

Explore Program

Setting Up a Next.js Project

Follow these steps to set up the Next.js project:

Step 1: Install Next.js App

First, check for the node installed on your computer, then run the command to create the Next.js app.

npx create-next-app@latest my-app

Step 2: Go to Your Project Folder

Now, after successfully installing the project, you have to go to your project ( my-app ) folder by writing this command in the console:

cd my-app

Step 3: Start the Development Server

Launch your application:

npm run dev

Now, your Next.js application, by default, starts running on port 3000.

Client-Side Routing

The Client-side routing in Next.js allows users to switch between different web pages without reloading the full page. You can do this using:

1. <Link> Component: Next.js provides the <Link> component, which allows you to navigate between pages without refreshing the page.
2. next/router Module: The useRouter hook from the next/router module allows you to modify the URL dynamically. This is useful in dynamic navigation and updating the query parameters.
3. HTML 5 History API: This is a built-in browser feature that Next.js utilizes to update the URL without reloading the page. Methods like window.history.pushState() and window.history.replaceState() are used to modify the URL without refreshing the page.

Changing URL Without Reloading in Next.js

In Next.js, you can modify the URL without reloading the page by using the useRouter hook of the next/router module:

Example:

page.tsx File

layout.tsx File

Output:

Explanation: In this example, we are changing the URL without reloading the full web page. Let’s discuss the code in detail:

• “use client” – If your page.tsx file is present in the app/ directory, then it is recognized as the Server Component by default. Thus, it is necessary to declare it as a  Client Component by using “use client” at the top of the file.
• Importing hooks from next/navigation – useRouter (Enables navigation without page reload), usePathname (helps in getting current path), and useSearchParams (Accesses the URL search parameters dynamically) are the hooks used for the different next/navigation module.
• We use searchParams.get(“item”) to extract the item parameter from the URL. If no parameter is passed, then it returns None.
• Each button calls the changeURL() function with a different value (apple, banana, cherry). Clicking any button updates the URL dynamically without reloading the page.

Best Practices While Modifying URLs

• Use the router.push() for new states and router.replace() for updating states.
• Avoid updating unnecessary URLs because if you do so, then this will affect the application’s performance.
• Keep URLs clean and meaningful for better SEO and User Experience.

Conclusion

Modifying the URL without reloading the page in Next.js is essential for creating dynamic web applications. Using the <Link> Component only helps you to do standard navigation. For dynamic URL changes, you have to use the useRouter hook of the next/router module. By getting command over this, you can improve user experience and make your Next.js application more interactive.

How to Change URL Without Page Refresh in Next.js – FAQs