https://github.com/lauriahlfors/kieli-nextjs-i18n
Next.js 14 project with internationalization (i18n) using the app router, without i18n libraries.
https://github.com/lauriahlfors/kieli-nextjs-i18n
client-side i18n internationalization nextjs server-side
Last synced: 2 months ago
JSON representation
Next.js 14 project with internationalization (i18n) using the app router, without i18n libraries.
- Host: GitHub
- URL: https://github.com/lauriahlfors/kieli-nextjs-i18n
- Owner: lauriahlfors
- Created: 2023-11-08T10:57:23.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-26T10:09:43.000Z (10 months ago)
- Last Synced: 2024-08-27T12:10:09.750Z (10 months ago)
- Topics: client-side, i18n, internationalization, nextjs, server-side
- Language: TypeScript
- Homepage:
- Size: 239 KB
- Stars: 23
- Watchers: 1
- Forks: 5
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Kieli - Internationalization in Next.js
This project was created as I needed a custom i18n(internationalization) system in my Next.js projects and as a way to challenge myself to build a system like [react-i18next](https://github.com/i18next/react-i18next).
## Features
- Translation system based on a .json files.
- Dynamic auto-completion generation for the translation keys improving DX.
- Automatic user locale detection.
- Server side rendering.
## Adding translations to the system.
> Replace `` with your translations ISO639 set 1 locale name (en, fr, se ...)
> [List of ISO 639 language codes - Wikipedia](https://en.wikipedia.org/wiki/List_of_ISO_639_language_codes)
1. Add new translation file as ``.json to `@/translations/` directory.Remember to match the translation key structure to other translation files.
2. Add `` to translations in `@/lib/i18n/loadTranslation.ts`.
```tsx
const translations = {
en: () => import('@/translations/en.json').then((module) => module.default),
: () => import('@/translations/.json').then((module) => module.default),
...
};
```
3. Add the new `` to `i18nConfig.locales` array in `@/i18n.ts`.
```tsx
export const i18nConfig = {
defaultLocale: 'en',
locales: ['en', '', ...],
}
```
The new translation files content should be available to be used now in your Next.js project.
## Usage in SSR (Server Side Rendered) files.
When you render a component on the server side, you can simply call the `getTranslation(locale: Locale)` function and get the needed translation. It's beneficial to keep the translations on the server side as the translation files are stored on the server. This also shortens the load on client as save on the runtime.
In `@/app/[locale]page.tsx`
```tsx
...
type Props = {
params: {
locale: Locale;
};
};
export default async function ServerSidePage({ params: { locale } }: Props) {
const translation = await getTranslation(locale);
return (
{translation('views.home.title')}
{translation('views.home.body')}
);
}
```
## Usage in CSR (Client Side Rendered) files.
It is recommended to keep translations on the server side but, translation values can be passed to client components from server components. For more information, look at how the following files pass the translation value to the `locale-selector.tsx` client component from server components.
1. Server: `@/app/[locale]/page.tsx`
2. Server: `@/components/nav.tsx`
3. Client: `@/components/locale-selector.tsx`