How To Route to a Page in Next JS

How To Route to a Page in Next JS

Routing is one of the most essential aspects of any web application. In modern web development frameworks like Next.js, routing plays a crucial role in defining how users navigate between different pages or sections of a website. Whether you’re creating a blog, eCommerce site, or dashboard, understanding how routing works in Next.js will help you build scalable and user-friendly web applications.

In this article, we’ll cover everything you need to know about routing in Next.js — from the basics of file-based routing to advanced dynamic and API routing techniques. By the end, you’ll be able to confidently structure and route pages within your Next.js applications.

What is Routing in Next.js?

In traditional web development, routing determines how URLs correspond to specific content or components in your application. In Next.js, routing is handled using a file-based system, meaning that every file inside the pages directory automatically becomes a route.

For example:

pages/
 ├── index.js        →  `/`
 ├── about.js        →  `/about`
 ├── contact.js      →  `/contact`

Each of these files corresponds to a unique route in your application. This makes routing in Next.js incredibly simple and intuitive — you don’t need to manually configure routes using external libraries like React Router.

Setting Up a Basic Next.js Project

Before diving into routing, let’s quickly set up a Next.js project.

Step 1: Create a New Next.js App

You can create a new Next.js project using the following command:

npx create-next-app my-next-app
cd my-next-app
npm run dev

This will start a development server at http://localhost:3000.

Step 2: Understanding the Pages Directory

Next.js automatically treats every JavaScript or TypeScript file in the pages directory as a route. For instance, if you create a file named about.js inside the pages folder, it will be accessible via http://localhost:3000/about.

Example:

// pages/about.js
export default function About() {
  return <h1>About Us Page</h1>;
}

When you navigate to /about, this page will automatically render.

Navigating Between Pages

Now that you know how to create pages, let’s learn how to navigate between them. Next.js provides the Link component from next/link to handle client-side navigation efficiently.

Example of Client-Side Navigation

import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1>Welcome to My Website</h1>
      <Link href="/about">Go to About Page</Link>
    </div>
  );
}

The Link component enables seamless navigation without reloading the entire page, providing a smooth single-page application experience.

Dynamic Routing in Next.js

Sometimes, you may need to create routes that depend on dynamic data, such as blog posts, product pages, or user profiles. Next.js handles this through dynamic routes.

Example: Creating a Dynamic Route

Let’s say you want to display individual blog posts based on an ID.

You can create a file like this:

pages/blog/[id].js

Here, the [id] part indicates a dynamic segment. You can access the value of this segment inside your component using useRouter() from next/router.

Example:

import { useRouter } from 'next/router';

export default function BlogPost() {
  const router = useRouter();
  const { id } = router.query;

  return <h1>Blog Post ID: {id}</h1>;
}

If you navigate to /blog/1, it will render Blog Post ID: 1. Similarly, /blog/2 will render Blog Post ID: 2.

Catch-All Routes

Next.js also supports catch-all routes, which allow you to handle multiple path segments dynamically.

Example:

pages/docs/[...slug].js

This route can match /docs, /docs/setup, or /docs/setup/install. You can access the array of segments via router.query.slug.

Programmatic Navigation

In addition to the Link component, Next.js allows you to navigate between routes programmatically using the useRouter hook.

Example:

import { useRouter } from 'next/router';

export default function Home() {
  const router = useRouter();

  const goToContact = () => {
    router.push('/contact');
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={goToContact}>Go to Contact Page</button>
    </div>
  );
}

This is useful when navigation is triggered by an event, such as form submission or a custom button click.

Nested Routes Using Folders

Next.js allows you to organize your routes in folders, which automatically create nested routes.

Example folder structure:

pages/
 ├── blog/
 │   ├── index.js        → `/blog`
 │   ├── [id].js         → `/blog/:id`

Here, pages/blog/index.js will serve as the main blog listing page, and [id].js will handle individual blog posts.

API Routes in Next.js

Next.js also supports creating API routes directly within your application. These routes live inside the pages/api directory and can handle backend logic such as form submissions, database queries, or authentication.

Example:

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from API route!' });
}

You can access this API endpoint at /api/hello.

This feature makes Next.js a full-stack framework, allowing you to manage both frontend and backend logic within the same project.

App Router (Next.js 13 and Later)

In Next.js 13 and beyond, a new App Router was introduced under the app directory. This offers more powerful and flexible routing capabilities, including:

• Server Components support
• Nested Layouts
• Data fetching using getServerSideProps or fetch() directly
• Parallel and Intercepting Routes

Example App Router Structure

app/
 ├── page.js            → `/`
 ├── about/
 │   └── page.js        → `/about`
 ├── blog/
 │   ├── page.js        → `/blog`
 │   └── [id]/page.js   → `/blog/:id`

The App Router provides better performance and scalability for large applications while keeping routing logic simple and organized.

Differences Between Pages Router and App Router

| Feature | Pages Router | App Router | |----------|---------------|-------------| | Directory | /pages | /app | | Data Fetching | getStaticProps, getServerSideProps | fetch() directly in components | | Layouts | Manual | Built-in nested layouts | | Dynamic Routing | [param].js | [param]/page.js | | Ideal Use Case | Simple apps | Large, complex apps |

Best Practices for Routing in Next.js

1. Use Descriptive File Names: Name your files based on the purpose of the route (e.g., about.js, contact.js, blog/[id].js).
2. Group Related Routes: Organize routes into folders to maintain a clear structure.
3. Leverage Dynamic Routes: Use dynamic segments for user profiles, blog posts, or product pages.
4. Handle 404 Errors Gracefully: Add a pages/404.js file for a custom 404 page.
5. Optimize Navigation: Use the Link component for internal navigation to avoid full page reloads.
6. Prefer App Router for New Projects: If you’re using Next.js 13+, adopt the App Router for future scalability.

Common Routing Issues and How to Fix Them

• Page not found (404): Check file names and paths for typos.
• Dynamic route not loading: Ensure you’re using router.query correctly.
• Navigation lag: Verify that you’re using client-side navigation (Link) instead of full reloads.
• Conflicting routes: Avoid creating duplicate file names or nested structures that clash.

Conclusion

Routing in Next.js is both powerful and developer-friendly. With its file-based routing system, dynamic routing, and App Router for complex layouts, Next.js provides everything you need to build fast and scalable web applications. Whether you’re building a simple website or a full-scale enterprise app, mastering routing will make your development process smoother and more efficient.

If you’re looking to build high-performance Next.js or MERN stack applications, AAMAX — a full-service digital marketing and web development company offering MERN Stack Development, SEO, and Digital Marketing Services. Their expert developers can help you create scalable, optimized, and visually appealing web applications that meet your business goals.