4.0.0 • Published 4 months ago

next-translator v4.0.0

Weekly downloads
-
License
ISC
Repository
github
Last release
4 months ago

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-translator

Configurazione

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
4.0.0

4 months ago

3.0.4

1 year ago

3.0.3

1 year ago

3.0.2

1 year ago

3.0.1

1 year ago

3.0.0

1 year ago

2.0.5

2 years ago

2.0.7

2 years ago

2.0.4

2 years ago

2.0.3

2 years ago

2.0.2

2 years ago

2.0.1

2 years ago