Next.js & Advanced Routing: A Beginner’s Guide

Written by

learnmodernwebdevelopment

in

Routing is a fundamental concept in web development, dictating how a user navigates through your application. In Next.js, a popular React framework, routing is made simple and powerful. This tutorial dives deep into advanced routing techniques, moving beyond the basics to help you build more complex and user-friendly web applications. We’ll explore dynamic routes, nested layouts, and how to create a seamless navigation experience.

Why Advanced Routing Matters

Imagine building an e-commerce platform. You need product pages, category pages, user profiles, and a checkout flow. Without a robust routing system, managing all these pages and their interconnections would be a nightmare. Advanced routing allows you to:

  • Create Dynamic Pages: Generate pages based on data, like product details or blog posts, without manually creating each page.
  • Improve User Experience: Design intuitive navigation, making it easy for users to find what they need.
  • Boost SEO: Create clean, SEO-friendly URLs that help search engines understand your website’s structure.
  • Enhance Code Organization: Structure your application logically, making it easier to maintain and scale.

This guide will equip you with the knowledge to handle these challenges effectively, providing you with practical examples and best practices.

Understanding Next.js Routing Fundamentals

Before diving into advanced techniques, let’s recap the basics. Next.js uses a file-system-based router. This means that the structure of your pages directory dictates your application’s routes.

Basic Route Structure

Consider the following file structure:

/pages
  /index.js        // Route: /
  /about.js        // Route: /about
  /contact.js      // Route: /contact

In this simple example:

  • index.js maps to the root route (/).
  • about.js maps to the /about route.
  • contact.js maps to the /contact route.

Each JavaScript file in the pages directory represents a page in your application.

Creating Links

To navigate between pages, Next.js provides the Link component from next/link. This component is crucial for client-side navigation, providing a smoother user experience.

import Link from 'next/link'

function HomePage() {
  return (
    <div>
      <h1>Welcome to the Home Page</h1>
      
        <a>About Us</a>
      
    </div>
  )
}

export default HomePage;

In this code:

  • We import the Link component.
  • We use Link to wrap the a (anchor) tag, which creates a link to the /about page.
  • When a user clicks “About Us”, Next.js will navigate to the about page without a full page reload, making the transition fast and seamless.

Dynamic Routes in Next.js

Dynamic routes allow you to create pages based on data. For example, you might want a product page for each product in your database. Instead of creating a separate file for each product, you can use a dynamic route.

Creating a Dynamic Route

To create a dynamic route, you create a file inside your pages directory with the following structure: [param].js, where param is the name of the parameter you want to capture.

Let’s create a dynamic route for product pages. We’ll create a file named /pages/products/[id].js. The [id] part indicates that this route will capture the value of the id parameter in the URL.


/pages
  /products
    /[id].js

Inside [id].js, you’ll need to fetch the product data based on the id from the URL. Next.js provides the useRouter hook for this purpose.

import { useRouter } from 'next/router'

function ProductDetail() {
  const router = useRouter()
  const { id } = router.query

  // Fetch product data based on the 'id'
  // Example: const product = await fetchProduct(id)

  return (
    <div>
      <h1>Product ID: {id}</h1>
      {/* Display product details */} 
    </div>
  )
}

export default ProductDetail;

In this example:

  • We import useRouter from next/router.
  • We use useRouter() to get the router object.
  • router.query contains the parameters from the URL. In this case, router.query.id holds the value of the id parameter.
  • You would then use this id to fetch the product data from an API or database.

Generating Paths for Dynamic Routes (getStaticPaths)

If you’re using Static Site Generation (SSG) or Incremental Static Regeneration (ISR), you need to tell Next.js which paths to pre-render. You do this by exporting a function called getStaticPaths from your dynamic route file.

export async function getStaticPaths() {
  // Fetch all product IDs from an API or database
  const products = await fetchProducts()

  const paths = products.map((product) => ({
    params: { id: product.id.toString() },
  }))

  return {
    paths,
    fallback: false, // or 'blocking'
  }
}

In this code:

  • getStaticPaths is an asynchronous function that fetches the data needed to generate the static paths.
  • It fetches a list of product IDs (fetchProducts()).
  • It maps over the product IDs to create an array of paths. Each path object includes a params object, which contains the route parameters (in this case, the id).
  • The fallback option tells Next.js what to do if a path is not pre-rendered. false means that any path not returned by getStaticPaths will result in a 404 error. true creates a fallback page, and blocking blocks the request until the page is generated.

Fetching Data for Dynamic Routes (getStaticProps)

To fetch data for a dynamic route during the build process, you use the getStaticProps function.

export async function getStaticProps({ params }) {
  const { id } = params
  const product = await fetchProduct(id)

  if (!product) {
    return {
      notFound: true,
    }
  }

  return {
    props: { product },
  }
}

In this code:

  • getStaticProps is an asynchronous function that receives the params object, which contains the route parameters.
  • It fetches the product data based on the id.
  • If the product is not found, it returns notFound: true, which will result in a 404 page.
  • It returns the product data in the props object, which will be passed to the component.

Nested Layouts

Nested layouts allow you to create complex page structures with shared UI elements. For example, you might want a common header and footer across all pages within a specific section of your site, like a blog or a product catalog.

Creating a Nested Layout

To create a nested layout, you create a folder structure that reflects the layout. Let’s consider a blog section:


/pages
  /blog
    /index.js        // Route: /blog
    /[slug].js       // Route: /blog/[slug]
    _layout.js       // Layout for the /blog section

In this structure:

  • /blog/index.js is the blog’s home page.
  • /blog/[slug].js is a dynamic route for individual blog posts.
  • /blog/_layout.js is the layout component for the /blog section. The underscore prefix (_) tells Next.js that this is a layout file and not a route.

Implementing the Layout

Inside _layout.js, you can define the layout structure. It receives a children prop, which represents the content of the current page. The children will be rendered within the layout.


// pages/blog/_layout.js
function BlogLayout({ children }) {
  return (
    <div>
      <header>Blog Header</header>
      <main>{children}</main>
      <footer>Blog Footer</footer>
    </div>
  )
}

export default BlogLayout;

In this example:

  • The BlogLayout component defines the layout.
  • It includes a header, a main section (where the page content will be rendered), and a footer.
  • The {children} prop represents the content of the page (e.g., the content of index.js or [slug].js).

Using the Layout in Pages

To use the layout, you simply export the layout component from your page files.


// pages/blog/index.js
import BlogLayout from './_layout'

function BlogIndex() {
  return (
    <div>
      <h1>Blog Home</h1>
      <p>Welcome to the blog!</p>
    </div>
  )
}

BlogIndex.getLayout = function getLayout(page) {
  return {page}
}

export default BlogIndex;

In this code:

  • We import the BlogLayout component.
  • The getLayout function is exported from the page component. This function receives the page component as an argument.
  • Inside getLayout, we wrap the page component with the BlogLayout.
  • Next.js will automatically use this layout for the /blog route.

Advanced Navigation Techniques

Beyond basic links and dynamic routes, Next.js offers advanced navigation techniques to improve user experience and control the navigation flow.

Programmatic Navigation with useRouter

Sometimes you need to navigate programmatically, based on user actions or data changes. The useRouter hook provides a router.push() function for this purpose.


import { useRouter } from 'next/router'

function MyComponent() {
  const router = useRouter()

  const handleClick = () => {
    router.push('/about') // Navigate to /about
  }

  return (
    <button>Go to About</button>
  )
}

export default MyComponent;

In this example:

  • We import useRouter.
  • We use router.push('/about') to navigate to the /about page when the button is clicked.

Navigating with Query Parameters

You can also navigate with query parameters, which are appended to the URL after a ?. This is useful for passing data to the new page.


import { useRouter } from 'next/router'

function MyComponent() {
  const router = useRouter()

  const handleClick = () => {
    router.push({
      pathname: '/search',
      query: { term: 'nextjs' },
    }) // Navigate to /search?term=nextjs
  }

  return (
    <button>Search</button>
  )
}

export default MyComponent;

In this example:

  • We use router.push() with an object.
  • The pathname specifies the destination route.
  • The query object contains the query parameters (term: 'nextjs').
  • The resulting URL will be /search?term=nextjs.

Prefetching Pages

Next.js automatically prefetches pages linked using the Link component in production. This means that when the user hovers over a link, Next.js starts fetching the page’s code in the background, making the navigation faster.

You can disable prefetching for a specific link by setting the prefetch prop to false.


import Link from 'next/link'

function MyComponent() {
  return (
    
      <a>About Us</a>
    
  )
}

export default MyComponent;

This is useful if you have a link to a page that’s large or rarely visited.

Common Mistakes and How to Fix Them

Here are some common mistakes developers make when implementing advanced routing in Next.js and how to avoid them:

Incorrect File Structure for Dynamic Routes

One of the most common mistakes is creating the wrong file structure for dynamic routes. Remember that the file name should be [param].js.

Example: Incorrect: /pages/product_details.js. Correct: /pages/products/[id].js

Forgetting to Handle fallback: false in getStaticPaths

When using SSG or ISR with dynamic routes, you must ensure that all potential paths are pre-rendered. If you set fallback: false in getStaticPaths and a user tries to access a path that wasn’t pre-rendered, they’ll get a 404 error.

Fix: Ensure your getStaticPaths function returns all possible paths. If you can’t, consider using fallback: true or fallback: 'blocking', but be aware of the performance implications.

Incorrectly Using useRouter in Static Pages

The useRouter hook is designed for client-side navigation. If you try to use it within getStaticProps or getStaticPaths, it won’t work because these functions run during the build process on the server.

Fix: Access the route parameters through the params argument of getStaticProps or getStaticPaths.

Misunderstanding Layouts

Incorrectly implementing layouts can lead to unexpected behavior. Ensure that the getLayout function is correctly defined and that the layout component receives the children prop.

Fix: Double-check the layout structure and verify that the children prop is used to render the page content.

Key Takeaways

  • Next.js provides a powerful and flexible routing system based on the file system.
  • Dynamic routes allow you to create pages based on data, making your applications more scalable.
  • Nested layouts enable you to structure your application’s UI with shared elements.
  • The useRouter hook provides programmatic navigation capabilities.
  • Understanding the nuances of getStaticPaths and getStaticProps is crucial for SSG and ISR.

FAQ

  1. What is the difference between client-side and server-side routing?

    Client-side routing happens in the browser, without a full page reload. Server-side routing happens on the server, and the server returns a new HTML document. Next.js combines both techniques for optimal performance. The Link component and client-side navigation provide a smooth user experience, while server-side rendering and static site generation offer performance benefits and SEO optimization.

  2. How do I handle 404 errors in Next.js?

    Create a file named /pages/404.js. Next.js will automatically serve this page when a route is not found. You can customize this page to display a user-friendly error message.

  3. Can I use regular expressions in Next.js routes?

    No, Next.js does not directly support regular expressions in the file-system-based router. However, you can achieve similar functionality by using dynamic routes and validating the route parameters within your component.

  4. What is the difference between fallback: false, fallback: true, and fallback: 'blocking' in getStaticPaths?

    • fallback: false: If a path isn’t generated during the build, it will result in a 404 error.
    • fallback: true: If a path isn’t generated during the build, Next.js will serve a fallback page. When the user visits the page, Next.js will generate the page on-demand in the background and cache it for future visits.
    • fallback: 'blocking': Similar to fallback: true, but the user will see a loading state while the page is generated on the server. The page is then cached for future visits.
  5. How do I pass data between pages in Next.js?

    You can pass data using query parameters in the URL (e.g., /about?name=John), using the Link component with query parameters, or by using state management solutions like Context API or a dedicated state management library (e.g., Zustand, Redux). For simple data transfer, query parameters are often sufficient. For more complex data, consider state management.

Mastering advanced routing in Next.js empowers you to build sophisticated web applications with ease. By understanding dynamic routes, nested layouts, and navigation techniques, you can create a seamless and engaging user experience. As you continue your journey, remember to explore the many features Next.js offers. Experiment with the different routing options and adapt them to your project’s specific needs. The key is to practice, explore, and continually refine your understanding of how Next.js routing can enhance your web development projects.

More posts