Routing in Next.js with App Router and reactStrictMode

Next.js is one of the most popular frameworks for JavaScript applications for developing web applications using React. This framework provides various features for optimizing applications. In this article, we aim to discuss the use of App Router in Next.js and the specifics of reactStrictMode.

The first aspect we need to understand is the concept of App Router in Next.js. App Router gives you the ability to easily direct traffic within your application by defining various routes. This section is very useful for creating manageable and logical structures in complex applications.

Another important feature in this domain is the configuration file next.config.js. In this file, you can set various settings related to your application, such as behavior modification and specific server configurations.

Using the feature reactStrictMode also helps you manage the life cycles of components and application loops more effectively. This feature is especially useful for identifying potential issues in your code and improving best practices, such as utilizing proper memory management techniques.

In the next section, we will become familiar with the syntax of the following examples in an operational manner.

// next.config.js:
module.exports = {
  reactStrictMode: true,
  async redirects() {
    return [
      {
        source: "/old-path",
        destination: "/new-path",
        permanent: true,
      },
    ];
  },
};
  

Line by Line Explanations

// next.config.js: - Beginning of the routing configuration file in Next.js
module.exports = { - This line specifies the routing modules and features used
reactStrictMode: true, - Enabling strict mode for identifying potential issues in the code
async redirects() { - Defining an asynchronous method for managing redirects
return [ - Starting the definition of an array of redirects
{ - Introducing an object to define a specific route
source: "/old-path", - The original path to be redirected
destination: "/new-path", - The destination path for the redirect
permanent: true, - Defining the type of redirect as permanent
}, - End of the specific redirect object
]; - End of the array of redirects
}, - Completing the redirect method
}; - Closing the configuration module