DEV Community

Proper I18n with Gatsby, i18next and Sanity.io

Johannes Spohr on September 08, 2019

Prerequisites: Basic knowledge of Gatsby and Sanity.io tl;dr You can find the starter source here and the demo here Gatsby is a great tool for...

Read full post

Adrien Denat • Nov 20 '19 • Edited

I did a similar setup but didn't know about the GraphQL resolver to filter the Sanity data. That's such a smart solution!

One thing that I realised however is that there is no real reason to separate translations in two separate data source: Sanity and json files. This complicates the setup and also editors won't be able to change whatever is in your source code json. You could just put everything in Sanity and have a single source of content and editable!

Johannes Spohr • Nov 22 '19

Hi Adrien, thanks! In that project I wanted to use i18next because it's used in some components I reused from a different project. It also makes the translation of snippets available with hooks / hocs and avoids prop-drilling snippets. You could of course load the i18next translations from sanity, but for me just using json files was a bit easier.

jaska120 • Jan 21 '20

In what way did you end up putting all the content to Sanity? Using translation keys the same way as using json files and loading them to i18n-next or some other way? Did you manage translation interpolation this way?

Adrien Denat • Jan 22 '20 • Edited

Absolutely. I didn't need translation interpolation on that specific website but it should just work fine since Sanity API data is normal json, you can inject that as a ressource in i18n-next.
I might setup a fork of this repo soon (since I'm starting a new project really soon) so I'll try to remember and post it here as well.
But here is a snippet of how I did it:

i18next.addResourceBundle(pageContext.locale, "translation", {
  commons: mySanityData,
})

I only used this for global "commons" data but you could probably just inject all your Sanity data in i18n-next and then your component all use the i18n-next hooks to display CMS data.

Ahmed Abdulrahman 😻 • Jan 30 '20

Hey Adrien could you setup up a fork or upload any example of your approach :)

Adrien Denat • Jan 31 '20

Have a look there github.com/grsmto/gatsby-starter-i...

Ahmed Abdulrahman 😻 • Jan 31 '20

Thanks a lot I have checked it :) I think you continue updating this project?

tolchai • Jun 24 '20

Any idea how should resolver for SanityLocaleBlock look like? I would be thankful for any recommendation. Thanks!

Adrien Denat • Jun 29 '20

Mine looks something like this:

SanityLocaleBlock: {
      localized: {
        type: `JSON`,
        resolve(source, args, context, info) {
          return source[context.locale || args.locale] || source.en;
        },
      },
    },

Eslam Hesham • Apr 23 '22

Can you provide us with your setup plet

Albert Chen • Nov 27 '19

Hi I've been using this starter and it's working amazingly. Very simple. One thing that I am not getting is fallback - If the language I'm translating does not have a corresponding key in the json files then it just displays the key instead of falling back to my default language (english.) I tried to debug this but could not make it work. Do you know what is causing this?

Albert Chen • Nov 27 '19

I figured it out - the fall back settings need to be set in the wrapper component instead of the SSR i18next instance during createPages. That confused me. Thank you!

Ahmed Abdulrahman 😻 • Jan 26 '20

Is there a way to share your Gatsby + Sanity project here ?

Alex Borges • Jan 7 '20

This is so good. Wow. Thank you sir. Im trying the same, but with directus.io instead of sanity. Lets see how it goes... :D

Yash • Jun 27 '21

Sir can you share your sanity sanityShop document object or schema from sanity ? I wanted to explore how you have created scheme from sanity side.