Cómo crear rutas en Next.js

What are static and dynamic routes in Next.js?

Next.js, one of the most popular frameworks for building React applications, deftly handles two main types of routes: static and dynamic. Understanding these distinctions is vital to designing efficient and robust applications. Static routes are those with a predefined fixed path within our project, while dynamic routes adapt depending on the URL entered, providing flexibility and scalability to the application.

How to create static routes?

Creating static routes in Next.js is an intuitive process, which is based on the project's file and directory structure-often referred to as "file system-based routing". Suppose you are developing an online store. You can define static routes by creating a specific directory and a corresponding page.tsx file, making it unnecessary to import React explicitly. This simplicity is one of the major attractions of the framework.

For example, to define the main store path:

// Inside the file store/page.tsxexport default function Store() { return <h1>Store</h1>;}

Why use dynamic routes?

Dynamic routes become crucial when our URL's must adapt to changing data, such as when browsing product categories that we might get from an API. In Next.js, these routes are defined by directories with the parameter name surrounded by square brackets.

For example, to handle categories in an online store:

// Inside the file store/[category]/page.tsxinterface CategoryProps { params: { category: string; };}; }
export default function Category({ params }: CategoryProps) { return<h1>Dynamic   category: {params.category}</h1>;}

Here, params.category allows access to the dynamic path segment, making it easy to use URL-specific data such as a title or to query an API. This not only simplifies code organization, but also improves performance by avoiding unnecessary loading and re-rendering of components.

How to get the most out of Next.js file system-based routing?

Next.js file system-based routing offers an opportunity to atomize components, improving application maintainability by segmenting logic into smaller, specialized pieces. By preferring this model over a lump of components in a single file, you not only keep the code cleaner, but also more efficient.

When designing, ask yourself how you can break down functionality into clear, reusable segments within your application. Can each product category in your store be an individual component? If so, each component can be managed in isolation, optimizing rendering and data consumption. Thus, when changes occur, the impact is minimized and it is easier to adapt the code to new functionalities or fixes.

The joint use of static and dynamic routes in Next.js offers a powerful tool to build web applications that are not only functional but also elegant and easy to maintain. Let's always keep in mind the balance between simplicity and scalability, ensuring that each path reinforces the structure and efficiency of our project.