next-translator
v4.0.0
Published
Simple multilanguage for nextjs
Readme
next-translator
next-translator è una libreria di traduzione semplice ma potente per applicazioni Next.js, che offre un'integrazione perfetta per la gestione delle traduzioni sia lato server che lato client.
Caratteristiche
- Facile da configurare e utilizzare.
- Supporta il rendering sia lato server che lato client.
- Caricamento dinamico delle traduzioni in base alle preferenze dell'utente o ai valori predefiniti.
- Supporto per variabili nelle stringhe di traduzione.
- Compatibile con React 18/19 e Next.js 14/15.
Installazione
Per installare next-translator, esegui il seguente comando:
npm install next-translatorConfigurazione
Configurazione delle traduzioni
Innanzitutto, crea un file di configurazione per gestire le tue traduzioni. Puoi semplicemente copiare e incollare il seguente esempio. Assicurati di mantenere invariata la struttura della directory per un'integrazione perfetta.
// 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;Creazione della directory Locales
Crea una directory locales nel tuo progetto per archiviare i tuoi file di traduzione JSON (ad esempio, it.json, en.json).
Utilizzo
Utilizzo di variabili nelle traduzioni
Puoi includere variabili nei tuoi file di traduzione JSON in questo modo:
{
"hello": "Ciao %s"
}E utilizzarle nelle tue traduzioni:
t('hello', 'zxcvbinz');Questa funzionalità è disponibile sia lato server che lato client.
Rendering lato server
Per utilizzare next-translator in una pagina renderizzata lato server, importa e inizializza le traduzioni come segue:
// app/page.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>
</>
);
}Rendering lato client
Per il rendering lato client, configura il TranslationProvider nel tuo layout.tsx:
// app/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>
);
}Quindi, utilizza il traduttore nella tua app:
// app/client-page.tsx
'use client';
import { useTranslator } from 'next-translator';
export default function ClientPage() {
const { t } = useTranslator('client');
return (
<>
<h1>{t('name')}</h1>
</>
);
}Compilazione del pacchetto
Per compilare il pacchetto, esegui:
npm run build # Crea la cartella dist
npm pack # Crea un file tar.gz