@matali/next-translate-ts v0.3.0
Table of Contents
About
The main goal of this library is to provide the best possible developer experience when using next-translate.
Next-translate-ts is a Node.js command line tool that generates types based on your next-translate configuration to produce a fully-typed API.
Features
- ✅
useTranslation
- ✅
getT
- ❌
withTranslaion
- ❌
Trans
- ❌
DynamicNamespaces
- ❌
I18nProvider
- ❌
appWithI18n
- ❌
loadNamespaces
How are types generated?
Next-translate-ts will look for your next-translate configuration file (either i18n.js
or i18n.json
) and try to deduce where your namespaces files are located.
In order to do this we use configuration file to extract the path from loadLocaleFrom
method. Default fallback path ("/locales/<locale>/<namespace>.json"
) will be used in case of a failure.
When the path is obtained, next-translate-ts will read the keys inside of your namespaces files and generate fully-typed equivalents of next-translate's functions in the designated directory.
Getting started
Prerequisites
- Node.js
- npm
- Next.js TypeScript project with next-translate library installed.
Installation
Install next-translate-ts as a development dependency.
npm install @matali/next-translate-ts --save-dev
or
yarn add @matali/next-translate-ts --dev
Usage
Run next-translate-ts
. Make sure you are executing the command from the root directory of your Next.js project.
npx @matali/next-translate-ts -o path/to/your/output/directory
Use translations in your pages and components by importing from the designated directory.
import { useTranslation } from "path/to/your/output/directory";
export default function ExamplePage() {
const { lang, t } = useTranslation("common");
const example = t("variable-example", { count: 42 });
return <div>{example}</div>; // <div>Using a variable 42</div>
}
Configuration
Camel case
Use camelCase
for file names.
npx @matali/next-translate-ts [--camel|-c]
Default snake-case
naming convention for file names can be replaced with camelCase
to better suit project's style.
Example
npx @matali/next-translate-ts -c -o src/nextTranslate
Default | Type |
---|---|
undefined | boolean \| undefined |
Input path
Specify the location of namespaces files.
npx @matali/next-translate-ts [--input|-i] <path>
When the configuration file contains loadLocaleFrom
method that doesn't load namespaces files through dynamic import()
function with template literal path as an argument, next-translate-ts will be unable to extract a correct path and will fallback to the default one. This option can be used to specify a different path instead.
For next-translate-ts to know where the input files are and which locales and namespaces do they belong to, it needs a path as a string with interpolated [[[locale]]]
and [[[namespace]]]
variables.
For now, next-translate-ts is only capable of accessing files in your file system.
Example
npx @matali/next-translate-ts -i src/translations/[[[namespace]]]_[[[locale]]].json -o src/modules/i18n
Default | Type |
---|---|
locales/[[[locale]]]/[[[namespace]]].json | string \| undefined |
Output path
Define the output directory.
npx @matali/next-translate-ts [--output|-o] <path>
Required. When the directory does not exist at the given path, it will be recursively created. Please take caution when specifying this path as it will irreversibly override existing files.
Example
npx @matali/next-translate-ts -o src/modules/i18n
Type |
---|
string \| undefined |
Thorough search
Read namespaces files for all locales.
npx @matali/next-translate-ts [--thorough|-t]
By default, next-translate-ts will only read namespaces files for the default locale to save time in projects with many locales. Use this option when more thorough search is desirable.
Example
npx @matali/next-translate-ts -o src/nextTranslate -t
Default | Type |
---|---|
undefined | boolean \| undefined |
Contributing
Next-translate-ts is a result of repeating code across some of my projects. I will be adding support for more features if I find the need to use them. Be aware that this is my first package and the quality of the code is not ideal. You are welcome to make improvements by contributing to this project. To find out more, please see CONTRIBUTING.md.
Authors
- Mateusz Aliyev (@mateuszaliyev)
License
Next-translate-ts is licensed under the MIT license.