Search code examples
internationalizationnext.jsurl-routing

How to handle multiple translated URL routes in Next.js (domain routing)?

I have a multi-language web app that I'm refactoring to use Next.js.

The problem is that I have a few pages that are not under any specific folder, and they have different paths based on the page language.

The internationalization is domain-based. There will be a domain for each country.

For example:

/about-us          // ENGLISH
/sobre-nosotros    // SPANISH

/privacy           // ENGLISH
/privacidad        // SPANISH

/contact           // ENGLISH
/contacto          // SPANISH

/products          // ENGLISH
/productos         // SPANISH

How would I even route something like that in Next.js ?

The only way I've thought of so far is to not translate the paths for each country. I would use only the English slugs. So, the Privacy page for every country would be on /privacy. The About page would always be on /about and so on. It's doable, but I guess I'll lose some SEO points without the translated slugs. A doable but terrible idea would be to add a file to each translated route, I guess. Like: about-us.js, sobre-nosotros.js, etc.

Is there another way? What would be the best practice in this case?

Solution

  • I'll post my own answer and thoughts here and let's see if anyone has a better answer to this.

    These were my project requirements:

    • Website for multiple countries
    • Same website structure (layout, UI, etc)
    • Each country should have its own CC-TLD because of SEO. Also the brand name is not global. It's country specific.
    • Besides page content translation, some pages need to have their URL slugs translated. Like US_DOMAIN.com/about-us and ES_DOMAIN/sobre-nosotros. Pages with universal terms like /blog would be OK to be the same in every country.
    • Each country has its own database data. For example: US website has its own product database, ES has another, and so on. It would be OK to share the database, but each website would use a different collection of documents.

    Even though it would be very nice to maintain the code for all websites in a single project, I guess it will be easier (and more maintainable at the end of the day) if I split it into multiple projects. I'll have one project per country.

    Next.js allows us to easily to do the following:

    • OPTION 1: Use same domain and use sub-folders for translation. Like:
      • example.com/es/sobre-nosotros
      • example.com/us/about-us
    • OPTION 2: Use different domains but use the same slug for pages that should be the same. Like:
      • example.com/about
      • ejemplo.es/about

    But things get very tricky when you try to implement the following:

    • OPTION 3: Use different domains and translated slugs
      • example.com/about-us
      • example.com/sobre-nosotros

    In the end, if your website differs too much between countries (like mine), maybe you should split it into different projects. Otherwise, use option 1 or 2 mentioned above.