DEV Community

A.S.M. Habibullah Sadique
A.S.M. Habibullah Sadique

Posted on

All about NextJS routing

Intro

  • It has a file-system based routing mechanism
  • When a file is added to the pages folder in a project, it automatically becomes available as a route
  • By mixing and matching file names with a nested folder structure, it is possible to pretty much define the most common routing patterns
  • Routing variations are:
    • Route with pages
    • Nested routes
    • Dynamic routes
    • Catch-all routes
    • Navigate from the UI
    • Programmatically navigate between pages

Routing with pages

It has a file-system-based routing mechanism.

  1. Scenario 01: index.js file within the pages folder will map to the root (https://localhost:3000) of your domain.
  2. Scenario 02: Pages are associated with routes based on their names. In the pages folder, about.js maps to https://localhost:3000/about and profile.js maps to https://localhost:3000/profile in the address bar.

Nested routes

  1. Scenario 01: pages->blog->index.js maps to https://localhost:3000/blog
  2. Scenario 02: pages->blog->first.js maps to https://localhost:3000/blog/first
  3. Scenario 03: pages->blog->second.js maps to https://localhost:3000/blog/second

Dynamic routes

  • To implement dynamic routes, you need to name a component by wrapping it with square brackets like [componentName].js and componentName will correspond to the dynamic value in the url
  • pages->product->[productId].js maps to https://localhost:3000/product/1, https://localhost:3000/product/2 or even https://localhost:3000/product/100. The number/string after the /product/ in the url will dynamically correspond and map to [productId].js component and the number/string after /product/ can be found inside [productId].js component using the useRouter hook like this -
 const router = useRouter();
    const productId = router.query.productId; 
    // productId is the dynamic component’s name
Enter fullscreen mode Exit fullscreen mode
  • But if a number/string after /product/ in the url is matched with the name of a component already existing inside the product page, that component with the matched name will get priority over [productId].js and be rendered rather than [productId].js being rendered.

Nested dynamic routes

  • To implement nested dynamic routes like https://localhost:3000/product/7/review/2, you need a folder structure like pages/product/[productId]/review/[reviewId].js. Note that this time [productId] is a folder, not a .js file.
  • In this mechanism, to achieve the functionality of https://localhost:3000/product/1, (only dynamic, not nested dynamic) you need a folder structure like pages/product/[productId]/index.js. You will find productId in the url dynamically in the index.js file.
  • Thus you can implement dynamic nested routes by having dynamic segments in the folder name as well as file name.
  • Speaking of dynamic multiple path segments, Next JS does offer another feature to handle the same. To know more about the feature, read the next topic.

Catch all routes

    const router = useRouter();
    const { params = [] } = router.query; 
    // assigned an empty array because initially it is undefined 
    // and may give an error in production
    console.log(params); // [ "features1", "concept1" ]
Enter fullscreen mode Exit fullscreen mode
  • After getting your dynamic route segments, You can then conditionally render your components or JSX elements like this -
const Doc = () => {
    const router = useRouter();
    const { params = [] } = router.query; 
    // assigned an empty array because initially it is undefined 
    // and may give an error in production
    console.log(params); // [ "features1", "concept1" ]

    if (params.length === 2) {
        return (
            <h2>Viewing docs for feature {params[0]} and concept {params[1]}</h2>
        )} else if (params.length === 1) {
        return (
            <h2>Viewing docs for feature {params[0]}</h2>
        )}
    return (
        <div>Docs home page</div>
    )};

export default Doc;
Enter fullscreen mode Exit fullscreen mode
  • But the folder structure pages/docs/[...params].js will give a 404 while trying to access https://localhost:3000/docs. To have a quick fix, you can put another pair of square brackets around [params].js, so the new folder structure is pages/docs/[[...params]].js and https://localhost:3000/docs does not give a 404 and works as expected.

Link component navigation

You can navigate in the UI using Link component offered by Next.js like this -

<Link href="product/2" replace >
     <a>Go to Product 2</a>
</Link>
Enter fullscreen mode Exit fullscreen mode

Navigating programmatically

You can navigate programmatically using useRouter. All other routing variations are valid in this mechanism.

const Home = () => {
    const router = useRouter();
    const handleOrder = () => {
        console.log('Placing the order...');
        router.push('/product');
    };
    return (
        <div>
            <button onClick={handleOrder}>Place order</button>
        </div>
    );
};

Enter fullscreen mode Exit fullscreen mode

Custom 404 page

To provide your custom 404 page, create a 404.js file in the pages folder.

Conclusion

So, that is all about routing in NextJS. Hope you liked it. Thanks for reading.

Top comments (1)

Collapse
 
pabloferrari013 profile image
Pablo Ferrari

sensational content 👏