Type-safe internationalization (i18n) for Next.js

Hey,

i'm currently creating a simple example to test the new blitz toolkit.

At the same time I want to test your i18n package.

Everything seems to work, but since I added the language switcher and refreshed the page after changing the language from "en" (=default) to "de" I get the following error:

error - SerializableError: Error serializing `.locale["pages.past.date"]` returned from `getServerSideProps` in "/".
Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value.
    at isSerializable (<local_path>/node_modules/next/dist/lib/is-serializable-props.js:36:19)
    at <local_path>/node_modules/next/dist/lib/is-serializable-props.js:43:66
    at Array.every (<anonymous>)
    at isSerializable (<local_path>/node_modules/next/dist/lib/is-serializable-props.js:40:39)
    at <local_path>/node_modules/next/dist/lib/is-serializable-props.js:43:66
    at Array.every (<anonymous>)
    at isSerializable (<local_path>/node_modules/next/dist/lib/is-serializable-props.js:40:39)
    at Object.isSerializableProps (<local_path>/node_modules/next/dist/lib/is-serializable-props.js:63:12)
    at Object.renderToHTML (<local_path>/node_modules/next/dist/server/render.js:552:67)
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  page: '/'
}

To be honest, I'm not sure if this is a problem with your package.

You can find the complete source here: https://github.com/noxify/blitz-hackernews

Steps to reproduce:

1. Install the app
2. Start the dev server via npm run dev
3. Open the browser and go to page http://localhost:3000
   • You will see the index page and the language is english
4. Switch the language to de (=german) ( via the icon in the header navigation )
   • You will see that the language has been changed to german
5. Reload the page
   • You will see the error

Please let me know in case you need additional information or something else.

Hello, thank you for this awesome library I'm using this package with Jest and it doesn't seems to work properly

this is my customRender.tsx

import en from 'locales/en';
import { ThemeProvider } from '@mui/material';
import { theme } from 'styles/theme';
import { render, cleanup } from '@testing-library/react';
import { createI18n } from 'next-international';

// I tried different methods to mock next/router
// 1. first attempt
const useRouter = jest.spyOn(require('next/router'), 'useRouter');
useRouter.mockImplementationOnce(() => ({
    locale: 'en',
    defaultLocale: 'en',
    locales: ['en', 'fr'],
}));

// 2. second attempt
jest.mock('next/router', () => ({
  useRouter: () => ({
    locale: 'en',
    defaultLocale: 'en',
    locales: ['en', 'fr'],
  }),
}));

afterEach(() => {
    cleanup()
})

const { I18nProvider } = createI18n<typeof en>({
    en: () => import('locales/en'),
    fr: () => import('locales/fr'),
})

const Providers = ({ children }: { children: any }) => {
    return <I18nProvider locale={en}><ThemeProvider theme={theme}>{children}</ThemeProvider></I18nProvider>
};
const customRender = (ui: any, options = {}) => render(ui, { wrapper: Providers, ...options });
export * from '@testing-library/react';
export { default as userEvent } from '@testing-library/user-event'
export { customRender as render };

I have a component where I use i18n and the test fail all the time

import { cleanup, fireEvent } from '@testing-library/react';
import { render, screen } from 'testing/customRender'

import React from 'react';
import InputField from '.';

afterEach(cleanup);

describe('<InputField />', () => {
    it('handleChange function called', () => {
        const spy = jest.fn();
        render(<InputField field={{ name: 'text', onChange: spy }} label="nom" />);
        let input = screen.getByLabelText('nom') as HTMLInputElement;
        expect(input.value).toBe('');

        fireEvent.change(input, { target: { value: '23' } });
        fireEvent.blur(input, { target: { value: '23' } });
        expect(spy).toHaveBeenCalledTimes(1);
    });
});

// locales.ts
import { createI18n } from 'next-international';
import type Locale from './en';
export const { useI18n, I18nProvider, useChangeLocale, defineLocale, getLocaleProps } = createI18n<typeof Locale>({
  en: () => import('./en'),
  fr: () => import('./fr'),
});

Inside my component I import the hook use18n() from locales const { t } = useI18n();

When I run my tests I get the following error

TypeError: Cannot destructure property 'locale' of '(0 , B.useRouter)(...)' as it is null.

Can you please provide an example with jest? a wrapper and how to use it inside a component that uses i18n

Thank you so much

We are through the process of adding internationalization to our application and found the existing functions (t and scopedT) to be limiting as they only allowed parameters to be strings.

This pull request implements rt and scopedRT which allow parameters to be react components like <strong>John</strong>

This was just quickly put together, so I'm open to changing anything!

I didn't know where to put the type ReactParamsObject (as international-types doesn't depend on React, and shouldn't - as it is more generic that way) so I put it in create-use-i18n - help appreciated is on where it should actually be!

Currently the recommended practice is to create a locale as const, export it, import it as a type & use it for the createI18n generic.

In future to change all other types you need to change that objects structure to change the type which doesn't seem right.

My proposal to make this better is to add the Locale & LocaleValue types in types.ts to the root export such that you can create a general purpose interface or type to manage your locales.

Example

// locales/index.ts
import { createI18n } from 'next-international';

import type { Locale as BaseLocale } from 'next-international';

interface MyCustomLocale extends BaseLocale {
  hello: string;
}

export const {
  defineLocale,
  useI18n,
  // ...
} = createI18n<MyCustomLocale>({
  en: () => import('./en'),
});

// locales/en.ts
import { defineLocale } from '.';

export default defineLocale({
  hello: 'Hello',
})

Hello! Been using this library for a while but I'm having a bit of a catch up when trying to make unit tests with it.

On regular i18n I either mock the tests or pass a default locale to use with it. But in this case due to passing props using Next.js pageProps I'm running into some issues.

Here are the few pieces of code I'm currently using to implement my tests.

import { createI18n } from "next-international";
import Locale from "../../locales/en";

const TestWrapper = ({ children }: { children: JSX.Element }) => {
  const { I18nProvider } = createI18n<typeof Locale>({
    en: () => import("../../locales/en"),
  });
 
  return (
      <I18nProvider locale={Locale}>
         {children}
      </I18nProvider>
  );
};
 
export default TestWrapper;

And then I wrap a component with it.

import { render, screen, waitFor } from "@testing-library/react";
import TestWraper from "../utils/testWraper";
import HomePage from "../../pages/[building]/homePage";

describe("Homepage tests", () => {
  beforeEach(() => {
    render(
      <TestWraper>
        <HomePage />
      </TestWraper>,
    );
  });
  it("Render logout button", () => {
    expect(
      screen.getByRole("heading", {
        name: /logout/i,
      }),
    ).toBeInTheDocument();
  });
});

And I get this error.

 console.error
      Error: Uncaught [TypeError: Cannot destructure property 'locale' of '(0 , B.useRouter)(...)' as it is null.]
          at reportException.

It might be handy if there's some sort of example on how to write a basic test with it.

I can't use getStaticProps because I rely on getServerSideProps on some pages. How can I make my translations available? Is there an equivalent to getLocaleStaticProps() for SSR instead of SSG?

I would like to know if there's an easy way to pass {t} as a props inside another components hooks don't work inside loops so I need a way to find the type of t in order to pass it as prop in my other component here an example:

const { scopedT } = useI18n();
const t = scopedT('table')
buildTableHeader(t);

export const buildHeadIncidents = (t: //What type should I put here): HeadCellItem[] => {
    // const { t } = useI18n(); // I can't call the hook here
    return [
        {
            name: 'title1',
            label: t('mykey'),
        },
        {
            name: 'title2',
            label: t('mykey'),
        },
        {
            name: 'title3',
            label: t('mykey'),
        }
    ];
};

Here is definition of t and scopedT used by next-international

    useI18n: () => {
        t: {
            <Key extends Extract<keyof Locale, string>, Value extends international_types.LocaleValue = Locale[Key]>(key: Key, ...params: international_types.Params<Value>["length"] extends 0 ? [] : [international_types.ParamsObject<Value>]): string;
            <Key_1 extends Extract<keyof Locale, string>, Value_1 extends international_types.LocaleValue = Locale[Key_1]>(key: Key_1, ...params: international_types.Params<Value_1>["length"] extends 0 ? [] : [ReactParamsObject<Value_1>]): React$1.ReactNode;
        };
        scopedT: <Scope extends international_types.Scopes<Locale>>(scope: Scope) => {
            <Key_2 extends international_types.LocaleKeys<Locale, Scope, Extract<keyof Locale, string>>, Value_2 extends international_types.LocaleValue = international_types.ScopedValue<Locale, Scope, Key_2>>(key: Key_2, ...params: international_types.Params<Value_2>["length"] extends 0 ? [] : [international_types.ParamsObject<Value_2>]): string;
            <Key_3 extends international_types.LocaleKeys<Locale, Scope, Extract<keyof Locale, string>>, Value_3 extends international_types.LocaleValue = international_types.ScopedValue<Locale, Scope, Key_3>>(key: Key_3, ...params: international_types.Params<Value_3>["length"] extends 0 ? [] : [ReactParamsObject<Value_3>]): React$1.ReactNode;
        };
    };

In an effort to make my locale structure cleaner I have begun splitting it into multiple files / objects that I can import & object spread in the locale index default export.

However there currently seems to be a bug whereby object spreading breaks the variable type inference.

I've created a CodeSandbox to demonstrate the issue

I feel like this may be more of a lower level TypeScript template inference issue but thought I would report it anyway 🙂

Right now it`s not possible to use a translation text that uses the same variable more than once, because only the first instance will be interpolated

Closes #23

This PR renames getLocaleStaticProps to getLocaleProps and makes it possible to use with both getStaticProps or getServerSideProps.

To not introduce a breaking change, the existing getLocaleStaticProps still exists and forward to getLocaleProps

Without this I wasn't able to install the library in an npm project. pnpm seems to be fine with the syntax either way.

The error I had before this fix

npm ERR! Found: [email protected]
npm ERR! node_modules/next
npm ERR!   next@"12.2.4" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer next@"12.x | 11.x" from [email protected]
npm ERR! node_modules/next-international
npm ERR!   next-international@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Since Next.JS's new /app directory moves away from built-in i18n support and instead advises to use generateStaticParams and middleware in the app directory, are you planning on adding such a middleware solution to this package? Currently the usage of useRouter crashes the I18nProvder in the new version of Next.JS

When running next export I get the following error

Error: i18n support is not compatible with next export. See here for more info on deploying: https://nextjs.org/docs/deployment

I found this tutorial: https://dev.to/adrai/static-html-export-with-i18n-compatibility-in-nextjs-8cd the solution was provided from next-i18next, wan we use the same approach for next-international?

Since I couldn't fine anything in the README nor inside the closed issues , do you recommend following this solution or is there an alternative way for next-international?

Problem

At my work we need to have the language files in JSON because they are inserted in some tool by the translation team. Manually converting this is quite a pain and repetitive work.

Idea

I think it would be cool to have a dedicated CLI tool that can convert JSON to TS and vice versa. Maybe it could also add wrap them in defineLocale to ensure typesafety along the files

I often end up having this exact code in my component

function MyComponent() {
  const { scopedT } = usei18n();
  const t = scopedT("myScope");
}

I personally think that this is unnecessary overhead. I would prefer to have an export like useScopedT that takes in a scope and returns a t function with a defined scope

Hi! I really like this project, definitely my favorite nextjs i18n library that I've seen. Keep it up!

One thing I didn't like about the locale definition was that scopes are defined with dot-separated strings, so I wrote a code snippet that allows me to define a locale in terms of a nested object like so:

export interface OldLocale {
  'pages.landing.title': string;
  'pages.landing.description': string;
}

export interface Locale {
    pages: {
        landing: {
            title: string;
            description: string;
        };
    };
}

The code snippet is:

import { createI18n } from "next-international";
import type { Locale } from "@locales";

const i18n = createI18n<Record<LocaleKeys<Locale>, string>>({
    en: () => import("@locales/en"),
    nl: () => import("@locales/nl"),
});

export const { useI18n, useChangeLocale, I18nProvider, getLocaleStaticProps } = i18n;

type LocaleDefinition = Record<string, string | object>;
type LocaleKeys<T> = keyof {
    [P in keyof T as T[P] extends string ? P : `${string & P}.${string & LocaleKeys<T[P]>}`]: true;
};
type DefinedLocale = Record<LocaleKeys<Locale>, string>;

export function defineLocale(locale: Locale): DefinedLocale {
    const flatten = (l: Locale, prefix = ""): LocaleDefinition =>
        Object.entries(l).reduce(
            (prev, [name, value]) => ({
                ...prev,
                ...(typeof value === "string"
                    ? { [prefix + name]: value }
                    : flatten(value as Locale, `${prefix}${name}.`)),
            }),
            {},
        );
    return flatten(locale) as DefinedLocale;
}

Then I can define a locale like this

import { defineLocale } from "@hooks/useI18n";

export default defineLocale({
    landing: {
        hero: {
            title: "Welcome to my website",
            description: "This is a really cool website!",
        },
    },
});

Type-checking works within a locale definition, and the type system after createI18n seems to be unbothered.

Just thought I'd share my solution, maybe you like it enough to implement it in the library. If not, feel free to close this issue 😃

I want to use it in a react native project but just because it's using GetStaticProps and Router from next hence it can't be used anywhere except the next js project.

I see a lot of potential in this library if it was not strongly bounded to one library. This can easily work in any react based project.

U can provide optional "no configuration" and "automatic binding" for the next js as an extension for this library.

Thoughts?