i18n handling

[stecb]

Hello, this is a question/discussion about the proper/suggested way to handle i18n.
What I have (on my current app that I'm thinking to port to next) right now is: multiple LOCALE.yaml files (as I use localeapp to easily manage multiple locales) i.e.

// ...inside my main js entry point
import i18n from 'i18n-js';

// via webpack yaml/json loaders I load the ymls and then I convert them into json
const en = require('json!yaml!../config/locales/en.yml'); 
const it = require('json!yaml!../config/locales/it.yml'); 

// and feed the i18n lib like so
i18n.translations = { en: en.en, it: it.it };
i18n.fallbacks = true; // if no key is found => fallback to en
i18n.locale = getDefaultLocale(); // returns "en" or "it", based on navigator/querystring

therefore inside my react components I can use

import i18n from 'i18n-js';
export default () => <div>{i18n.t('key(.subkey)')}</div>

The things are:

• is there a way to do the ~ same thing within a next app? I tried to load the yaml files inside i.e. /pages/index.js but it's not working, and the error is thrown once I load the page ({ [Error: Cannot find module 'json!yaml!../config/locales/en.yml'] code: 'MODULE_NOT_FOUND' }).
• what if I want to manage these things for the whole application, so I want to include them on a 'wrapper' main js file?

ty!

[timneutkens]

The yaml error you're seeing is because next's webpack configuration doesn't include yaml files out of the box. In next.js v2.0.0 you can add them using https://github.com/zeit/next.js#customizing-webpack-config.

For your second question. v2.0.0 has a _document.js wrapper file where you could add the translations. https://github.com/zeit/next.js#custom-document

[pencilcheck]

I don't understand why loader syntax is not supported in nextjs out of the box though. Is that decision made in the past?

[timneutkens]

@pencilcheck Check out this ticket 👍 #1245

[pencilcheck]

Looks like there is a positive outcome, but not until 3.0... a long wait. Thanks for referring to the ticket. :)