Can I create an alias for the name of a route?

Question

I'm building a Next.js 14 app with content in portuguese and english. I'm naming the folders of the routes in english (for example: about, contacts, etc). I'd like to create route name alias for portuguese. This way, opening website.com/about would go to the page as website.com/sobre.

Currently, I have the following route structure:

/src
- page.tsx
- layout.tsx
- /about
- - page.tsx

To resume, I want "about" route to have an alias name for other languages.

Answer 1

You can use rewrites in next.config.

Rewrites allow you to map an incoming request path to a different destination path. Rewrites act as a URL proxy and mask the destination path, making it appear the user hasn't changed their location on the site.

Your code would look something like this:

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: "/sobre",
        destination: "/about",
      },
    ];
  },
};

export default nextConfig;