Add guide/example for usage with Storybook

[WilhelmHjelm]

Could you please give an example or preferred way to use while using Storybook? I try to add to my preview.tsx in storybook but no components render inside and I get an error in the console that my locales aren't defined in next.config.js. They are and I use @storybook/nextjs as framework for Storybook which should make next.config.js available in Storybook.

[gustaveWPM]

Could you please give an example or preferred way to use while using Storybook? I try to add to my preview.tsx in storybook but no components render inside and I get an error in the console that my locales aren't defined in next.config.js. They are and I use @storybook/nextjs as framework for Storybook which should make next.config.js available in Storybook.

Hello. Please, could you provide a minimalist reproduction?

[WilhelmHjelm]

Could you please give an example or preferred way to use while using Storybook? I try to add to my preview.tsx in storybook but no components render inside and I get an error in the console that my locales aren't defined in next.config.js. They are and I use @storybook/nextjs as framework for Storybook which should make next.config.js available in Storybook.

Hello. Please, could you provide a minimalist reproduction?

This is my preview.tsx file in Storybook. It gives 0 type errors but in the console we get an error saying [next-international] 'i18n.defaultLocale' not defined in 'next.config.js'. And a warning [next-international] The following locales are defined in 'createI18n' but not in 'next.config.js': en, sv, no, da, de, fi. Whey are tho and our <I18nProvider> works as expected in the Next.js app but not in the Storybook app. Also nothing is rendered as children through <I18nProvider>. Not even the fallback prop.

import { Preview } from '@storybook/react'
import React from 'react'
import { I18nProvider } from '../locales'
import en from '../locales/dictionaries/en'

const preview: Preview = {
  decorators: [
    (Story) => (
      <main>
        <I18nProvider locale={en} fallback={<p>Fallback</p>}>
          <Story />
        </I18nProvider>
      </main>
    )
  ]
}

[gustaveWPM]

That's weird... I guess you are using the pages router?

Also, I don't think Storybook is causing the issue here...

Maybe you've missed something during the configuration? I'm thinking about this: https://github.com/QuiiBz/next-international/issues/350

[WilhelmHjelm]

Very weird indeed, since it works perfectly fine in the Next.js app.

Yes, pages router. This is the i18n section of my next.config.js.

  i18n: {
    locales: ['en', 'sv', 'no', 'da', 'de', 'fi'],
    defaultLocale: 'en',
    localeDetection: false
  },

also, this is my locales/index.ts

import { createI18n } from 'next-international'

export const { useI18n, useScopedI18n, I18nProvider, getLocaleProps } =
  createI18n({
    en: () => import('./dictionaries/en'),
    sv: () => import('./dictionaries/sv'),
    no: () => import('./dictionaries/no'),
    da: () => import('./dictionaries/da'),
    de: () => import('./dictionaries/de'),
    fi: () => import('./dictionaries/fi')
  })

[gustaveWPM]

Hmmm... I've never experienced Next International with the Pages Router... :/ Hope someone else can help!

[WilhelmHjelm]

Found a solution! @storybook/next gives you the ability to "mock the next/router". Just add the same i18n configs as in your next.config.js in your storybook/preview.tsx like this:

const preview: Preview = {
  parameters: {
    nextjs: {
      router: {
        locale: 'en',
        locales: ['en', 'sv', 'no', 'da', 'de', 'fi'],
        defaultLocale: 'en'
      }
    },

...

[gustaveWPM]

Found a solution! @storybook/next gives you the ability to "mock the next/router". Just add the same i18n configs as in your next.config.js in your storybook/preview.tsx like this:

const preview: Preview = {
  parameters: {
    nextjs: {
      router: {
        locale: 'en',
        locales: ['en', 'sv', 'no', 'da', 'de', 'fi'],
        defaultLocale: 'en'
      }
    },

...

I'm very glad to know it's solved! Is it possible to rename the issue to point out the lack of documentation about it?

I'd be happy to take the code snippets you shared and add a documentation page this weekend.

[QuiiBz]

That would be very appreciated @gustaveWPM!

[gustaveWPM]

I'm still on it, sorry for the delay! I'll do it. I just had a few setbacks. Sorry about that.