Configuring Rewrites in Next.js

Introduction

Next.js is a popular React framework that allows developers to build server-side rendered React applications with ease. One of the features of Next.js is the ability to configure rewrites, which can be used to redirect URLs or serve different content based on certain conditions. In this blog post, we'll discuss how to configure rewrites in Next.js and provide some real-world examples of how they can be used.

What are Rewrites?

Rewrites are a feature in Next.js that allows you to modify how incoming requests are handled by the server. This can be useful in a number of scenarios, including:

• Redirecting incoming URLs to new destinations
• Serving different content based on certain conditions (e.g. environment variables)
• Mapping incoming requests to different endpoints

Next.js provides a simple syntax for configuring rewrites in your next.config.js file. Let's take a look at how this works.

How to Configure Rewrites in Next.js

To configure rewrites in Next.js, you'll need to create a next.config.js file in the root of your project. In this file, you can export an object with a rewrites property, like so:

// next.config.js

module.exports = {
  rewrites: async () => {
    return [
      {
        source: '/old-blog/:slug',
        destination: '/new-blog/:slug',
      },
    ]
  },
}

In this example, we're configuring a rewrite that will redirect any URLs that start with /old-blog/ to the corresponding URL in the new blog (/new-blog/). The :slug parameter will be preserved in the rewrite.

You can use any valid regular expression for the source property, and the destination property can be a string or a function that returns a string.

Real-World Examples

Here are a few examples of how rewrites can be used in real-world scenarios:

• Redirecting incoming URLs from an old blog to a new blog
• Serving different content based on the environment (e.g. development vs production)
• Mapping incoming requests to different endpoints based on the user's locale

I recently used rewrite in a NextJS and Strapi project. I had both a production and a development environment, and I needed to rewrite the image paths differently for each environment.

rewrites: async () => {
    return [
      {
        source: '/uploads/:path*',
        destination:
          process.env.NODE_ENV === 'production'
            ? 'https://fakeserver.com:1337/uploads/:path*'
            : 'http://locahost:1337/uploads/:path*',
      },
    ];
  },

Rewrites vs. Redirects

While rewrites and redirects may seem similar, there are some key differences between the two.

Redirects are used to send a client to a different URL than the one they requested. This can be useful for a number of reasons, such as when content has moved to a new location or when a URL needs to be updated for SEO purposes. However, redirects can be slow and negatively impact the user experience if they're not used correctly.

Rewrites, on the other hand, are used to modify how incoming requests are handled by the server. They can be useful for a number of scenarios, as we've discussed, but they don't involve sending the client to a different URL. Instead, they allow you to serve different content or modify how requests are handled based on certain conditions.

In general, if you need to send a client to a different URL, you should use a redirect. If you need to modify how requests are handled on the server, you should use a rewrite.

In Next.js, both rewrites and redirects can be configured using the next.config.js file. However, the syntax for each is slightly different, so it's important to understand the differences between the two and choose the appropriate one for your use case.

Conclusion

Rewrites are a powerful feature in Next.js that allows you to modify how incoming requests are handled by the server. Whether you need to redirect URLs, serve different content based on certain conditions, or map incoming requests to different endpoints, rewrites provide a simple and flexible solution. I hope this blog post has provided you with a solid understanding of how to configure rewrites in Next.js.

References

Rewrites: Official Docs

Redirects: Official Docs