Using next-i18next in Storybook

README.md

Using next-i18next in Storybook

next-i18next is built to work server-side as well as client-side. Storybook doesn't support server-side rendering so there's nowhere to add the next-i18next middleware. The good news is that means we don't have to support server-side rendering and can just use the underlying react-i18next and i18next-instance.

Adding a Storybook Decorator

We're going to add a decorator which will allow us wrap all stories in the <I18nextProvider>.

The decorator will be added to .storybook/preview.js so you need to create one if you haven't already.

import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';

addDecorator(storyFn => (
  <I18nextProvider i18n={i18n}>{storyFn()}</I18nextProvider>
));

Configuring i18next

We can't use the same i18n config that we use in next-i18next. We need to use a react-i18next instance. I recommend creating the file at .storybook/i18n.js since it's just for Storybook config. The setup can be as simple as this:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n.use(initReactI18next).init({
  fallbackLng: 'en',
  debug: true
});

export default i18n;

Configuring Static Paths in Storybook

The last step is to tell Storybook that it should serve the locales dir as a static path. We achieve this with the -s CLI flag.

{
  "scripts": {
    "start-storybook": "start-storybook -s ./public"
  }
}

Hey @justincy let me ask, this is a configuration only for Storybook, right? Can I still use the next-i18next like the setup guide and for Storybook use your guide? I mean, my components use withTranslation from initialised NextI18Next instance.

@pauloandreget Correct.

I had the problem that i18n requires React.Suspense. I put in React.Suspense and got the error: "Cannot convert a symbol value to a string". Vicious circle. Your algorithm helped me disable React.Suspense for storybook only 🎉🎉 Thanks)

ssr ：Warning: Failed prop type: The prop nextI18NextInternals.config.localeSubpaths is marked as required in Link, but its value is undefined.
@justincy

@hxxiaolong That's likely related to the new locale routing functionality released in v10 of Next.js. I don't know much about that. Perhaps you could ask in their discussions. It's probably just a setting that needs to be mocked.

bump. Any changes since then? Any possible fallbacks, settings for next-i18next to work only in the client-side?

I couldn't make it work as of now (Next 12.2, sb 6.5), however this thread pointed me in right direction: i18next/next-i18next#1012
Since this gist is high in google rank I give myself a liberty to comment here.

@iamcsharper hopefully it will help you!

I'm getting:

ERR! ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
ERR!  - configuration.node has an unknown property 'fs'. These properties are valid:
ERR!    object { __dirname?, __filename?, global? }
ERR!    -> Options object for node compatibility features.

@shamoons I have the same issues. I don't find why :(

Same on my end

ERROR in ./node_modules/next-i18next/dist/esm/config/createConfig.js 100:15-28
Module not found: Error: Can't resolve 'fs' in '<path to my project>/node_modules/next-i18next/dist/esm/config'

🤜 i18next/next-i18next#935 (comment)

@norgeous, What worries me about the simply import from react-18next solution is this note in the readme:

https://github.com/i18next/next-i18next/blob/2bb55ba975348a10ed6e89920c4e8b3300110004/README.md?plain=1#L148

Do NOT use the useTranslation export of react-i18next, but ONLY use the on of next-i18next!