next-translator v3.0.4
next-translator
next-translator is a simple yet powerful translation library for Next.js applications, offering seamless integration for both server-side and client-side translation management.
Features
- Easy to configure and use.
- Supports both server-side and client-side rendering.
- Dynamic translation loading based on user preferences or defaults.
- Support for variables in translation strings.
Installation
To install next-translator, run the following command:
npm install next-translatorSetup
Configuring Translations
First, create a configuration file for managing your translations. You can simply copy and paste the following example. Make sure to keep the directory structure unchanged for seamless integration.
// utils/initializeTranslations.ts
import { cookies } from 'next/headers';
import { ServerConfig, configTR } from 'next-translator';
const initializeTranslations = async () => {
const config: configTR = {
defaultLang: 'it',
langs: ['it']
};
const nextCookies = cookies();
let language = nextCookies.get('lang')?.value || config.defaultLang;
let translations;
try {
translations = (await import(`@/locales/${language}.json`)).default;
} catch (e) {
throw new Error('Language not found');
}
const data: ServerConfig = {
translations,
config
};
return { data };
};
export default initializeTranslations;Creating the Locales Directory
Create a locales directory in your project to store your JSON translation files (e.g., it.json, en.json).
Usage
Using Variables in Translations
You can include variables in your JSON translation files like this:
{
"hello": "Hello %s"
}And use them in your translations:
t('hello', 'zxcvbinz');This feature is available both on the server and client side.
Server-Side Rendering
To use next-translator in a server-side rendered page, import and initialize translations as follows:
// pages/home.tsx
import initializeTranslations from '@/utils/translations';
import { CreateServerProvider } from 'next-translator';
export default async function Home() {
const { data } = await initializeTranslations();
const { t } = CreateServerProvider(data).useServerTranslator('server');
return (
<>
<h1>{t('name')}</h1>
</>
);
}Client-Side Rendering
For client-side rendering, set up the TranslationProvider in your layout.tsx:
// layout.tsx
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';
import initializeTranslations from '@/utils/translations';
import { TranslationProvider } from 'next-translator';
const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app'
};
export default async function RootLayout({ children }: { children: React.ReactNode }) {
const { data } = await initializeTranslations();
return (
<html lang="it">
<body className={inter.className}>
<TranslationProvider data={data}>{children}</TranslationProvider>
</body>
</html>
);
}Then, use the translator in your app:
// pages/home.tsx
'use client';
import { useTranslator } from 'next-translator';
export default async function Home() {
const { t } = useTranslator('client');
return (
<>
<h1>{t('name')}</h1>
</>
);
}Building the Package
To build the package, run:
npm run build # Creates dist folder
npm pack # Creates a tar.gz file