Introduction

Next.js, a popular React framework, offers built-in routing capabilities that make navigation between pages seamless and efficient. In this post, we'll dive into the world of routing in Next.js, exploring how to set up routes, handle dynamic routing, and create a smooth navigation experience for your web applications.

Understanding Next.js Routing

Next.js simplifies routing by using the file system as the basis for your routes. Each .js or .tsx file in the pages directory becomes a route. For example, a file named about.js within the pages directory will automatically create a route at /about.

Creating Basic Routes

To create basic routes, all you need to do is organize your files in the pages directory. For instance:

• pages/index.js - Represents the home page accessible at the root URL (/).

• pages/about.js - Corresponds to the about page (/about).

Dynamic Routing

Next.js supports dynamic routing, allowing you to create dynamic URLs with parameters. Simply create a file with square brackets in the pages directory, like [id].js, and you can access the id parameter using the useRouter hook:

import { useRouter } from 'next/router';

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

  return <div>Dynamic Page with ID: {id}</div>;
}

Navigating Between Pages

Next.js provides the Link component for client-side navigation between pages, improving the user experience by avoiding full page reloads. Here's an example of how to use it:

import Link from 'next/link';

function Navigation() {
  return (
    <nav>
      <Link href="/">
        <a>Home</a>
      </Link>
      <Link href="/about">
        <a>About</a>
      </Link>
    </nav>
  );
}

Programmatic Routing

For programmatic navigation, Next.js offers the useRouter hook and the router object. You can use them to navigate programmatically based on events or user interactions:

import { useRouter } from 'next/router';

function RedirectToAbout() {
  const router = useRouter();

  const handleButtonClick = () => {
    router.push('/about');
  };

  return <button onClick={handleButtonClick}>Go to About Page</button>;
}

Advanced Routing Techniques

Next.js also supports more advanced routing scenarios like nested routes, custom 404 pages, and custom server routing using the next.config.js file. These techniques allow you to fine-tune your routing behavior to match your application's needs.

Conclusion

Mastering routing in Next.js is essential for building well-organized and navigable web applications. By understanding basic routing, dynamic routes, navigation components, and programmatic navigation, you can create a smooth and enjoyable user experience. As you delve into more advanced routing techniques, you'll be equipped to create even more complex and dynamic applications using Next.js.