Nextjs routing without prefixes Spree Commerce

Question

I'm new to Next.js, and I want to replicate the permalink structure from a WordPress/WPML/Woocommerce site that has English as the default language (no "en" prefix) and additional languages: German, French, Spanish, etc. I'm using the Spree Commerce 4.6 based on spree_starter with extension gems like spree_reviews, etc.

The permalink structure on the original site is as follows:

// Homepage:
example.com/
example.com/de/
example.com/fr/

// Page:
/about/
/de/uber/
/fr/a-propos-de-nous/

// Sub-Page:
/about/contact-us/
/de/uber/kontakt/
/fr/a-propos-de-nous/contact/

// Wordpress Blog archive:
/blog/
/de/blog/
/fr/blog/

// Wordpress Blog single post:
/blog/meet-sarah-our-newest-ambassador/
/de/blog/treffen-sie-sarah-unsere-neueste-botschafterin/
/fr/blog/rencontrer-sarah-notre-nouvelle-ambassadrice/

// Woocommerce product category page:
/women/
/de/damen/
/fr/femmes/

// Woocommerce product sub-category page:
/women/shirts/
/de/damen/shirts/
/fr/femmes/chemises/

// Woocommerce product page:
/green-blouse-shirt/
/de/grunes-blusenshirt/
/fr/chemise-chemisier-verte/

// Wordpress custom post type archive [fashion-guides]:
/fashion-guides/
/de/mode-blog/
/fr/guides-de-mode/

// Wordpress custom post type single post [fashion-guides]:
/fashion-guides/plus-size-fashion-trends-in-2023/
/de/mode-blog/modetrends-in-ubergrossen-im-jahr-2023/
/fr/guides-de-mode/tendances-mode-grandes tailles-en-2023/

I've been looking into exportPathMap and routing docs on nextjs.org and here, but no one seems to have such a request/issue posted before.

Thank you for the help in advance!

Answer 1

With Next.js, you can use the next-translation plugin + i18n API. Have a look at this: https://github.com/aralroca/next-translate

By creating a configuration file, you specify each page that namespaces need.

Here is an example of a config file with English and French.

i18n.json

{
    "locales": ["en", "fr"],
    "defaultLocale": "en",
    "localeDetection": true,
    "pages": {
      "*": ["common"],
      "/gallery": ["common"],
      "/shop": ["common"],
      "/about": ["common"],
      "/contact": ["common"]
    }
  }

Next-translate ensures that each page only has its namespaces with the current language.