{title}
26 | {lang !== 'es' && ( 27 | 28 | Español 29 | 30 | )} 31 | {lang !== 'ca' && ( 32 | 33 | Català 34 | 35 | )} 36 | {lang !== 'en' && ( 37 | <> 38 | 39 | English 40 | 41 | 42 | 43 | )} 44 |{t('more-examples:plural-example', { count })}
17 | } 18 | -------------------------------------------------------------------------------- /examples/basic/i18n.json: -------------------------------------------------------------------------------- 1 | { 2 | "locales": ["en", "ca", "es"], 3 | "defaultLocale": "en", 4 | "pages": { 5 | "*": ["common"], 6 | "/404": ["error"], 7 | "/": ["home"], 8 | "/dashboard": ["home"], 9 | "rgx:^/more-examples": ["more-examples"] 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/basic/locales/ca/common.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Llibreria next-translate" 3 | } 4 | -------------------------------------------------------------------------------- /examples/basic/locales/ca/dynamic.json: -------------------------------------------------------------------------------- 1 | { 2 | "example-of-dynamic-translation": "Sóc contingut carregat de forma dinàmica" 3 | } 4 | -------------------------------------------------------------------------------- /examples/basic/locales/ca/error.json: -------------------------------------------------------------------------------- 1 | { 2 | "404": "Pàgina no trobada" 3 | } 4 | -------------------------------------------------------------------------------- /examples/basic/locales/ca/home.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Aquest text està escrit en Català desde el diccionari de la pàgina d'inici", 3 | "more-examples": "Més exemples" 4 | } 5 | -------------------------------------------------------------------------------- /examples/basic/locales/ca/more-examples.json: -------------------------------------------------------------------------------- 1 | { 2 | "example-with-variable": "Aquest és un exemple amb variable {{count}}", 3 | "plural-example": "És en singular perquè el valor és {{count}}", 4 | "plural-example_0": "És cero perquè el valor és {{count}}", 5 | "plural-example_2": "És dos perquè el valor és {{count}}", 6 | "plural-example_other": "És en plural perquè el valor és {{count}}", 7 | "example-with-html": "<0>Aquest és un exempre <1>utilitzant HTML dintre de la traducció", 8 | "no-functional-example": "Traducció feta des d'un component no funcional", 9 | "dynamic-namespaces-link": "Veure un exemple de càrrega dinàmica", 10 | "dynamic-route": "Ruta dinàmica", 11 | "go-to-home": "Anar a la pàgina principal", 12 | "nested-example": { 13 | "very-nested": { 14 | "nested": "Exemple anidat!" 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/basic/locales/en/common.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "next-translate library" 3 | } 4 | -------------------------------------------------------------------------------- /examples/basic/locales/en/dynamic.json: -------------------------------------------------------------------------------- 1 | { 2 | "example-of-dynamic-translation": "I'm a dynamic loaded content" 3 | } 4 | -------------------------------------------------------------------------------- /examples/basic/locales/en/error.json: -------------------------------------------------------------------------------- 1 | { 2 | "404": "Page not found" 3 | } 4 | -------------------------------------------------------------------------------- /examples/basic/locales/en/home.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "This text is wrote in English from the homepage dictionary", 3 | "more-examples": "More examples" 4 | } 5 | -------------------------------------------------------------------------------- /examples/basic/locales/en/more-examples.json: -------------------------------------------------------------------------------- 1 | { 2 | "example-with-variable": "This is an example with variable {{count}}", 3 | "plural-example": "This is singular because the value is {{count}}", 4 | "plural-example_0": "Is zero because the value is {{count}}", 5 | "plural-example_2": "Is two because the value is {{count}}", 6 | "plural-example_other": "Is in plural because the value is {{count}}", 7 | "example-with-html": "<0>This is an example <1>using HTML inside the translation", 8 | "no-functional-example": "Translation done from a no-functional component", 9 | "dynamic-namespaces-link": "See an example of dynamic namespace", 10 | "dynamic-route": "Dynamic route", 11 | "go-to-home": "Go to the homepage", 12 | "nested-example": { 13 | "very-nested": { 14 | "nested": "Nested example!" 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/basic/locales/es/common.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Librería next-translate" 3 | } 4 | -------------------------------------------------------------------------------- /examples/basic/locales/es/dynamic.json: -------------------------------------------------------------------------------- 1 | { 2 | "example-of-dynamic-translation": "Soy contenido cargado de forma dinámica" 3 | } 4 | -------------------------------------------------------------------------------- /examples/basic/locales/es/error.json: -------------------------------------------------------------------------------- 1 | { 2 | "404": "Página no encontrada" 3 | } 4 | -------------------------------------------------------------------------------- /examples/basic/locales/es/home.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Este texto está escrito en Español desde el diccionario de la página de inicio", 3 | "more-examples": "Más ejemplos" 4 | } 5 | -------------------------------------------------------------------------------- /examples/basic/locales/es/more-examples.json: -------------------------------------------------------------------------------- 1 | { 2 | "example-with-variable": "Este es un ejemplo con variable {{count}}", 3 | "plural-example": "Es en singular porque el valor es {{count}}", 4 | "plural-example_0": "Es cero porque el valor es {{count}}", 5 | "plural-example_2": "Es dos porque el valor es {{count}}", 6 | "plural-example_other": "Es en plural porque el valor es {{count}}", 7 | "example-with-html": "<0>Este es un ejemplo <1>usando HTML dentro de la traducción", 8 | "no-functional-example": "Traducción hecha desde un componente no funcional", 9 | "dynamic-namespaces-link": "Ver un ejemplo de carga dinámica", 10 | "dynamic-route": "Ruta dinamica", 11 | "go-to-home": "Ir a la página principal", 12 | "nested-example": { 13 | "very-nested": { 14 | "nested": "¡Ejemplo anidado!" 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/basic/next-env.d.ts: -------------------------------------------------------------------------------- 1 | ///{description}
16 | {linkName} 17 | 18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /examples/basic/pages/more-examples/catchall/[...all].js: -------------------------------------------------------------------------------- 1 | import Link from 'next/link' 2 | import useTranslation from 'next-translate/useTranslation' 3 | import { useRouter } from 'next/router' 4 | 5 | export default function All() { 6 | const { query } = useRouter() 7 | const { t, lang } = useTranslation() 8 | 9 | return ( 10 | <> 11 | {JSON.stringify({ query, lang })} 12 |13 | {t`more-examples:go-to-home`} 14 | 15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /examples/basic/pages/more-examples/dynamic-namespace.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Trans from 'next-translate/Trans' 3 | import DynamicNamespaces from 'next-translate/DynamicNamespaces' 4 | 5 | export default function ExampleWithDynamicNamespace() { 6 | return ( 7 |
10 |
12 |
13 | {/* USING DYNAMIC NAMESPACE */}
14 | {title}
15 |{t`more-examples:dynamic-route`}
16 |17 | {query.slug} - {lang} 18 |
19 | {t`more-examples:go-to-home`} 20 | 21 | ) 22 | } 23 | 24 | export async function getServerSideProps({ locale }) { 25 | const t = await getT(locale, 'common') 26 | return { props: { title: t('title') } } 27 | } 28 | -------------------------------------------------------------------------------- /examples/basic/pages/more-examples/index.js: -------------------------------------------------------------------------------- 1 | import useTranslation from 'next-translate/useTranslation' 2 | import Trans from 'next-translate/Trans' 3 | import Link from 'next/link' 4 | 5 | import PluralExample from '../../components/plural-example' 6 | import Header from '../../components/header' 7 | import NoFunctionalComponent from '../../components/no-functional-component' 8 | 9 | const Component = (props) => 10 | 11 | export default function MoreExamples() { 12 | const { t } = useTranslation() 13 | const exampleWithVariable = t('more-examples:example-with-variable', { 14 | count: 42, 15 | }) 16 | 17 | return ( 18 | <> 19 |{exampleWithVariable}
21 |28 | {t`more-examples:nested-example.very-nested.nested`} 29 |
30 | 31 | {t('more-examples:dynamic-namespaces-link')} 32 | 33 |
34 | 40 | {t('more-examples:dynamic-route')} 41 | 42 |
43 | Catchall 44 | 45 | ) 46 | } 47 | -------------------------------------------------------------------------------- /examples/basic/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aralroca/next-translate/c47f226ffd0c0f2600595ae7620f8708d6f70a05/examples/basic/public/favicon.ico -------------------------------------------------------------------------------- /examples/basic/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["dom", "dom.iterable", "esnext"], 4 | "allowJs": true, 5 | "skipLibCheck": true, 6 | "strict": false, 7 | "forceConsistentCasingInFileNames": true, 8 | "noEmit": true, 9 | "incremental": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve" 16 | }, 17 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "pages/**/*.js"], 18 | "exclude": ["node_modules"] 19 | } 20 | -------------------------------------------------------------------------------- /examples/complex/README.md: -------------------------------------------------------------------------------- 1 | # Complex example 2 | 3 | Similar than the basic example but with some extras: 4 | 5 | - TypeScript 6 | - Webpack 5 7 | - MDX 8 | - With _app.js on top 9 | - Custom interpolation with ${thisFormat} instead of the {{defaultFormat}} 10 | - pages located on src/pages folder 11 | - Loading locales from src/translations with a different structure 12 | 13 |  14 | -------------------------------------------------------------------------------- /examples/complex/i18n.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | locales: ['__default', 'en', 'ca', 'es'], 3 | defaultLocale: '__default', 4 | localesToIgnore: ['__default'], 5 | pages: { 6 | '*': ['common'], 7 | '/404': ['error'], 8 | '/': ['home'], 9 | '/dashboard': ['home'], 10 | 'rgx:^/more-examples': ['more-examples'], 11 | }, 12 | interpolation: { 13 | prefix: '${', 14 | suffix: '}', 15 | }, 16 | loadLocaleFrom: async (locale, namespace) => 17 | import(`./src/translations/${namespace}_${locale}`).then((r) => r.default), 18 | } 19 | -------------------------------------------------------------------------------- /examples/complex/next-env.d.ts: -------------------------------------------------------------------------------- 1 | ///
{title}
26 | {lang !== 'es' && ( 27 | 28 | Español 29 | 30 | )} 31 | {lang !== 'ca' && ( 32 | 33 | Català 34 | 35 | )} 36 | {lang !== 'en' && ( 37 | <> 38 | 39 | English 40 | 41 | 42 | 43 | )} 44 |{t('more-examples:plural-example', { count })}
17 | } 18 | -------------------------------------------------------------------------------- /examples/complex/src/mdx.d.ts: -------------------------------------------------------------------------------- 1 | // types/mdx.d.ts 2 | declare module '*.mdx' { 3 | let MDXComponent: (props) => JSX.Element; 4 | export default MDXComponent; 5 | } 6 | -------------------------------------------------------------------------------- /examples/complex/src/pages/404.tsx: -------------------------------------------------------------------------------- 1 | import useTranslation from 'next-translate/useTranslation' 2 | 3 | export default function Error404() { 4 | const { t, lang } = useTranslation() 5 | 6 | console.log({ lang }) 7 | 8 | return t`error:404` 9 | } 10 | -------------------------------------------------------------------------------- /examples/complex/src/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import NextApp from 'next/app' 3 | 4 | import '../styles.css' 5 | 6 | class MyApp extends NextApp { 7 | render() { 8 | const { Component, pageProps } = this.props 9 | returnMy AMP Page!
6 | } 7 | 8 | export default Amp 9 | -------------------------------------------------------------------------------- /examples/complex/src/pages/api/example.tsx: -------------------------------------------------------------------------------- 1 | import getT from 'next-translate/getT' 2 | 3 | // @ts-ignore 4 | export default async function handler(req, res) { 5 | const t = await getT(req.query.__nextLocale, 'common') 6 | const title = t('title') 7 | 8 | res.statusCode = 200 9 | res.setHeader('Content-Type', 'application/json') 10 | res.end(JSON.stringify({ title })) 11 | } 12 | -------------------------------------------------------------------------------- /examples/complex/src/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Link from 'next/link' 3 | import useTranslation from 'next-translate/useTranslation' 4 | import Header from '../components/header' 5 | 6 | export default function Home() { 7 | const { t } = useTranslation('home') 8 | const description = t('description') 9 | const linkName = t('more-examples') 10 | 11 | return ( 12 | <> 13 |{description}
15 | {linkName} 16 | 17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /examples/complex/src/pages/more-examples/catchall/[...all].tsx: -------------------------------------------------------------------------------- 1 | import Link from 'next/link' 2 | import useTranslation from 'next-translate/useTranslation' 3 | import { useRouter } from 'next/router' 4 | 5 | export default function All() { 6 | const { query } = useRouter() 7 | const { t, lang } = useTranslation() 8 | 9 | return ( 10 | <> 11 | {JSON.stringify({ query, lang })} 12 |13 | {t`more-examples:go-to-home`} 14 | 15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /examples/complex/src/pages/more-examples/dynamic-namespace.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Trans from 'next-translate/Trans' 3 | import DynamicNamespaces from 'next-translate/DynamicNamespaces' 4 | 5 | export default function ExampleWithDynamicNamespace() { 6 | return ( 7 |
10 |
12 |
13 | {/* USING DYNAMIC NAMESPACE */}
14 | {title}
16 |{t`more-examples:dynamic-route`}
17 |18 | {query.slug} - {lang} 19 |
20 | {t`more-examples:go-to-home`} 21 | 22 | ) 23 | } 24 | 25 | export function getStaticPaths({ locales }: any) { 26 | return { 27 | paths: locales 28 | .filter((locale: string) => locale !== 'default') 29 | .map((locale: string) => ({ 30 | locale, 31 | params: { slug: 'example' }, 32 | })), 33 | fallback: true, 34 | } 35 | } 36 | 37 | export const getStaticProps: GetStaticProps = async ({ locale }) => { 38 | const t = await getT(locale, 'common') 39 | return { props: { title: t('title') } } 40 | } 41 | -------------------------------------------------------------------------------- /examples/complex/src/pages/more-examples/index.tsx: -------------------------------------------------------------------------------- 1 | import useTranslation from 'next-translate/useTranslation' 2 | import Trans from 'next-translate/Trans' 3 | import Link from 'next/link' 4 | 5 | import Header from '../../components/header' 6 | import MdxExample from '../../components/mdx-example.mdx' 7 | import NoFunctionalComponent from '../../components/no-functional-component' 8 | import PluralExample from '../../components/plural-example' 9 | 10 | const Component = (props: any) => 11 | 12 | export default function MoreExamples() { 13 | const { t } = useTranslation('more-examples') 14 | const exampleWithVariable = t('example-with-variable', { 15 | exampleOfVariable: 42, 16 | }) 17 | 18 | return ( 19 | <> 20 |{exampleWithVariable}
22 |29 | {t`nested-example.very-nested.nested`} 30 |
31 |
33 | 34 | {t('dynamic-namespaces-link')} 35 | 36 |
37 | 43 | {t('dynamic-route')} 44 | 45 |
46 | Catchall 47 | 48 | ) 49 | } 50 | -------------------------------------------------------------------------------- /examples/complex/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | font-size: 18px; 6 | font-weight: 400; 7 | line-height: 1.8; 8 | background-color: #fafafa; 9 | color: #212121; 10 | font-family: sans-serif; 11 | } 12 | h1 { 13 | font-weight: 700; 14 | } 15 | p { 16 | margin-bottom: 10px; 17 | } 18 | -------------------------------------------------------------------------------- /examples/complex/src/translations/common_ca.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Llibreria next-translate" 3 | } 4 | -------------------------------------------------------------------------------- /examples/complex/src/translations/common_en.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "next-translate library" 3 | } 4 | -------------------------------------------------------------------------------- /examples/complex/src/translations/common_es.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Librería next-translate" 3 | } 4 | -------------------------------------------------------------------------------- /examples/complex/src/translations/dynamic_ca.json: -------------------------------------------------------------------------------- 1 | { 2 | "example-of-dynamic-translation": "Sóc contingut carregat de forma dinàmica" 3 | } 4 | -------------------------------------------------------------------------------- /examples/complex/src/translations/dynamic_en.json: -------------------------------------------------------------------------------- 1 | { 2 | "example-of-dynamic-translation": "I'm a dynamic loaded content" 3 | } 4 | -------------------------------------------------------------------------------- /examples/complex/src/translations/dynamic_es.json: -------------------------------------------------------------------------------- 1 | { 2 | "example-of-dynamic-translation": "Soy contenido cargado de forma dinámica" 3 | } 4 | -------------------------------------------------------------------------------- /examples/complex/src/translations/error_ca.json: -------------------------------------------------------------------------------- 1 | { 2 | "404": "Pàgina no trobada" 3 | } 4 | -------------------------------------------------------------------------------- /examples/complex/src/translations/error_en.json: -------------------------------------------------------------------------------- 1 | { 2 | "404": "Page not found" 3 | } 4 | -------------------------------------------------------------------------------- /examples/complex/src/translations/error_es.json: -------------------------------------------------------------------------------- 1 | { 2 | "404": "Página no encontrada" 3 | } 4 | -------------------------------------------------------------------------------- /examples/complex/src/translations/home_ca.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Aquest text està escrit en Català desde el diccionari de la pàgina d'inici", 3 | "more-examples": "Més exemples" 4 | } 5 | -------------------------------------------------------------------------------- /examples/complex/src/translations/home_en.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "This text is wrote in English from the homepage dictionary", 3 | "more-examples": "More examples" 4 | } 5 | -------------------------------------------------------------------------------- /examples/complex/src/translations/home_es.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Este texto está escrito en Español desde el diccionario de la página de inicio", 3 | "more-examples": "Más ejemplos" 4 | } 5 | -------------------------------------------------------------------------------- /examples/complex/src/translations/more-examples_ca.json: -------------------------------------------------------------------------------- 1 | { 2 | "example-with-variable": "Aquest és un exemple amb variable ${exampleOfVariable}", 3 | "plural-example": { 4 | "one": "És en singular perquè el valor és ${count}", 5 | "0": "És cero perquè el valor és ${count}", 6 | "2": "És dos perquè el valor és ${count}", 7 | "other": "És en plural perquè el valor és ${count}" 8 | }, 9 | "plural-example_other": "", 10 | "example-with-html": "<0>Aquest és un exempre <1>utilitzant HTML dintre de la traducció", 11 | "no-functional-example": "Traducció feta des d'un component no funcional", 12 | "dynamic-namespaces-link": "Veure un exemple de càrrega dinàmica", 13 | "dynamic-route": "Ruta dinàmica", 14 | "mdx-example": "Això és un exemple amb MDX", 15 | "go-to-home": "Anar a la pàgina principal", 16 | "nested-example": { 17 | "very-nested": { 18 | "nested": "Exemple anidat!" 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/complex/src/translations/more-examples_en.json: -------------------------------------------------------------------------------- 1 | { 2 | "example-with-variable": "This is an example with variable ${exampleOfVariable}", 3 | "plural-example": { 4 | "one": "This is singular because the value is ${count}", 5 | "0": "Is zero because the value is ${count}", 6 | "2": "Is two because the value is ${count}", 7 | "other": "Is in plural because the value is ${count}" 8 | }, 9 | "example-with-html": "<0>This is an example <1>using HTML inside the translation", 10 | "no-functional-example": "Translation done from a no-functional component", 11 | "dynamic-namespaces-link": "See an example of dynamic namespace", 12 | "dynamic-route": "Dynamic route", 13 | "mdx-example": "This is an example with MDX", 14 | "go-to-home": "Go to the homepage", 15 | "nested-example": { 16 | "very-nested": { 17 | "nested": "Nested example!" 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/complex/src/translations/more-examples_es.json: -------------------------------------------------------------------------------- 1 | { 2 | "example-with-variable": "Este es un ejemplo con variable ${exampleOfVariable}", 3 | "plural-example": { 4 | "one": "Es en singular porque el valor es ${count}", 5 | "0": "Es cero porque el valor es ${count}", 6 | "2": "Es dos porque el valor es ${count}", 7 | "other": "Es en plural porque el valor es ${count}" 8 | }, 9 | "example-with-html": "<0>Este es un ejemplo <1>usando HTML dentro de la traducción", 10 | "no-functional-example": "Traducción hecha desde un componente no funcional", 11 | "dynamic-namespaces-link": "Ver un ejemplo de carga dinámica", 12 | "dynamic-route": "Ruta dinamica", 13 | "mdx-example": "Este es un ejemplo con MDX", 14 | "go-to-home": "Ir a la página principal", 15 | "nested-example": { 16 | "very-nested": { 17 | "nested": "¡Ejemplo anidado!" 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/complex/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noImplicitAny": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "noEmit": true, 11 | "esModuleInterop": true, 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "jsx": "preserve", 17 | "incremental": true 18 | }, 19 | "exclude": ["node_modules"], 20 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 21 | "typeRoots": ["./src/mdx.d.ts"] 22 | } 23 | -------------------------------------------------------------------------------- /examples/with-app-directory/README.md: -------------------------------------------------------------------------------- 1 | # App dir example 2 | 3 | Example loading and consuming translations with Next.js 13 app dir. 4 | 5 | -------------------------------------------------------------------------------- /examples/with-app-directory/i18n.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | locales: ['en', 'ca', 'es'], 3 | defaultLocale: 'en', 4 | pages: { 5 | '*': ['common'], 6 | '/[lang]': ['home'], 7 | '/[lang]/second-page': ['home'], 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /examples/with-app-directory/locales/ca/common.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Llibreria next-translate", 3 | "second-page": "Segona <0>pàgina", 4 | "second-page-title": "Títol Segona Pàgina", 5 | "loading": "Carregant...", 6 | "layout-title": "Títol de la pàgina (del layout)" 7 | } 8 | -------------------------------------------------------------------------------- /examples/with-app-directory/locales/ca/home.json: -------------------------------------------------------------------------------- 1 | { 2 | "client-only": "Només al client" 3 | } 4 | -------------------------------------------------------------------------------- /examples/with-app-directory/locales/en/common.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "next-translate library", 3 | "second-page": "Second <0>page", 4 | "second-page-title": "Second Page Title", 5 | "loading": "Loading...", 6 | "layout-title": "Layout title" 7 | } 8 | -------------------------------------------------------------------------------- /examples/with-app-directory/locales/en/home.json: -------------------------------------------------------------------------------- 1 | { 2 | "client-only": "Only client-side" 3 | } 4 | -------------------------------------------------------------------------------- /examples/with-app-directory/locales/es/common.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Librería next-translate", 3 | "second-page": "Segunda <0>página", 4 | "second-page-title": "Título Segunda Página", 5 | "loading": "Cargando...", 6 | "layout-title": "Título de la página (del layout)" 7 | } 8 | -------------------------------------------------------------------------------- /examples/with-app-directory/locales/es/home.json: -------------------------------------------------------------------------------- 1 | { 2 | "client-only": "Sólo al lado del cliente" 3 | } 4 | -------------------------------------------------------------------------------- /examples/with-app-directory/next-env.d.ts: -------------------------------------------------------------------------------- 1 | ///
{t`layout-title`}
20 | {children} 21 | 22 | 23 | ) 24 | } 25 | -------------------------------------------------------------------------------- /examples/with-app-directory/src/app/[lang]/loading.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import useTranslation from 'next-translate/useTranslation' 4 | 5 | export default function Loading() { 6 | const { t } = useTranslation('common') 7 | return{t`loading`}
8 | } 9 | -------------------------------------------------------------------------------- /examples/with-app-directory/src/app/[lang]/page.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Link from 'next/link' 3 | import useTranslation from 'next-translate/useTranslation' 4 | import ClientCode from '../../components/client-code' 5 | 6 | export default async function Page() { 7 | await sleep(500) // simulate slow page load to show loading page 8 | 9 | const { t, lang } = useTranslation('common') 10 | 11 | return ( 12 | <> 13 |{t('title')}
14 | 15 |{t`title`}
19 |{title}
27 | {lang !== 'es' && ( 28 | 29 | Español 30 | 31 | )} 32 | {lang !== 'ca' && ( 33 | 34 | Català 35 | 36 | )} 37 | {lang !== 'en' && ( 38 | <> 39 | 40 | English 41 | 42 | 43 | 44 | )} 45 |{t('more-examples:plural-example', { count })}
17 | } 18 | -------------------------------------------------------------------------------- /examples/without-loader/i18n.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | locales: ['en', 'ca', 'es'], 3 | defaultLocale: 'en', 4 | loader: false, // This deactivate the webpack loader that loads the namespaces 5 | pages: { 6 | '*': ['common'], 7 | '/404': ['error'], 8 | '/': ['home'], 9 | '/dashboard': ['home'], 10 | 'rgx:^/more-examples': ['more-examples'], 11 | }, 12 | // When loader === false, then loadLocaleFrom is required 13 | loadLocaleFrom: async (locale, namespace) => 14 | import(`./locales/${locale}/${namespace}`).then((r) => r.default), 15 | } 16 | -------------------------------------------------------------------------------- /examples/without-loader/locales/ca/common.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Llibreria next-translate" 3 | } 4 | -------------------------------------------------------------------------------- /examples/without-loader/locales/ca/dynamic.json: -------------------------------------------------------------------------------- 1 | { 2 | "example-of-dynamic-translation": "Sóc contingut carregat de forma dinàmica" 3 | } 4 | -------------------------------------------------------------------------------- /examples/without-loader/locales/ca/error.json: -------------------------------------------------------------------------------- 1 | { 2 | "404": "Pàgina no trobada" 3 | } 4 | -------------------------------------------------------------------------------- /examples/without-loader/locales/ca/home.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Aquest text està escrit en Català desde el diccionari de la pàgina d'inici", 3 | "more-examples": "Més exemples" 4 | } 5 | -------------------------------------------------------------------------------- /examples/without-loader/locales/ca/more-examples.json: -------------------------------------------------------------------------------- 1 | { 2 | "example-with-variable": "Aquest és un exemple amb variable {{count}}", 3 | "plural-example": "És en singular perquè el valor és {{count}}", 4 | "plural-example_0": "És cero perquè el valor és {{count}}", 5 | "plural-example_2": "És dos perquè el valor és {{count}}", 6 | "plural-example_other": "És en plural perquè el valor és {{count}}", 7 | "example-with-html": "<0>Aquest és un exempre <1>utilitzant HTML dintre de la traducció", 8 | "no-functional-example": "Traducció feta des d'un component no funcional", 9 | "dynamic-namespaces-link": "Veure un exemple de càrrega dinàmica", 10 | "dynamic-route": "Ruta dinàmica", 11 | "go-to-home": "Anar a la pàgina principal", 12 | "nested-example": { 13 | "very-nested": { 14 | "nested": "Exemple anidat!" 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/without-loader/locales/en/common.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "next-translate library" 3 | } 4 | -------------------------------------------------------------------------------- /examples/without-loader/locales/en/dynamic.json: -------------------------------------------------------------------------------- 1 | { 2 | "example-of-dynamic-translation": "I'm a dynamic loaded content" 3 | } 4 | -------------------------------------------------------------------------------- /examples/without-loader/locales/en/error.json: -------------------------------------------------------------------------------- 1 | { 2 | "404": "Page not found" 3 | } 4 | -------------------------------------------------------------------------------- /examples/without-loader/locales/en/home.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "This text is wrote in English from the homepage dictionary", 3 | "more-examples": "More examples" 4 | } 5 | -------------------------------------------------------------------------------- /examples/without-loader/locales/en/more-examples.json: -------------------------------------------------------------------------------- 1 | { 2 | "example-with-variable": "This is an example with variable {{count}}", 3 | "plural-example": "This is singular because the value is {{count}}", 4 | "plural-example_0": "Is zero because the value is {{count}}", 5 | "plural-example_2": "Is two because the value is {{count}}", 6 | "plural-example_other": "Is in plural because the value is {{count}}", 7 | "example-with-html": "<0>This is an example <1>using HTML inside the translation", 8 | "no-functional-example": "Translation done from a no-functional component", 9 | "dynamic-namespaces-link": "See an example of dynamic namespace", 10 | "dynamic-route": "Dynamic route", 11 | "go-to-home": "Go to the homepage", 12 | "nested-example": { 13 | "very-nested": { 14 | "nested": "Nested example!" 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/without-loader/locales/es/common.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Librería next-translate" 3 | } 4 | -------------------------------------------------------------------------------- /examples/without-loader/locales/es/dynamic.json: -------------------------------------------------------------------------------- 1 | { 2 | "example-of-dynamic-translation": "Soy contenido cargado de forma dinámica" 3 | } 4 | -------------------------------------------------------------------------------- /examples/without-loader/locales/es/error.json: -------------------------------------------------------------------------------- 1 | { 2 | "404": "Página no encontrada" 3 | } 4 | -------------------------------------------------------------------------------- /examples/without-loader/locales/es/home.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Este texto está escrito en Español desde el diccionario de la página de inicio", 3 | "more-examples": "Más ejemplos" 4 | } 5 | -------------------------------------------------------------------------------- /examples/without-loader/locales/es/more-examples.json: -------------------------------------------------------------------------------- 1 | { 2 | "example-with-variable": "Este es un ejemplo con variable {{count}}", 3 | "plural-example": "Es en singular porque el valor es {{count}}", 4 | "plural-example_0": "Es cero porque el valor es {{count}}", 5 | "plural-example_2": "Es dos porque el valor es {{count}}", 6 | "plural-example_other": "Es en plural porque el valor es {{count}}", 7 | "example-with-html": "<0>Este es un ejemplo <1>usando HTML dentro de la traducción", 8 | "no-functional-example": "Traducción hecha desde un componente no funcional", 9 | "dynamic-namespaces-link": "Ver un ejemplo de carga dinámica", 10 | "dynamic-route": "Ruta dinamica", 11 | "go-to-home": "Ir a la página principal", 12 | "nested-example": { 13 | "very-nested": { 14 | "nested": "¡Ejemplo anidado!" 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/without-loader/next.config.js: -------------------------------------------------------------------------------- 1 | const nextTranslate = require('next-translate-plugin') 2 | 3 | module.exports = nextTranslate() 4 | -------------------------------------------------------------------------------- /examples/without-loader/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "-", 3 | "version": "1.0.0", 4 | "private": true, 5 | "license": "MIT", 6 | "scripts": { 7 | "dev": "next dev", 8 | "build": "next build" 9 | }, 10 | "dependencies": { 11 | "next": "14.1.0", 12 | "next-translate": "link:../../", 13 | "react": "link:../../node_modules/react", 14 | "react-dom": "link:../../node_modules/react-dom" 15 | }, 16 | "devDependencies": { 17 | "next-translate-plugin": "2.6.2" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/without-loader/pages/404.js: -------------------------------------------------------------------------------- 1 | import useTranslation from 'next-translate/useTranslation' 2 | import loadNamespaces from 'next-translate/loadNamespaces' 3 | 4 | export default function Error404() { 5 | const { t, lang } = useTranslation() 6 | const errorMessage = t`error:404` 7 | 8 | console.log({ lang }) 9 | 10 | return errorMessage 11 | } 12 | 13 | export async function getStaticProps(ctx) { 14 | return { 15 | props: await loadNamespaces({ 16 | ...ctx, 17 | pathname: '/404', 18 | }), 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/without-loader/pages/_app.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import appWithI18n from 'next-translate/appWithI18n' 3 | import i18nConfig from '../i18n' 4 | 5 | function MyApp({ Component, pageProps }) { 6 | return{description}
16 | {linkName} 17 | 18 | ) 19 | } 20 | 21 | export async function getStaticProps(ctx) { 22 | return { 23 | props: await loadNamespaces({ 24 | ...ctx, 25 | pathname: '/', 26 | }), 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /examples/without-loader/pages/more-examples/catchall/[...all].js: -------------------------------------------------------------------------------- 1 | import Link from 'next/link' 2 | import useTranslation from 'next-translate/useTranslation' 3 | import loadNamespaces from 'next-translate/loadNamespaces' 4 | import { useRouter } from 'next/router' 5 | 6 | export default function All() { 7 | const { query } = useRouter() 8 | const { t, lang } = useTranslation() 9 | 10 | return ( 11 | <> 12 | {JSON.stringify({ query, lang })} 13 |14 | {t`more-examples:go-to-home`} 15 | 16 | ) 17 | } 18 | 19 | export function getStaticPaths({ locales }) { 20 | return { 21 | paths: [ 22 | ...locales.map((locale) => ({ 23 | locale, 24 | params: { all: ['this'] }, 25 | })), 26 | ...locales.map((locale) => ({ 27 | locale, 28 | params: { all: ['this', 'is'] }, 29 | })), 30 | ...locales.map((locale) => ({ 31 | locale, 32 | params: { all: ['this', 'is', 'an'] }, 33 | })), 34 | ...locales.map((locale) => ({ 35 | locale, 36 | params: { all: ['this', 'is', 'an', 'example'] }, 37 | })), 38 | ], 39 | fallback: true, 40 | } 41 | } 42 | 43 | export async function getStaticProps(ctx) { 44 | return { 45 | props: await loadNamespaces({ 46 | ...ctx, 47 | pathname: '/more-examples/catchall/[..all]', 48 | }), 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /examples/without-loader/pages/more-examples/dynamic-namespace.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Trans from 'next-translate/Trans' 3 | import DynamicNamespaces from 'next-translate/DynamicNamespaces' 4 | import loadNamespaces from 'next-translate/loadNamespaces' 5 | 6 | export default function ExampleWithDynamicNamespace() { 7 | return ( 8 |
11 |
13 |
14 | {/* USING DYNAMIC NAMESPACE */}
15 | {t`more-examples:dynamic-route`}
15 |16 | {query.slug} - {lang} 17 |
18 | {t`more-examples:go-to-home`} 19 | 20 | ) 21 | } 22 | 23 | export function getStaticPaths({ locales }) { 24 | return { 25 | paths: locales.map((locale) => ({ 26 | locale, 27 | params: { slug: 'example' }, 28 | })), 29 | fallback: true, 30 | } 31 | } 32 | 33 | export async function getStaticProps(ctx) { 34 | return { 35 | props: await loadNamespaces({ 36 | ...ctx, 37 | pathname: '/more-examples/dynamicroute/[slug]', 38 | }), 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /examples/without-loader/pages/more-examples/index.js: -------------------------------------------------------------------------------- 1 | import useTranslation from 'next-translate/useTranslation' 2 | import Trans from 'next-translate/Trans' 3 | import Link from 'next/link' 4 | import loadNamespaces from 'next-translate/loadNamespaces' 5 | 6 | import PluralExample from '../../components/plural-example' 7 | import Header from '../../components/header' 8 | import NoFunctionalComponent from '../../components/no-functional-component' 9 | 10 | const Component = (props) => 11 | 12 | export default function MoreExamples() { 13 | const { t } = useTranslation() 14 | const exampleWithVariable = t('more-examples:example-with-variable', { 15 | count: 42, 16 | }) 17 | 18 | return ( 19 | <> 20 |{exampleWithVariable}
22 |29 | {t`more-examples:nested-example.very-nested.nested`} 30 |
31 | 32 | {t('more-examples:dynamic-namespaces-link')} 33 | 34 |
35 | 41 | {t('more-examples:dynamic-route')} 42 | 43 |
44 | Catchall 45 | 46 | ) 47 | } 48 | 49 | export async function getStaticProps(ctx) { 50 | return { 51 | props: await loadNamespaces({ 52 | ...ctx, 53 | pathname: '/more-examples', 54 | }), 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /examples/without-loader/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aralroca/next-translate/c47f226ffd0c0f2600595ae7620f8708d6f70a05/examples/without-loader/public/favicon.ico -------------------------------------------------------------------------------- /images/bundle-size.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aralroca/next-translate/c47f226ffd0c0f2600595ae7620f8708d6f70a05/images/bundle-size.png -------------------------------------------------------------------------------- /images/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 128 | -------------------------------------------------------------------------------- /images/translation-prerendered.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aralroca/next-translate/c47f226ffd0c0f2600595ae7620f8708d6f70a05/images/translation-prerendered.gif -------------------------------------------------------------------------------- /jest.setup.js: -------------------------------------------------------------------------------- 1 | jest.mock('next/router', () => require('next-router-mock')) 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "next-translate", 3 | "version": "3.0.0-canary.2", 4 | "description": "Tiny and powerful i18n tools (Next plugin + API) to translate your Next.js pages.", 5 | "license": "MIT", 6 | "keywords": [ 7 | "react", 8 | "preact", 9 | "i18n", 10 | "nextjs", 11 | "next.js", 12 | "next", 13 | "plugin", 14 | "translate", 15 | "translation", 16 | "internationalization", 17 | "locale", 18 | "locales", 19 | "globalization" 20 | ], 21 | "repository": { 22 | "type": "git", 23 | "url": "https://github.com/aralroca/next-translate.git" 24 | }, 25 | "author": { 26 | "name": "Aral Roca Gòmez", 27 | "email": "contact@aralroca.com" 28 | }, 29 | "main": "./lib/cjs/index.js", 30 | "module": "./lib/esm/index.js", 31 | "types": "./index.d.ts", 32 | "files": [ 33 | "lib", 34 | "*.d.ts", 35 | "appWithI18n", 36 | "DynamicNamespaces", 37 | "I18nProvider", 38 | "context", 39 | "getT", 40 | "loadNamespaces", 41 | "Trans", 42 | "TransText", 43 | "withTranslation", 44 | "useTranslation", 45 | "setLanguage", 46 | "index", 47 | "AppDirI18nProvider", 48 | "createTranslation", 49 | "formatElements" 50 | ], 51 | "scripts": { 52 | "build": "yarn clean && cross-env NODE_ENV=production && yarn tsc", 53 | "clean": "yarn clean:build && yarn clean:examples", 54 | "clean:build": "del lib appWith* Dynamic* I18n* index context loadNa* setLang* Trans* useT* withT* getP* getC* *.d.ts getT transC* wrapT* types formatElements AppDirI18nProvider* createTrans*", 55 | "clean:examples": "del examples/**/.next examples/**/node_modules examples/**/yarn.lock", 56 | "example": "yarn example:complex", 57 | "example:basic": "yarn build && yarn --cwd examples/basic && yarn --cwd examples/basic dev", 58 | "example:complex": "yarn build && yarn --cwd examples/complex && yarn --cwd examples/complex dev", 59 | "example:with-app-directory": "yarn build && yarn --cwd examples/with-app-directory && yarn --cwd examples/with-app-directory dev", 60 | "example:without-loader": "yarn build && yarn --cwd examples/without-loader && yarn --cwd examples/without-loader dev", 61 | "format": "pretty-quick", 62 | "husky": "pretty-quick --staged && yarn test", 63 | "prepare": "husky install", 64 | "prepublish": "yarn test && yarn build", 65 | "test": "cross-env NODE_ENV=test jest --env=jsdom", 66 | "test:coverage": "cross-env NODE_ENV=test jest --env=jsdom --coverage", 67 | "test:watch": "cross-env NODE_ENV=test jest --env=jsdom --watch", 68 | "tsc": "tsc -p tsconfig.json && tsc -p tsconfig-cjs.json && node build-packages.js" 69 | }, 70 | "devDependencies": { 71 | "@babel/cli": "7.22.5", 72 | "@babel/core": "7.22.5", 73 | "@babel/preset-env": "7.22.5", 74 | "@babel/preset-typescript": "7.22.5", 75 | "@testing-library/react": "13.4.0", 76 | "@types/jest": "29.5.2", 77 | "@types/node": "20.3.1", 78 | "@types/react": "18.2.13", 79 | "@types/react-dom": "18.2.6", 80 | "@types/webpack": "5.28.1", 81 | "babel-jest": "29.5.0", 82 | "babel-plugin-transform-es2015-modules-commonjs": "6.26.2", 83 | "babel-preset-minify": "0.5.2", 84 | "cross-env": "7.0.3", 85 | "del-cli": "^5.0.0", 86 | "express": "4.18.2", 87 | "husky": "7.0.4", 88 | "jest": "27.3.1", 89 | "next": "13.4.7", 90 | "next-router-mock": "0.9.6", 91 | "prettier": "2.8.8", 92 | "pretty-quick": "3.1.3", 93 | "react": "18.2.0", 94 | "react-dom": "18.2.0", 95 | "supertest": "6.3.3", 96 | "typescript": "5.1.3" 97 | }, 98 | "peerDependencies": { 99 | "next": ">= 13.2.5", 100 | "react": ">= 18.0.0" 101 | }, 102 | "prettier": { 103 | "trailingComma": "es5", 104 | "tabWidth": 2, 105 | "semi": false, 106 | "singleQuote": true 107 | }, 108 | "engines": { 109 | "node": ">=16.10.0" 110 | }, 111 | "jest": { 112 | "roots": [ 113 | "
This is an example
11 | */
12 | export default function Trans({
13 | i18nKey,
14 | values,
15 | components,
16 | fallback,
17 | defaultTrans,
18 | ns,
19 | returnObjects,
20 | }: TransProps): any {
21 | const { t, lang } = useTranslation(ns)
22 |
23 | /**
24 | * Memoize the transformation
25 | */
26 | const result = useMemo(() => {
27 | const text = t(i18nKey, values, {
28 | fallback,
29 | default: defaultTrans,
30 | returnObjects,
31 | })
32 |
33 | if (!text) return text
34 |
35 | if (!components || components.length === 0)
36 | return Array.isArray(text) ? text.map((item) => item) : text
37 |
38 | if (Array.isArray(text))
39 | return text.map((item) => formatElements(item, components))
40 |
41 | return formatElements(text, components)
42 | }, [i18nKey, values, components, lang]) as string
43 |
44 | return result
45 | }
46 |
--------------------------------------------------------------------------------
/src/TransText.ts:
--------------------------------------------------------------------------------
1 | import { useMemo } from 'react'
2 |
3 | import formatElements from './formatElements'
4 | import { TransProps } from '.'
5 |
6 | type ValueTransProps = Pick & {
7 | text: string
8 | }
9 |
10 | export default function TransText({ text, components }: ValueTransProps): any {
11 | return useMemo(
12 | () =>
13 | !components || components.length === 0
14 | ? text
15 | : formatElements(text, components),
16 | [text, components]
17 | ) as string
18 | }
19 |
--------------------------------------------------------------------------------
/src/appWithI18n.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import I18nProvider from './I18nProvider'
3 | import loadNamespaces from './loadNamespaces'
4 | import { LoaderConfig } from '.'
5 |
6 | type Props = {
7 | [key: string]: any
8 | }
9 |
10 | interface PartialNextContext {
11 | res?: any
12 | AppTree?: NextComponentType
13 | Component?: NextComponentType
14 | ctx?: PartialNextContext
15 | [key: string]: any
16 | }
17 |
18 | type NextComponentType<
19 | C extends PartialNextContext = PartialNextContext,
20 | IP = {},
21 | P = {}
22 | > = React.ComponentType & {
23 | getInitialProps?(context: C): IP | Promise
24 | }
25 |
26 | export default function appWithI18n(
27 | AppToTranslate: NextComponentType,
28 | config: LoaderConfig = {}
29 | ) {
30 | if (!config.isLoader && config.loader !== false) {
31 | console.warn(
32 | '🚨 [next-translate] You can remove the "appWithI18n" HoC on the _app.js, unless you set "loader: false" in your i18n config file.'
33 | )
34 | }
35 |
36 | function AppWithTranslations(props: Props) {
37 | const { defaultLocale } = config
38 |
39 | return (
40 |
45 |
47 | )
48 | }
49 |
50 | if (typeof config.staticsHoc === 'function') {
51 | config.staticsHoc(AppWithTranslations, AppToTranslate)
52 | }
53 |
54 | // @ts-ignore
55 | if (typeof window === 'undefined') global.i18nConfig = config
56 | // @ts-ignore
57 | else window.i18nConfig = config
58 |
59 | if (config.skipInitialProps) return AppWithTranslations
60 |
61 | AppWithTranslations.getInitialProps = async (appCtx: any) => {
62 | const ctx = { ...(appCtx.ctx || {}), ...(appCtx || {}) }
63 | let appProps: object = { pageProps: {} }
64 |
65 | if (AppToTranslate.getInitialProps) {
66 | appProps = (await AppToTranslate.getInitialProps(appCtx)) || {}
67 | }
68 |
69 | return {
70 | ...appProps,
71 | ...(await loadNamespaces({
72 | ...ctx,
73 | ...config,
74 | loaderName: 'getInitialProps',
75 | })),
76 | }
77 | }
78 |
79 | return AppWithTranslations
80 | }
81 |
--------------------------------------------------------------------------------
/src/context.tsx:
--------------------------------------------------------------------------------
1 | import { I18n } from '.'
2 | import React from 'react'
3 |
4 | let context
5 |
6 | // For serverComponents (app-dir), the context cannot be used and
7 | // this makes that all the imports to here don't break the build.
8 | // The use of this context is inside each util, depending pages-dir or app-dir.
9 | if (typeof React.createContext === 'function') {
10 | context = React.createContext({
11 | t: (k) => (Array.isArray(k) ? k[0] : k),
12 | lang: '',
13 | })
14 | }
15 |
16 | export default context as React.Context
17 |
--------------------------------------------------------------------------------
/src/createTranslation.tsx:
--------------------------------------------------------------------------------
1 | import transCore from './transCore'
2 | import wrapTWithDefaultNs from './wrapTWithDefaultNs'
3 |
4 | // Only for App directory
5 | export default function createTranslation(defaultNS?: string) {
6 | const { lang, namespaces, config } = globalThis.__NEXT_TRANSLATE__ ?? {}
7 | const localesToIgnore = config.localesToIgnore || ['default']
8 | const ignoreLang = !lang || localesToIgnore.includes(lang)
9 | const t = transCore({
10 | config,
11 | allNamespaces: namespaces,
12 | pluralRules: new Intl.PluralRules(ignoreLang ? undefined : lang),
13 | lang,
14 | })
15 |
16 | return { t: wrapTWithDefaultNs(t, defaultNS), lang }
17 | }
18 |
--------------------------------------------------------------------------------
/src/formatElements.tsx:
--------------------------------------------------------------------------------
1 | import React, { cloneElement, Fragment, ReactElement, ReactNode } from 'react'
2 |
3 | export const tagParsingRegex = /<(\w+) *>(.*?)<\/\1 *>|<(\w+) *\/>/
4 |
5 | const nlRe = /(?:\r\n|\r|\n)/g
6 |
7 | function getElements(
8 | parts: Array
9 | ): Array[] {
10 | if (!parts.length) return []
11 |
12 | const [paired, children, unpaired, after] = parts.slice(0, 4)
13 |
14 | return [
15 | [(paired || unpaired) as string, children || ('' as string), after],
16 | ].concat(getElements(parts.slice(4, parts.length)))
17 | }
18 |
19 | export default function formatElements(
20 | value: string,
21 | elements: ReactElement[] | Record = []
22 | ): string | ReactNode[] {
23 | const parts = value.replace(nlRe, '').split(tagParsingRegex)
24 |
25 | if (parts.length === 1) return value
26 |
27 | const tree = []
28 |
29 | const before = parts.shift()
30 | if (before) tree.push(before)
31 |
32 | getElements(parts).forEach(([key, children, after], realIndex: number) => {
33 | const element =
34 | // @ts-ignore
35 | elements[key as string] || {
19 | const rgx = 'rgx:'
20 | const getNs = async (ns: PageValue): Promise =>
21 | typeof ns === 'function' ? ns(ctx) : ns || []
22 |
23 | // Namespaces promises using regex
24 | const rgxs = Object.keys(pages).reduce((arr: Promise[], p) => {
25 | if (
26 | p.substring(0, rgx.length) === rgx &&
27 | new RegExp(p.replace(rgx, '')).test(page)
28 | ) {
29 | arr.push(getNs(pages[p]))
30 | }
31 | return arr
32 | }, [])
33 |
34 | return [
35 | ...(await getNs(pages['*'])),
36 | ...(await getNs(pages[page])),
37 | ...flat(await Promise.all(rgxs)),
38 | ]
39 | }
40 |
--------------------------------------------------------------------------------
/src/getT.tsx:
--------------------------------------------------------------------------------
1 | import getConfig from './getConfig'
2 | import transCore from './transCore'
3 | import wrapTWithDefaultNs from './wrapTWithDefaultNs'
4 | import { I18nDictionary, LocaleLoader } from './index'
5 |
6 | export default async function getT(
7 | locale = '',
8 | namespace: string | string[] = ''
9 | ) {
10 | const appDir = globalThis.__NEXT_TRANSLATE__
11 | const config = appDir?.config ?? getConfig()
12 | const defaultLoader = async () => Promise.resolve({})
13 | const lang = locale || config.defaultLocale || ''
14 | const loader: LocaleLoader = config.loadLocaleFrom || defaultLoader
15 |
16 | const namespaces = Array.isArray(namespace) ? namespace : [namespace]
17 |
18 | const allNamespaces: Record = {}
19 | await Promise.all(
20 | namespaces.map(async (namespace) => {
21 | allNamespaces[namespace] = await loader(lang, namespace)
22 | })
23 | )
24 |
25 | const localesToIgnore = config.localesToIgnore || ['default']
26 | const ignoreLang = localesToIgnore.includes(lang)
27 | const pluralRules = new Intl.PluralRules(ignoreLang ? undefined : lang)
28 | const t = transCore({ config, allNamespaces, pluralRules, lang })
29 |
30 | const defaultNamespace = namespaces[0]
31 | return wrapTWithDefaultNs(t, defaultNamespace)
32 | }
33 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import { ReactElement, ReactNode } from 'react'
2 | import type { NextConfig } from 'next'
3 |
4 | export interface TranslationQuery {
5 | [name: string]: any
6 | }
7 |
8 | export type DataForStoreType = {
9 | lang: string
10 | namespaces: Record
11 | config: LoaderConfig
12 | }
13 |
14 | export type Translate = (
15 | i18nKey: string | TemplateStringsArray,
16 | query?: TranslationQuery | null,
17 | options?: {
18 | returnObjects?: boolean
19 | fallback?: string | string[]
20 | default?: T | string
21 | ns?: string
22 | }
23 | ) => T
24 |
25 | export interface I18n {
26 | t: Translate
27 | lang: string
28 | }
29 |
30 | export interface I18nProviderProps {
31 | lang?: string
32 | namespaces?: Record
33 | children?: ReactNode
34 | config?: I18nConfig
35 | }
36 |
37 | export interface TransProps {
38 | i18nKey: string
39 | components?: ReactElement[] | Record
40 | values?: TranslationQuery
41 | fallback?: string | string[]
42 | defaultTrans?: string
43 | ns?: string
44 | returnObjects?: boolean
45 | }
46 |
47 | export type PageValue = string[] | ((context: object) => string[])
48 |
49 | export type LocaleLoader = (
50 | language: string | undefined,
51 | namespace: string
52 | ) => Promise
53 |
54 | // Makes the specified properties within a Typescript interface optional
55 | export type Optional = Pick, K> & Omit
56 |
57 | // Built-in i18n Next.js options
58 | export type RawNextI18nConfig = Exclude
59 | export type NextI18nConfig = Optional<
60 | RawNextI18nConfig,
61 | 'locales' | 'defaultLocale'
62 | >
63 |
64 | export interface I18nConfig extends NextI18nConfig {
65 | loadLocaleFrom?: LocaleLoader
66 | localesToIgnore?: string[]
67 | pages?: Record
68 | logger?: I18nLogger
69 | loggerEnvironment?: 'node' | 'browser' | 'both'
70 | staticsHoc?: Function
71 | extensionsRgx?: string
72 | loader?: boolean
73 | logBuild?: boolean
74 | revalidate?: number
75 | pagesInDir?: string
76 | interpolation?: {
77 | format?: (value: TranslationQuery[string], format: any, lang: string | undefined) => string
78 | prefix?: string
79 | suffix?: string
80 | }
81 | keySeparator?: string | false
82 | nsSeparator?: string | false
83 | defaultNS?: string
84 | allowEmptyStrings?: boolean
85 | }
86 |
87 | export interface LoaderConfig extends I18nConfig {
88 | locale?: string
89 | router?: { locale: string }
90 | pathname?: string
91 | skipInitialProps?: boolean
92 | loaderName?: string
93 | isLoader?: boolean
94 | [key: string]: any
95 | }
96 |
97 | export interface LoggerProps {
98 | namespace: string | undefined
99 | i18nKey: string
100 | }
101 |
102 | export interface I18nLogger {
103 | (context: LoggerProps): void
104 | }
105 |
106 | export interface I18nDictionary {
107 | [key: string]: string | I18nDictionary
108 | }
109 |
110 | export interface DynamicNamespacesProps {
111 | dynamic?: LocaleLoader
112 | namespaces?: string[]
113 | fallback?: ReactNode
114 | children?: ReactNode
115 | }
116 |
117 | declare global {
118 | // For NodeJS 16+
119 | // eslint-disable-next-line no-var
120 | var i18nConfig: LoaderConfig
121 | // eslint-disable-next-line no-var
122 | var __NEXT_TRANSLATE__: {
123 | namespaces: Record
124 | lang: string
125 | config: LoaderConfig
126 | }
127 |
128 | namespace NodeJS {
129 | interface Global {
130 | i18nConfig: LoaderConfig
131 | __NEXT_TRANSLATE__: {
132 | namespaces: Record
133 | lang: string
134 | }
135 | }
136 | }
137 |
138 | interface Window {
139 | i18nConfig: LoaderConfig
140 | __NEXT_TRANSLATE__: {
141 | namespaces: Record
142 | lang: string
143 | }
144 | }
145 | }
146 |
147 | //////// For type safety (next-translate.d.ts): ///////////
148 | /*
149 | *
150 | * import type { Paths, I18n, Translate } from "next-translate";
151 | *
152 | * export interface TranslationsKeys {
153 | * common: Paths;
154 | * home: Paths;
155 | * }
156 | *
157 | * export interface TypeSafeTranslate
158 | * extends Omit {
159 | * t: {
160 | * (key: TranslationsKeys[Namespace], ...rest: Tail>): string;
161 | * (template: TemplateStringsArray): string;
162 | * };
163 | * }
164 | *
165 | * declare module "next-translate/useTranslation" {
166 | * export default function useTranslation<
167 | * Namespace extends keyof TranslationsKeys,
168 | * >(namespace: Namespace): TypeSafeTranslate;
169 | * }
170 | */
171 |
172 | type RemovePlural = Key extends `${infer Prefix}${
173 | | '_zero'
174 | | '_one'
175 | | '_two'
176 | | '_few'
177 | | '_many'
178 | | '_other'
179 | | `_${number}`}`
180 | ? Prefix
181 | : Key
182 |
183 | type Join = S1 extends string
184 | ? S2 extends string
185 | ? `${S1}.${S2}`
186 | : never
187 | : never
188 |
189 | // @ts-ignore
190 | export type Paths = RemovePlural<
191 | // @ts-ignore
192 | {
193 | // @ts-ignore
194 | [K in Extract]: T[K] extends Record
195 | ? Join>
196 | : K
197 | }[Extract]
198 | >
199 |
200 | // TODO: Remove this in future versions > 2.0.0
201 | function nextTranslate(nextConfig: NextConfig = {}): NextConfig {
202 | console.log(`
203 | #########################################################################
204 | # #
205 | # next-translate plugin in 2.0.0 is replaced by #
206 | # next-translate-plugin package: #
207 | # #
208 | # > yarn add next-translate-plugin -D #
209 | # or: #
210 | # > npm install next-translate-plugin --save-dev #
211 | # #
212 | # replace in next.config.js file: #
213 | # const nextTranslate = require('next-translate') #
214 | # to: #
215 | # const nextTranslate = require('next-translate-plugin') #
216 | # #
217 | #########################################################################
218 | `)
219 | return nextConfig
220 | }
221 |
222 | module.exports = nextTranslate
223 | export default nextTranslate
224 |
--------------------------------------------------------------------------------
/src/loadNamespaces.tsx:
--------------------------------------------------------------------------------
1 | import { I18nDictionary, LoaderConfig, LocaleLoader } from '.'
2 | import getConfig from './getConfig'
3 | import getPageNamespaces from './getPageNamespaces'
4 |
5 | export default async function loadNamespaces(
6 | config: LoaderConfig = {} as LoaderConfig
7 | ): Promise<{
8 | __lang: string
9 | __namespaces?: Record
10 | }> {
11 | const conf = { ...getConfig(), ...config }
12 | const localesToIgnore = conf.localesToIgnore || ['default']
13 | const __lang: string =
14 | conf.req?.locale ||
15 | conf.locale ||
16 | conf.router?.locale ||
17 | conf.defaultLocale ||
18 | ''
19 |
20 | if (!conf.pathname) {
21 | console.warn(
22 | '🚨 [next-translate] You forgot to pass the "pathname" inside "loadNamespaces" configuration'
23 | )
24 | return { __lang }
25 | }
26 |
27 | if (localesToIgnore.includes(__lang)) return { __lang }
28 |
29 | if (!conf.loaderName && conf.loader !== false) {
30 | console.warn(
31 | '🚨 [next-translate] You can remove the "loadNamespaces" helper, unless you set "loader: false" in your i18n config file.'
32 | )
33 | }
34 |
35 | const page = removeTrailingSlash(conf.pathname.replace(/\/index$/, '')) || '/'
36 | const namespaces = await getPageNamespaces(conf, page, conf)
37 | const defaultLoader: LocaleLoader = () => Promise.resolve({})
38 | const pageNamespaces =
39 | (await Promise.all(
40 | namespaces.map((ns) =>
41 | typeof conf.loadLocaleFrom === 'function'
42 | ? conf.loadLocaleFrom(__lang, ns).catch(() => ({}))
43 | : defaultLoader(__lang, ns)
44 | )
45 | )) || []
46 |
47 | log(conf, { page, lang: __lang, namespaces })
48 |
49 | return {
50 | __lang,
51 | __namespaces: namespaces.reduce(
52 | (obj: Record, ns, i) => {
53 | obj[ns] = pageNamespaces[i] || (null as unknown as I18nDictionary)
54 | return obj
55 | },
56 | {}
57 | ),
58 | }
59 | }
60 |
61 | function removeTrailingSlash(path = '') {
62 | return path.length > 1 && path.endsWith('/') ? path.slice(0, -1) : path
63 | }
64 |
65 | type LogProps = {
66 | page: string
67 | lang: string
68 | namespaces: string[]
69 | }
70 |
71 | export function log(conf: LoaderConfig, { page, lang, namespaces }: LogProps) {
72 | if (conf.logBuild !== false && typeof window === 'undefined') {
73 | const colorEnabled =
74 | process.env.NODE_DISABLE_COLORS == null &&
75 | process.env.NO_COLOR == null &&
76 | process.env.TERM !== 'dumb' &&
77 | process.env.FORCE_COLOR !== '0'
78 | const color = (c: string) => (colorEnabled ? `\x1b[36m${c}\x1b[0m` : c)
79 | console.log(
80 | color('next-translate'),
81 | `- compiled page:`,
82 | color(page),
83 | '- locale:',
84 | color(lang),
85 | '- namespaces:',
86 | color(namespaces.join(', ')),
87 | '- used loader:',
88 | color(conf.loaderName || '-')
89 | )
90 | }
91 | }
92 |
--------------------------------------------------------------------------------
/src/setLanguage.tsx:
--------------------------------------------------------------------------------
1 | import Router from 'next/router'
2 |
3 | export default async function setLanguage(
4 | locale: string,
5 | scroll = true
6 | ): Promise {
7 | return await Router.push(
8 | {
9 | pathname: Router.pathname,
10 | query: Router.query,
11 | },
12 | Router.asPath,
13 | { locale, scroll }
14 | )
15 | }
16 |
--------------------------------------------------------------------------------
/src/transCore.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | I18nConfig,
3 | I18nDictionary,
4 | LoaderConfig,
5 | LoggerProps,
6 | TranslationQuery,
7 | } from '.'
8 | import { Translate } from './index'
9 |
10 | function splitNsKey(key: string, nsSeparator: string | false) {
11 | if (!nsSeparator) return { i18nKey: key }
12 | const i = key.indexOf(nsSeparator)
13 | if (i < 0) return { i18nKey: key }
14 | return {
15 | namespace: key.slice(0, i),
16 | i18nKey: key.slice(i + nsSeparator.length),
17 | }
18 | }
19 |
20 | export default function transCore({
21 | config,
22 | allNamespaces,
23 | pluralRules,
24 | lang,
25 | }: {
26 | config: LoaderConfig
27 | allNamespaces: Record
28 | pluralRules: Intl.PluralRules
29 | lang: string | undefined
30 | }): Translate {
31 | const {
32 | logger = missingKeyLogger,
33 | // An optional parameter allowEmptyStrings - true as default.
34 | // If allowEmptyStrings parameter is marked as false,
35 | // it should log an error when an empty string is attempted to be translated
36 | // and return the namespace and key as result of the translation.
37 | allowEmptyStrings = true,
38 | } = config
39 |
40 | const interpolateUnknown = (
41 | value: unknown,
42 | query?: TranslationQuery | null
43 | ): typeof value => {
44 | if (Array.isArray(value)) {
45 | return value.map((val) => interpolateUnknown(val, query))
46 | }
47 | if (value instanceof Object) {
48 | return objectInterpolation({
49 | obj: value as Record,
50 | query,
51 | config,
52 | lang,
53 | })
54 | }
55 | return interpolation({ text: value as string, query, config, lang })
56 | }
57 |
58 | const t: Translate = (key = '', query, options) => {
59 | const k = Array.isArray(key) ? key[0] : key
60 | const { nsSeparator = ':', loggerEnvironment = 'browser' } = config
61 |
62 | const { i18nKey, namespace = options?.ns ?? config.defaultNS } = splitNsKey(
63 | k,
64 | nsSeparator
65 | )
66 |
67 | const dic = (namespace && allNamespaces[namespace]) || {}
68 | const keyWithPlural = plural(
69 | pluralRules,
70 | dic,
71 | i18nKey,
72 | config,
73 | query,
74 | options
75 | )
76 | const dicValue = getDicValue(dic, keyWithPlural, config, options)
77 | const value =
78 | typeof dicValue === 'object'
79 | ? JSON.parse(JSON.stringify(dicValue))
80 | : dicValue
81 |
82 | const empty =
83 | typeof value === 'undefined' ||
84 | (typeof value === 'object' && !Object.keys(value).length) ||
85 | (value === '' && !allowEmptyStrings)
86 |
87 | const fallbacks =
88 | typeof options?.fallback === 'string'
89 | ? [options.fallback]
90 | : options?.fallback || []
91 |
92 | if (
93 | empty &&
94 | (loggerEnvironment === 'both' ||
95 | loggerEnvironment ===
96 | (typeof window === 'undefined' ? 'node' : 'browser'))
97 | ) {
98 | logger({ namespace, i18nKey })
99 | }
100 |
101 | // Fallbacks
102 | if (empty && Array.isArray(fallbacks) && fallbacks.length) {
103 | const [firstFallback, ...restFallbacks] = fallbacks
104 | if (typeof firstFallback === 'string') {
105 | return t(firstFallback, query, { ...options, fallback: restFallbacks })
106 | }
107 | }
108 |
109 | if (
110 | empty &&
111 | options &&
112 | // options.default could be a nullish value so check that the property exists
113 | options.hasOwnProperty('default') &&
114 | !fallbacks?.length
115 | ) {
116 | // if options.default is falsey there's no reason to do interpolation
117 | return options.default
118 | ? interpolateUnknown(options.default, query)
119 | : options.default
120 | }
121 |
122 | // no need to try interpolation
123 | if (empty) {
124 | return k
125 | }
126 |
127 | // this can return an empty string if either value was already empty
128 | // or it contained only an interpolation (e.g. "{{name}}") and the query param was empty
129 | return interpolateUnknown(value, query)
130 | }
131 |
132 | return t
133 | }
134 |
135 | /**
136 | * Get value from key (allow nested keys as parent.children)
137 | */
138 | function getDicValue(
139 | dic: I18nDictionary,
140 | key: string = '',
141 | config: I18nConfig,
142 | options: { returnObjects?: boolean; fallback?: string | string[] } = {
143 | returnObjects: false,
144 | }
145 | ): unknown | undefined {
146 | const { keySeparator = '.' } = config || {}
147 | const keyParts = keySeparator ? key.split(keySeparator) : [key]
148 |
149 | if (key === keySeparator && options.returnObjects) return dic
150 |
151 | const value: string | object = keyParts.reduce(
152 | (val: I18nDictionary | string, key: string) => {
153 | if (typeof val === 'string') {
154 | return {}
155 | }
156 |
157 | const res = val[key as keyof typeof val]
158 |
159 | // pass all truthy values or (empty) strings
160 | return res || (typeof res === 'string' ? res : {})
161 | },
162 | dic
163 | )
164 |
165 | if (
166 | typeof value === 'string' ||
167 | ((value as unknown) instanceof Object &&
168 | options.returnObjects &&
169 | Object.keys(value).length > 0)
170 | ) {
171 | return value
172 | }
173 |
174 | if (Array.isArray(value) && options.returnObjects) return value
175 | return undefined
176 | }
177 |
178 | /**
179 | * Control plural keys depending the {{count}} variable
180 | */
181 | function plural(
182 | pluralRules: Intl.PluralRules,
183 | dic: I18nDictionary,
184 | key: string,
185 | config: I18nConfig,
186 | query?: TranslationQuery | null,
187 | options?: {
188 | returnObjects?: boolean
189 | fallback?: string | string[]
190 | }
191 | ): string {
192 | if (!query || typeof query.count !== 'number') return key
193 |
194 | const numKey = `${key}_${query.count}`
195 | if (getDicValue(dic, numKey, config, options) !== undefined) return numKey
196 |
197 | const pluralKey = `${key}_${pluralRules.select(query.count)}`
198 | if (getDicValue(dic, pluralKey, config, options) !== undefined) {
199 | return pluralKey
200 | }
201 |
202 | const nestedNumKey = `${key}.${query.count}`
203 | if (getDicValue(dic, nestedNumKey, config, options) !== undefined)
204 | return nestedNumKey
205 |
206 | const nestedKey = `${key}.${pluralRules.select(query.count)}`
207 | if (getDicValue(dic, nestedKey, config, options) !== undefined)
208 | return nestedKey
209 |
210 | return key
211 | }
212 |
213 | /**
214 | * Replace {{variables}} to query values
215 | */
216 | function interpolation({
217 | text,
218 | query,
219 | config,
220 | lang,
221 | }: {
222 | text?: string
223 | query?: TranslationQuery | null
224 | config: I18nConfig
225 | lang?: string | undefined
226 | }): string {
227 | if (!text || !query) return text || ''
228 |
229 | const escapeRegex = (str: string) =>
230 | str.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')
231 | const {
232 | format = null,
233 | prefix = '{{',
234 | suffix = '}}',
235 | } = config.interpolation || {}
236 |
237 | const regexEnd =
238 | suffix === '' ? '' : `(?:[\\s,]+([\\w-]*))?\\s*${escapeRegex(suffix)}`
239 | return Object.keys(query).reduce((all, varKey) => {
240 | const regex = new RegExp(
241 | `${escapeRegex(prefix)}\\s*${varKey}${regexEnd}`,
242 | 'gm'
243 | )
244 | // $1 is the first match group
245 | return all.replace(regex, (_match, $1) => {
246 | // $1 undefined can mean either no formatting requested: "{{name}}"
247 | // or no format name given: "{{name, }}" -> ignore
248 | return $1 && format
249 | ? (format(query[varKey], $1, lang) as string)
250 | : (query[varKey] as string)
251 | })
252 | }, text)
253 | }
254 |
255 | function objectInterpolation({
256 | obj,
257 | query,
258 | config,
259 | lang,
260 | }: {
261 | obj: Record
262 | query?: TranslationQuery | null
263 | config: I18nConfig
264 | lang?: string
265 | }): any {
266 | if (!query || Object.keys(query).length === 0) return obj
267 | Object.keys(obj).forEach((key) => {
268 | if (obj[key] instanceof Object)
269 | objectInterpolation({
270 | obj: obj[key] as Record,
271 | query,
272 | config,
273 | lang,
274 | })
275 | if (typeof obj[key] === 'string')
276 | obj[key] = interpolation({
277 | text: obj[key] as string,
278 | query,
279 | config,
280 | lang,
281 | })
282 | })
283 |
284 | return obj
285 | }
286 |
287 | function missingKeyLogger({ namespace, i18nKey }: LoggerProps): void {
288 | if (process.env.NODE_ENV === 'production') return
289 |
290 | // This means that instead of "ns:value", "value" has been misspelled (without namespace)
291 | if (!namespace) {
292 | console.warn(
293 | `[next-translate] The text "${i18nKey}" has no namespace in front of it.`
294 | )
295 | return
296 | }
297 | console.warn(
298 | `[next-translate] "${namespace}:${i18nKey}" is missing in current namespace configuration. Try adding "${i18nKey}" to the namespace "${namespace}".`
299 | )
300 | }
301 |
--------------------------------------------------------------------------------
/src/useTranslation.tsx:
--------------------------------------------------------------------------------
1 | import { useContext, useMemo } from 'react'
2 | import { I18n } from '.'
3 | import wrapTWithDefaultNs from './wrapTWithDefaultNs'
4 | import I18nContext from './context'
5 | import createTranslation from './createTranslation'
6 |
7 | function useTranslationInPages(defaultNS?: string): I18n {
8 | const ctx = useContext(I18nContext)
9 | return useMemo(
10 | () => ({
11 | ...ctx,
12 | t: wrapTWithDefaultNs(ctx.t, defaultNS),
13 | }),
14 | [ctx, defaultNS]
15 | )
16 | }
17 |
18 | export default function useTranslation(defaultNS?: string): I18n {
19 | const appDir = globalThis.__NEXT_TRANSLATE__
20 | const useT = appDir?.config ? createTranslation : useTranslationInPages
21 | return useT(defaultNS)
22 | }
23 |
--------------------------------------------------------------------------------
/src/withTranslation.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import useTranslation from './useTranslation'
3 | import { NextComponentType } from 'next'
4 |
5 | /**
6 | * HOC to use the translations in no-functional components
7 | */
8 | export default function withTranslation(
9 | Component: React.ComponentType
| NextComponentType,
10 | defaultNS?: string
11 | ): React.ComponentType> {
12 | const WithTranslation: NextComponentType = (props: P) => {
13 | const i18n = useTranslation(defaultNS)
14 | return
19 | if (WrappedComponent.getInitialProps) {
20 | return (await WrappedComponent.getInitialProps(ctx)) || {}
21 | } else {
22 | return {}
23 | }
24 | }
25 |
26 | WithTranslation.displayName = `withTranslation(${
27 | Component.displayName || ''
28 | })`
29 |
30 | return WithTranslation
31 | }
32 |
--------------------------------------------------------------------------------
/src/wrapTWithDefaultNs.tsx:
--------------------------------------------------------------------------------
1 | import { Translate } from '.'
2 |
3 | export default function wrapTWithDefaultNs(
4 | oldT: Translate,
5 | ns?: string
6 | ): Translate {
7 | if (typeof ns !== 'string') return oldT
8 |
9 | // Use default namespace if namespace is missing
10 | const t: Translate = (key, query, options) => {
11 | return oldT(key, query, { ns, ...options })
12 | }
13 |
14 | return t
15 | }
16 |
--------------------------------------------------------------------------------
/tsconfig-cjs.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "module": "CommonJS",
5 | "outDir": "./lib/cjs",
6 | "declaration": false,
7 | "declarationDir": null
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "strict": true,
4 | "module": "ES2020",
5 | "target": "es5",
6 | "jsx": "react",
7 | "removeComments": true,
8 | "moduleResolution": "node",
9 | "esModuleInterop": true,
10 | "noImplicitAny": true,
11 | "noImplicitReturns": true,
12 | "noImplicitThis": true,
13 | "declaration": true,
14 | "lib": ["esnext", "dom"],
15 | "forceConsistentCasingInFileNames": true,
16 | "outDir": "./lib/esm",
17 | "declarationDir": "./"
18 | },
19 | "include": ["./src/**/*.ts", "./src/**/*.tsx"],
20 | "exclude": ["node_modules"]
21 | }
22 |
--------------------------------------------------------------------------------
& {
23 | getInitialProps?(context: C): IP | Promise (
9 | Component: React.ComponentType | NextComponentType