Multi language website routing

[dolbyzerr]

Hi everyone!

I have a rather non-standard problem, in our company we have a website that is deployed in multiple countries and some have 2 or more languages and some have only 1.

For the single language setup (LANG=en) the routing should look like:

/my-page
/other-page

For the multilanguage setup (LANG=en,th) it should be:

/en/my-page
/en/other-page
/th/my-page
/th/other-page

The pages structure might look like:

pages
pages/index.js
pages/[lang]
pages/[lang]/index.js
pages/[lang]/my-page.js
pages/[lang]/other-page.js

The naive solution would be to duplicate everything into pages root with some default language code in each page.

Another solution might be catch-all route like [[...lang]], any caveats on this?

To make it even worse, I need to have redirects:

Single language

/en/my-page -> /my-page

Multi-language

/my-page -> /en/my-page

Any thoughts and help would be appreciated! Thanks!

[GwG422]

See if these might help.

…

On Mon, Jul 27, 2020, 8:20 PM Andrey ***@***.***> wrote: Hi everyone! I have a rather non-standard problem, in our company we have a website that is deployed in multiple countries and some have 2 or more languages and some have only 1. For the single language setup (LANG=en) the routing should look like: /my-page /other-page For the multilanguage setup (LANG=en,th) it should be: /en/my-page /en/other-page /th/my-page /th/other-page The pages structure might look like: pages pages/index.js pages/[lang] pages/[lang]/index.js pages/[lang]/my-page.js pages/[lang]/other-page.js The naive solution would be to duplicate everything into pages root with some default language code in each page. Another solution might be catch-all route like [[...lang]], any caveats on this? To make it even worse, I need to have redirects: Single language /en/my-page -> /my-page Multi-language /my-page -> /en/my-page Any thoughts and help would be appreciated! Thanks! — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#15549>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AOHQQEN7LQBVWRH7WEXSVY3R5Y7WDANCNFSM4PKAKCHA> .

[mebrein]

Maybe this helps. Just a single file [[...slug]].js inside the pages folder:

import React from "react";
import { useRouter } from "next/router";

export default function Index(props) {
  const router = useRouter();

  const countRoute = router.query.slug?.length || 0;

  let regionName = "fr";
  let pageName = "";

  switch (countRoute) {
    case 0:
      // http://localhost:3000 -> pageName '', region 'fr', query: {}
      pageName = "";
      break;
    case 1:
      // http://localhost:3000/test -> pageName 'test', region 'fr'', query: {"slug":["test"]}
      pageName = router.query.slug[0];
      break;
    case 2:
      // http://localhost:3000/de/test -> pagename: 'test', region: 'de'', query: {"slug":["de","test"]}
      regionName = router.query.slug[0];
      pageName = router.query.slug[1];
      break;
  }

  return (
    <>
      <p>regionName: {regionName}</p>
      <p>pageName: {pageName}</p>
      <pre>query: {JSON.stringify(router.query, null, props)}</pre>
    </>
  );
}

[jonasIv]

I'm having a related discussion here: #15526