title: Failing to get quite simple i18n and dynamic routing to work with Next.js
body: <p>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.</p>
  <p>I have an application that has these locales: <code>en</code> and <code>de</code>.</p>
  <p>The routes look like this:</p>
  <pre><code>/en/things/[id]
  /de/things/[id]
  </code></pre>
  <p>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.</p>
  <p>Now the troubles start:</p>
  <ol>
  <li>If I don't have <code>getStaticProps</code> in the <code>things/[id].js</code>, I got this error:</li>
  </ol>
  <pre><code>Error: MISSING_MESSAGE: No messages were configured on the provider.
  </code></pre>
  <ol start="2">
  <li>Then I add the <code>getStaticProps</code> like this:</li>
  </ol>
  <pre><code>export async function getStaticProps({locale}) {
    return {
      props: {
        messages: await import(`../messages/${locale}.json`)
      }
    }
  }
  </code></pre>
  <p>and get this error:</p>
  <pre><code>Error: getStaticPaths is required for dynamic SSG pages and is missing for '/things/[id]'.
  </code></pre>
  <ol start="3">
  <li>Then I add <code>getStaticPaths</code> like this:</li>
  </ol>
  <pre><code>export const getStaticPaths = () =&gt; ({
    paths: [],
    fallback: 'blocking'
  })
  
  </code></pre>
  <p>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.</p>
  <p>Now I get this error:</p>
  <pre><code>Error: Error serializing `.messages` returned from `getStaticProps` in &quot;/things/[id]&quot;.
  Reason: `object` (&quot;[object Module]&quot;) cannot be serialized as JSON. Please only return JSON serializable data types.
  </code></pre>
  <p>I cannot believe how such a simple thing can be so hard to achieve in a &quot;framework&quot; 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.</p>
  <p>Please, tell me how to achieve the following very simple thing:</p>
  <ol>
  <li>Have one static page with static text in two languages: EN and DE.</li>
  <li>Have users access the page like this: <code>/[locale]/things/[id]</code>.</li>
  <li>Have some AJAX code that actually uses the thing ID from the URI path.</li>
  </ol>