nextjs-translations
v0.1.0
Published
An internationalization library built for the Next.js 13 `app` directory
Downloads
6
Readme
NextJS Translations
An internationalization library built for the Next.js 13 app
directory, which aims to be simple to setup and use
Features
- Simple setup
- Automatic language detection (for server-side components)
- Client-side components that don't rely on Node.js libraries
- Locales can be imported from any source (such as JSON files, databases, external APIs, etc.)
Installation
npm install nextjs-translations
(For client-side components)
npm install nextjs-translations-client
Usage
//src/translations.ts
import { Translations } from 'nextjs-translations'
export const translations = new Translations({
locales: [
localeFromJSON('en', {
'hello': 'Hello!',
'hello-name': 'Hello, %%name%%!',
}),
localeFromJSON('zh', {
'hello': '你好!',
'hello-name': '你好,%%name%%!',
})
],
defaultLocale: 'en', // optional
})
Now, in your components/pages:
//src/app/page.tsx
import { getT } from 'nextjs-translations'
import { translations } from '../translations'
export default function Page() {
const t = getT(translations)
return (
<div>
<h1>{t('hello')}</h1>
<h2>{t('hello-name', { name: 'John' })}</h2>
</div>
)
}
Client-side Components
Client-side pages and components (that have "use client"
), have to use the client-side version of the t()
function. Since code used here is frontend-only code, it has to be in a separate package that doesn't depend on native Node.js packages:
npm install nextjs-translations-client
First, the corresponding backend route has to be created:
//src/app/api/[...translations]/route.ts
import { translations } from "@/translations";
import { TranslationRoute } from "nextjs-translations";
export const GET = TranslationRoute(translations)
Then, the client has to be wrapped in a TranslationsProvider
:
"use client"
import { TranslationProvider } from "nextjs-translations-client"
export default function ClientLayout({
children
}: {
children: React.ReactNode
}) {
return (
<TranslationProvider locale="test">
{children}
</TranslationProvider>
)
}
Finally, the t()
function can be used:
"use client"
import { t } from "nextjs-translations-client"
export default function Page() {
return (
<main className="overflow-auto">
<ul>
<li>Language: en_us</li>
<li>Example: {t('hello')}</li>
<li>Example (with variable): {t('hello-name', { name: 'World' })}</li>
</ul>
</main>
)
}