Search code examples
javascriptnext.jsinternationalizationdynamic-routing

How to build dynamic routes with internationalized routes (i18n) using Next.js without getStaticPaths?

I’m trying to find a solution for building simple dummy dynamic routes to have something like: /order/{productid}.

Next allows us to take different strategies, but in order to achieve what I need it seems, I saw two possibilities:

  1. Static paths generation: Since I have around 1400+ products, static generation for it would only make sense if I could use ISR, so I could fetch only a few offers and leave the rest to be incrementally generated using ISR. Unfortunately my usecase doesn't allow me to use ISR since I'm in Europe and the lambdas created by this feature are in the US, and this is a restriction for me.

  2. basic dynamic routing : I tried to run dummy examples with dynamic routes, but when doing this with i18n setup, it falls into an infinite loop. I tried really hard to research about it and I found nothing useful.

What have I tried? I took this example https://nextjs.org/docs/routing/dynamic-routes and added i18n to the docs example so that I could showcase the issue.

You can find it here: https://github.com/sergioviniciuss/next-dynamic-routing-i18n

Please, any ideas are welcome.

Solution

  • The issue was actually because I was passing the port in my i18n domains config. For localhost, I was passing also the port, and that was causing an infinite loop:

        domains: [
      {
        domain: 'localhost:3000',
        locales: [
          "de-DE",
          "de-AT",
          "en-US",
          "en-IE",
          "en-GB",
          "nl-NL",
          "es-ES",
          "fr-FR",
        ],
        defaultLocale: process.env.APP_LOCALE || "en-US",
        http: true,
      },
    ],

    So instead of domain: 'localhost:3000', it should be domain: 'localhost',

    And it works like a charm.