Failing to get quite simple i18n and dynamic routing to work with Next.js

Question

First things first - I've read the Next.js docs, passed the tutorial, looked at a number of examples, but at the end of the day, I am still failing to achieve a very simple thing with Next.js.

I have an application that has these locales: en and de.

The routes look like this:

/en/things/[id]
/de/things/[id]

So basically, I need to display some static texts in two languages that have nothing to do with the thing ID. These are just plain texts the same for all IDs. Then I have some AJAX that actually needs the ID from the path.

Now the troubles start:

1. If I don't have getStaticProps in the things/[id].js, I got this error:

Error: MISSING_MESSAGE: No messages were configured on the provider.

2. Then I add the getStaticProps like this:

export async function getStaticProps({locale}) {
  return {
    props: {
      messages: await import(`../messages/${locale}.json`)
    }
  }
}

and get this error:

Error: getStaticPaths is required for dynamic SSG pages and is missing for '/things/[id]'.

3. Then I add getStaticPaths like this:

export const getStaticPaths = () => ({
  paths: [],
  fallback: 'blocking'
})

because I have a million IDs, I cannot pre-generate all the pages. Also, new IDs appear after the deployment of the app, so I cannot list all possible IDs as paths during build time.

Now I get this error:

Error: Error serializing `.messages` returned from `getStaticProps` in "/things/[id]".
Reason: `object` ("[object Module]") cannot be serialized as JSON. Please only return JSON serializable data types.

I cannot believe how such a simple thing can be so hard to achieve in a "framework" that claims to make life easier when working with React. I am trying to migrate an existing application from create-react-app to Next.js, but very simple things are so confusing to achieve.

Please, tell me how to achieve the following very simple thing:

1. Have one static page with static text in two languages: EN and DE.
2. Have users access the page like this: /[locale]/things/[id].
3. Have some AJAX code that actually uses the thing ID from the URI path.

Answer 1

You shouldn't create 2 separate routes for local language instead setup next-i18next it will automatically async your links according to selected local language.