What is the purpose of the next.config.js rewrites property?
The rewrites
property offers a powerful mechanism for rewriting incoming request paths to different destination paths within your Next.js application.
Here’s an explanation of the rewrites
property in next.config.js
:
Purpose:
- The
rewrites
property offers a powerful mechanism for rewriting incoming request paths to different destination paths within your Next.js application.
Key Features:
- Configuration: It’s configured as an asynchronous function that returns an array (or object of arrays) of rewrite objects, each defining a specific rewrite rule.
- Server-Side Rewriting: Rewrites occur on the server before the request reaches the client, ensuring full control over routing and content delivery.
- Transparent Redirection: Unlike redirects, rewrites mask the destination path, making it appear as if the user remains on the original URL. This maintains a seamless user experience without visible URL changes.
- Parameter Handling: Query parameters from the original URL can be passed to the destination path, enabling dynamic content fetching and routing.
Javascript
module.exports = { async rewrites() { return [ { source: '/blog/:slug' , destination: '/posts/:slug' , }, ]; }, }; |
Next JS Interview Questions and Answers (2024)
The Next JS stack, often referred to as the “N stack” (Next JS stack), is a comprehensive web development framework designed to streamline the creation of modern web applications. It is built around Next JS, a powerful React-based framework that adds additional capabilities for server-side rendering, routing, and more.
Let’s discuss some common Next JS interview questions that will help to clear interviews, particularly for frontend development roles. These questions are designed to assess your proficiency in Next JS and your ability to work on the front end of web applications.
Similar Reads
10. Explain the concept of dynamic routing in Next JS:
Next.js uses a client-side navigation approach that leverages the HTML5 History API. This enables smooth transitions between pages on the client side without a full page reload. The framework provides a built-in Link component that facilitates client-side navigation, and it supports both traditional anchor () tags and programmatically navigating through the next/router module....