Next JS Routing Patterns

#webdev #nextjs #react #javascript

Hello everyone today i will be discussing Next JS Routing Patterns.

Introduction:

Next.js has gained immense popularity in the React ecosystem as a powerful framework for building server-rendered React applications. One of the standout features of Next.js is its robust routing system, which allows developers to implement various routing patterns to navigate between pages. In this article, we will explore the different routing patterns available in Next.js and provide example code snippets to demonstrate their usage.

1. File-based Routing:

Next.js follows a file-based routing approach, where each page in your application is represented by a corresponding file in the pages directory. For example, creating a file named about.js inside the pages directory will automatically generate a route for /about. Let's take a look at an example:

// pages/about.js
const AboutPage = () => {
  return <h1>About Page</h1>;
};

export default AboutPage;

2. Dynamic Routes:

Next.js provides a powerful mechanism for handling dynamic routes, allowing you to create pages with dynamic parameters. Dynamic routes are defined by enclosing a portion of the file name with square brackets ([]). Here's an example:

// pages/posts/[id].js
const PostPage = ({ id }) => {
  return <h1>Post ID: {id}</h1>;
};

export default PostPage;

export async function getServerSideProps({ query }) {
  return {
    props: {
      id: query.id,
    },
  };
}

In the above example, the file name [id].js indicates a dynamic route where the id parameter can take different values. The getServerSideProps function is used to fetch data based on the dynamic parameter and pass it as a prop to the component.

3. Nested Routes:

Next.js supports nested routes, allowing you to create complex page hierarchies. By organizing your files into nested directories, you can create nested routes. Here's an example:

// pages/products/index.js
const ProductsPage = () => {
  return <h1>Products Page</h1>;
};

export default ProductsPage;

// pages/products/category.js
const CategoryPage = () => {
  return <h1>Category Page</h1>;
};

export default CategoryPage;

In this example, the file index.js inside the products directory corresponds to the route /products, while the category.js file inside the products directory corresponds to the route /products/category.

4. Custom Routes:

Next.js also allows you to define custom routes using the next/link and next/router APIs. This gives you full control over the routing mechanism and enables more complex navigation patterns. Here's an example:

import Link from 'next/link';
import { useRouter } from 'next/router';

const CustomRoutePage = () => {
  const router = useRouter();

  const handleButtonClick = () => {
    router.push('/custom-page');
  };

  return (
    <div>
      <h1>Custom Route Page</h1>
      <Link href="/about">
        <a>About</a>
      </Link>
      <button onClick={handleButtonClick}>Go to Custom Page</button>
    </div>
  );
};

export default CustomRoutePage;

In this example, the Link component from next/link is used to create a link to the /about page. The router object from next/router is used to programmatically navigate to the /custom-page route when the button is clicked.