title: Best way for internationalization with Gatsby and Strapi
body: <p>In my company, we are building a static website using Gatsby framework and the Strapi headless CMS.</p>
  <p>My question is how to deal with i18n?</p>
  <p>First, I know that is a difficult question and there is not one answer, but different answers depending of the context. So, I will resume you my research, and I hope you will help me to close this topic. :)</p>
  <p><strong>First</strong> idea, the most easy one, let's search a plugin!</p>
  <p>There is one : <a href="https://www.npmjs.com/package/gatsby-source-strapi-localized" rel="nofollow noreferrer">gatsby-source-strapi-localized</a></p>
  <p>Unfortunately, it is not maintained, so, I will not use it. :'(</p>
  <p>Ok, <strong>second</strong> things, lets see what Strapi suggests!</p>
  <p>Strapi does not have an i18n feature for now, it is planned for the end of 2020 on the <a href="https://portal.productboard.com/strapi/1-public-roadmap/c/19-content-internationalization-ce-ee-v4" rel="nofollow noreferrer">roadmap</a>.</p>
  <p>But there is a work around, using suffix at the end of the fields:
  <a href="https://medium.com/strapi/content-internationalization-with-strapi-507ef5869c15" rel="nofollow noreferrer">medium article</a> (With the same idea, you can also suffix your Types directly)</p>
  <p>So, now we got suffix on fields or types, let's go to the <strong>third</strong> part, Gatsby !</p>
  <p>And it's a nightmare. XD</p>
  <p>Actually, there is different solutions to solve that, but I did not find mine. :'(</p>
  <p>I found this <a href="https://www.gatsbyjs.org/blog/2020-07-28-introducing-gatsby-i18n-theme/" rel="nofollow noreferrer">article</a>, about the new i18n gatsby theme. I download the starter to try to understand how it works.
  What I understand is that pages for blog are generated automatically in 2 different languages, thank to the <strong>createPage</strong> function. 2 mdx files are created to store the data and the <strong>LocalizedLink</strong> component are used for redirections.</p>
  <p>It is interesting, but it does not fit my problem well. So, let's tell you what I thought:</p>
  <p><em><strong>Spoiler alert ! :</strong></em> I am not familiar with the React packages for i18n, I just discover them this morning, it's why maybe I don't see the answer ^^'</p>
  <p>First thing is &quot;How to create the good url? &quot; To do that, I have to choices :</p>
  <ol>
  <li>Create 2 folders in my <strong>page section</strong>, one FR and one EN, it will be added in my URL (mySite.org/FR)</li>
  <li>use <strong>gatsby-plugin-i18n</strong>, which allow you to create a index.fr.js and index.en.js to generate mySite.org/fr or mySite.org/en</li>
  </ol>
  <p>After that, in each files, I can customize my query to ask the data in the good language:</p>
  <pre><code>allStrapiHomePage {
    edges {
      node {
        mainBanner {
          title_lang
        }
      }
    }
  }
  </code></pre>
  <p>Or :</p>
  <pre><code>allStrapiHomePage_lang {
    edges {
      node {
        mainBanner {
          title
        }
      }
    }
  }
  </code></pre>
  <p>For redirections, I can check the context to know in which page I am.</p>
  <p>The things that I don't like, it's that I will have 2 files per pages, only for the query, the rest of the page is the same :/</p>
  <p>So, the question is : <em>How can I generate 2 pages per page with the good URL and the good query ?</em> (you've got 2 hours è__é.... XD)</p>
  <p>The <strong>createPage</strong> function allow you to pass variables in context, which could help me for the query. I can modify the path too, that can help me for the URL. But the folder <strong>pages</strong> are already processed by Gatsby... I can't modify the process.</p>
  <p>Does anybody have an idea to clarify this topic? :)</p>