feat: Change i18n library from next-translate to next-i18next

.storybook/main.js

@@ -16,6 +16,14 @@ module.exports = {
     emotionAlias: false,
   },
   webpackFinal: async (config) => {
+    config.resolve = {
+      ...config.resolve,
+      fallback: {
+        ...(config.resolve || {}).fallback,
+        fs: false,
+      },
+    }
+
     config.resolve.plugins = [
       ...(config.resolve.plugins || []),
       new TsconfigPathsPlugin({

.storybook/preview.tsx

@@ -1,23 +1,12 @@
 import '../styles/globals.css'
-import I18nProvider from 'next-translate/I18nProvider'
+import { I18nextProvider } from 'react-i18next'
 import { ThemeProvider } from '@mui/material'
 import { RouterContext } from 'next/dist/shared/lib/router-context'
 
-import i18nConfig from '../i18n.json'
+import i18n from '../utils/i18n'
+import { i18n as i18nConfig } from '../next-i18next.config'
 import { theme } from '../utils/theme'
-
-const namespaces = [...new Set(Object.values(i18nConfig.pages).flat())]
-const translations = Object.assign(
-  {},
-  ...i18nConfig.locales.map((locale) => ({
-    [locale]: Object.assign(
-      {},
-      ...namespaces.map((ns) => ({
-        [ns]: require(`../locales/${locale}/${ns}.json`),
-      })),
-    ),
-  })),
-)
+import { useEffect } from 'react'
 
 export const globalTypes = {
   locale: {
@@ -26,22 +15,29 @@ export const globalTypes = {
     defaultValue: i18nConfig.defaultLocale,
     toolbar: {
       icon: 'globe',
-      items: [{ value: 'ja', right: 'JA', title: '日本語' }],
+      items: [
+        { value: 'en', right: 'EN', title: 'English' },
+        { value: 'ko', right: 'KO', title: '한국어' },
+        { value: 'ja', right: 'JA', title: '日本語' },
+      ],
     },
   },
 }
 
 export const decorators = [
-  (Story, { globals }) => (
-    <ThemeProvider theme={theme}>
-      <I18nProvider
-        lang={globals.locale}
-        namespaces={translations[globals.locale]}
-      >
-        <Story />
-      </I18nProvider>
-    </ThemeProvider>
-  ),
+  (Story, { globals }) => {
+    useEffect(() => {
+      i18n.changeLanguage(globals.locale)
+    }, [globals.locale])
+
+    return (
+      <I18nextProvider i18n={i18n}>
+        <ThemeProvider theme={theme}>
+          <Story />
+        </ThemeProvider>
+      </I18nextProvider>
+    )
+  },
 ]
 
 export const parameters = {

components/SampleLocale/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SampleLocale /> displayed well 1`] = `
+<div>
+  <p>
+    English
+     | 
+    Korean
+     | 
+    Japanese
+  </p>
+</div>
+`;

components/SampleLocale/index.stories.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+
+import { SampleLocale } from '.'
+
+export default {
+  title: 'Components/SampleLocale',
+  component: SampleLocale,
+  parameters: { controls: { disabled: true } },
+} as ComponentMeta<typeof SampleLocale>
+
+const Template: ComponentStory<typeof SampleLocale> = () => <SampleLocale />
+
+export const Default = Template.bind({})

components/SampleLocale/index.test.tsx

@@ -0,0 +1,49 @@
+import { useEffect } from 'react'
+import { render, screen } from '@testing-library/react'
+import { I18nextProvider } from 'react-i18next'
+import i18n from 'utils/i18n'
+
+import { SampleLocale } from './index'
+
+interface Props {
+  readonly locale: 'en' | 'ko' | 'ja'
+}
+const TestComponent = ({ locale }: Props) => {
+  useEffect(() => {
+    i18n.changeLanguage(locale)
+  }, [locale])
+
+  return (
+    <I18nextProvider i18n={i18n}>
+      <SampleLocale />
+    </I18nextProvider>
+  )
+}
+
+describe('<SampleLocale />', () => {
+  it('displayed well', () => {
+    const { container, rerender } = render(<TestComponent locale="en" />)
+
+    expect(
+      screen.queryByText('English | Korean | Japanese'),
+    ).toBeInTheDocument()
+    expect(screen.queryByText('영어 | 한국어 | 일본어')).not.toBeInTheDocument()
+    expect(screen.queryByText('英語 | 韓国語 | 日本語')).not.toBeInTheDocument()
+
+    expect(container).toMatchSnapshot()
+
+    rerender(<TestComponent locale="ko" />)
+    expect(
+      screen.queryByText('English | Korean | Japanese'),
+    ).not.toBeInTheDocument()
+    expect(screen.queryByText('영어 | 한국어 | 일본어')).toBeInTheDocument()
+    expect(screen.queryByText('英語 | 韓国語 | 日本語')).not.toBeInTheDocument()
+
+    rerender(<TestComponent locale="ja" />)
+    expect(
+      screen.queryByText('English | Korean | Japanese'),
+    ).not.toBeInTheDocument()
+    expect(screen.queryByText('영어 | 한국어 | 일본어')).not.toBeInTheDocument()
+    expect(screen.queryByText('英語 | 韓国語 | 日本語')).toBeInTheDocument()
+  })
+})

components/SampleLocale/index.tsx

@@ -0,0 +1,11 @@
+import { useTranslation } from 'next-i18next'
+
+export const SampleLocale = () => {
+  const { t } = useTranslation('common')
+
+  return (
+    <p>
+      {t('English')} | {t('Korean')} | {t('Japanese')}
+    </p>
+  )
+}

next-i18next.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en', 'ko', 'ja'],
+    localeDetection: false,
+  },
+}

next.config.js

@@ -1,4 +1,6 @@
-/** @type {import('next').NextConfig} */
-const nextTranslate = require('next-translate')
+const { i18n } = require('./next-i18next.config')
 
-module.exports = nextTranslate()
+module.exports = {
+  reactStrictMode: true,
+  i18n,
+}