🚀 Welcome translate files!

Internationalize your website or app in a simple way 🇨🇴 🇺🇸 🇩🇪

✅ Let's speak in the same language!

📖 Table of Contents

🚀 Getting started
- 1. Install
- 2. Config base Translations
📦 Convert JSON to CSV
🔵 Implement in React Js
🟠 Implement in Astro
🟢 Implement in NextJs

1. Install

npm i @neiderruiz/translate-files

import { translateFileCsv } from "@neiderruiz/translate-files";

const { translateFileCsv } = require("@neiderruiz/translate-files");

usign

translateFileCsv(idDocument,routeFolderSave)

generate

🛑 If you already have a json with your translations you can use it as a base!

separator [your key separator '&&' or '-', default is '.']
langs [your langs translate website, default is empty ] view list{:target="_blank"}
- example ['es', 'en', 'fr', 'gu']
nameFile [name file result, default is 'result']

    const { convertJsonToCsv } = require("@neiderruiz/translate-files");

    const data = require('../services/lang/languages/es.json')

    convertJsonToCsv(data, {
        separator: '.', 
        langs: ['es', 'en', 'fr', 'gu'],        
        nameFile: 'my_result'
    })

2. configure translations

import your result in Google Drive open google drive
- after open file with google sheets
after select keys and base, and copy in your copy of next document

Open url and duplicate file in your google drive.

🟢 document base spreadsheets translations

Share document
- give read permission
- copy link
- get document ID from url

duplicate document in your drive

we give our copy a name

We add our translations by editing the base column
- key: the unique key we use in our app to translate text t('actions.save')
- base: the text that we enter so that spreadsheets creates the translations automatically
- es,en,it,fr: base languages that the template has, you can add or remove languages

we press share

brings the following as a base configuration

we update it as follows and click on done

we extract the document id from our url

// src/utils/translate.js
const { translateFileCsv } = require("@neiderruiz/translate-files");

translateFileCsv('19sxdh1WE5RMXiuTWuMJonu81NWrewZbZ','./translations')

add script in package.json

// package.json
{
    "scripts": {
        "translate": "node src/utils/translate.js"
    }
}

run script

npm run translate

result

implement in React Js

install package

npm i @neiderruiz/translate-files react-i18next i18next

get translations spreadsheet id

// src/utils/translate.js
import { translateFileCsv } from '@neiderruiz/translate-files'

translateFileCsv('1UwWGPdr8XDO29tNzFiJtPDTFVt1xCLG-gSVeQd-x5Oc', './src/locales/translations')

add script in package.json

// package.json
{
    "scripts": {
        ...more scripts,
        "translate": "node src/utils/translate.js"
    }
}

make resources file

// src/locales/index.js
import en from './translations/en.json'
import es from './translations/es.json'
import fr from './translations/fr.json'

export const resources = {
    en: {
        translation: en
    },
    es: {
        translation: es
    },
    fr: {
        translation: fr
    }
}

create file i18n.js

// src/locales/i18n.ts
import i18n from "i18next";

import { initReactI18next } from "react-i18next";
import { resources } from ".";

i18n.use(initReactI18next)
.init({
    resources,
    lng: "es",
    fallbackLng: "es",
    interpolation: {
        escapeValue: false
    }
});

export default i18n;

add i18n in index.js

// src/main.tsx or src/App.tsx
import './locales/i18n';

make Hook useTranslate React Js

// src/hooks/use-translate.tsx
import { useTypedTranslation, FlattenKeys } from '@neiderruiz/translate-files/react'
import en from '../locales/translations/en.json'
import i18n from '../locales/i18n'

type Tylelang = typeof en

export type KeysTranslation = FlattenKeys<Tylelang>

const useTranslation = () => {
    const { t } = useTypedTranslation<Tylelang>()

    return {
        t,
        i18n
    }
}

export default useTranslation

how use hook

// src/components/Example.tsx
import React from 'react'
import useTranslation from '../hooks/use-translate'

const Example = () => {
    const { t } = useTranslation()
    return (
        <div>
            {t('actions.save')}
            {/* how pased params */}
            <span>
                {t('actions.save_items',  ['mi param', 'second param'])}
            </span>
        </div>
    )
}

implement in Astro

install packages

npm i @neiderruiz/translate-files astro-i18next @types/i18next -D

config astro-i18next

view documentation

// astro.config.mjs
import { defineConfig } from "astro/config";
import astroI18next from "astro-i18next";

export default defineConfig({
  integrations: [astroI18next()],
});

make file config

//astro-i18next.config.mjs
export default {
  defaultLocale: "en",
  locales: ["en", "fr"],
};

get translations spreadsheet id

// src/utils/translate.js
const { makeTranslations } = require("@neiderruiz/translate-files/astro");

makeTranslations('1UwWGPdr8XDO29tNzFiJtPDTFVt1xCLG-gSVeQd-x5Oc')

add script in package.json

// package.json
{
    "scripts": {
        ...more scripts,
        "translate": "node ./src/utils/translate.js && npx astro-i18next generate"
    }
}

example use in astro

// src/pages/index.astro
---
import { t } from "i18next";
---

<h1>{t('actions.save')}</h1>

example interpolate params

// src/pages/index.astro
---
import { t } from "i18next";
---

<h1>{t('test.counting',['1','20'])}</h1>
// result <h1>counting 1 of 20</h1>

implement in NextJs

install packages

npm i @neiderruiz/translate-files @types/i18next next-i18n-router -D

config next.js

// ./src/utils/translate.js
const { translateFileCsv } = require("@neiderruiz/translate-files");

const documentId = 'documentId spreadsheets';
const folderSave = './src/service/languages';

translateFileCsv(documentId, folderSave, {
    separator: '.',
});

add script in package.json

// package.json
{
    "scripts": {
        ...more scripts,
        "translate": "node src/utils/translate.js"
    }
}

run get translations

npm run translate

export all translations in index.ts

// in folderSave create (index.ts) and export your translation json

import en from './en.json';
import es from './es.json';
import fr from './fr.json';


export const resources = {
	en: {
		translation: en,
	},
	es: {
		translation: es,
	},
	fr: {
		translation: fr,
	},
};

create i18nConfig.js ot i18nConfig.ts

// ./i18nConfig.ts
export const i18nConfig = {
    locales: ['en', 'es','fr'], // add your translations
    defaultLocale: 'es', // add your default translation
    localeDetection: true
}

add middleware

// ./src/middleware.ts
import { i18nRouter } from "next-i18n-router";
import i18nConfig from'../i18nConfig'

export function middleware(req: any){
    return i18nRouter(req, i18nConfig)
}

export const config = {
    matcher:  "/((?!api|static|.*\\..*|_next).*)"
}

make folder [locale] in folder app
- basic structure src/app/[locale]
move all files in folder [locale]

src/app/[locale]

src/app/[locale]/layout.tsx

src/app/[locale]/page.tsx

src/app/[locale]/about/page.tsx

src/app/[locale]... and more pages...
implement Provider

// src/app/[locale]/layout.tsx

import { TranslationsProvider } from "@neiderruiz/translate-files/next-js";
//const folderSave = './src/service/languages';
// import of folderSave resources
import { resources } from "./src/service/languages"
//or
import { resources } from "@/service/languages"

import i18nConfig from "../../../i18nConfig";

type Props ={
  children: React.ReactNode;
  params: {
    locale: string
  }
}

export default function RootLayout({
  children,
  params: { locale }
}: Readonly<Props>) {
  return (
    <html lang={locale}>
      <body>
        <TranslationsProvider
          locale={locale}
          fallbackLng={i18nConfig.locales}
          resources={resources}
        >
          {children}
        </TranslationsProvider>
      </body>
    </html>
  );
}

Create custom hook autocomplete

// ./src/hooks/useTranslation.tsx
import { FlattenKeys, useTypedTranslation } from '@neiderruiz/translate-files/next-js/hooks';
import en from '@/service/languages/en.json';
type Tylelang = typeof en

export type KeysTranslation = FlattenKeys<Tylelang>

const useTranslation = () => {
    return {
        ...useTypedTranslation<Tylelang>()
    }
}

export default useTranslation

how use

// ./src/[locale]/about/page.tsx
"use client"
import useTranslation from '@/hooks/useTranslation';
import Link from 'next/link';

const Page = () => {
    const { t, i18n } = useTranslation();

    return <div>
        <h1>{t('actions.welcome')}</h1>     
            <Link href={`/${i18n.language}/home`}>
                frances
            </Link>

            <Link href={`/fr/home`}>
                frances
            </Link>
            <Link href={'/en/home'}>
                ingles
            </Link>
            <Link href={'/es/home'}>
                Español
            </Link>
    </div>
}

@neiderruiz/translate-files

🚀 Welcome translate files!

Internationalize your website or app in a simple way 🇨🇴 🇺🇸 🇩🇪

✅ Let's speak in the same language!

📖 Table of Contents

1. Install

generate

🛑 If you already have a json with your translations you can use it as a base!

2. configure translations

Open url and duplicate file in your google drive.

Share document

implement in React Js

install package

implement in Astro

install packages

implement in NextJs

install packages

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

@neiderruiz/translate-files

🚀 Welcome translate files!

Internationalize your website or app in a simple way 🇨🇴 🇺🇸 🇩🇪

✅ Let's speak in the same language!

📖 Table of Contents

1. Install

generate

🛑 If you already have a json with your translations you can use it as a base!

2. configure translations

Open url and duplicate file in your google drive.

Share document

implement in React Js

install package

implement in Astro

install packages

implement in NextJs

install packages

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads