Introduction

What is AutoI18n For NextJs?

AutoI18n For NextJs is a desktop application designed to handle the internationalization of Next.js projects with a single click. It supports integration with the next-intl library, refactoring code structure, automatically parsing tags to generate internationalization JSON files, multilingual translation, editing existing JSON files, and incremental internationalization of code.

Problems Solved

1. Manual Integration of Multilingual Support is Time-Consuming and Prone to Errors

Manually integrating multilingual support is often time-consuming and prone to failure due to unfamiliarity with the usage or numerous details.

Manual Process:

1. Consult the next-intl library documentation to learn how to integrate it.
2. Manually add necessary configurations to the project.
3. Ensure each component correctly uses internationalization methods.
4. Handle potential errors and conflicts.

Tool Solution:

• Automatic Integration: By selecting the Integrate next-intl option, the tool automatically completes the integration, eliminating the need to learn additional APIs or configurations.

2. Maintenance of Multilingual Content is Time-Consuming and Inefficient

When adding new tags, the manual process is cumbersome and error-prone. You need to manually find JSON files, create unique keys, copy content, update component code, and translate content for each language.

Manual Process:

1. Locate the default language JSON file.
2. Create a unique key for the new tag.
3. Copy content into the key’s value.
4. Modify component code to use the new key with the t function.
5. Copy and translate the new key and value for other languages.

Tool Solution:

• Automatic Parsing and Translation: The tool handles all tedious processes through code parsing and translation engines with a single click on “Submit.”

3. Modification Process is Cumbersome and Prone to Errors

When adjusting interface text, manual copy-pasting and translating are error-prone, especially with large amounts of text.

Manual Process:

1. Manually find and modify content in JSON files.
2. Copy and translate content into various language files.
3. Save and verify all changes are correct.

Tool Solution:

• Editor Function: Provides an editor based on the default language JSON file for bulk content modifications. After confirmation, the tool automatically translates and updates the content, avoiding manual errors.

Advantages

1. Fast Multilingual Integration: Integrate multilingual support instantly without the errors associated with manual integration.
2. High Development Efficiency: Automatically parse and translate code without manual tag changes and translation content.
3. High Maintenance Efficiency: Automatically handle translations and storage through the JSON editor function, avoiding errors from manual operations.
4. Zero Coupling: The project is based entirely on the next-intl library with no encapsulation, ensuring safe and reliable usage.

Principles

AutoI18n For NextJs uses nodejs file reading libraries, babel parsing libraries, and third-party translation APIs (such as Azure Translate, Google Translate, DeepL, etc.) to automate code and translation content processing.

Usage

After installation, the tool is ready to use with no additional setup required. Refer to the following sections for an overview and introduction to various features. Descriptions and functionalities may vary slightly due to updates, so please refer to the latest version of the application for the most accurate information.

Main Configuration

Select Project

First, select the root directory of the project. After selection, the tool will check if the project already has a configuration file.

Note:

• Ensure the code is saved or committed locally before selecting a project to allow rollback.
• The selected project must be based on the Next.js framework with App Router; other projects are not supported.
• Ensure the project does not integrate other internationalization libraries (such as react-i18next, React-intl-universal, react-intl). Projects supporting manual integration of next-intl are acceptable.

Language Options

1. Select Default Language

Choose the default language based on the actual default language of the project. The default language is the language of the text included in the code; selecting incorrectly will lead to translation failures.

Note: The automatic detection feature is not used as the text may contain multiple languages, and manual selection is more accurate.

2. Select Required Languages

Select the languages needed according to the project requirements. Avoid selecting too many languages initially, as translation APIs have rate and text volume limits. Large text volumes might cause translation failures or rate limits. It is recommended to translate only one additional language initially and add more later.

3. Brand Terms

Enter brand terms here; these terms will be skipped during translation to ensure brand consistency and accuracy.

4. Files or Folders Not to Move

If there are files whose access paths should not be changed to /eng/lib/foo but kept as /lib/foo, enter these folder names here. These folders will be skipped when moving folders during the initial integration of next-intl. The api directory is ignored by default and does not need to be filled in.

Translation Options

Currently, there are three options:

• Select: Translate only content checked or modified in the “Editor.”
• Incremental (default): Process newly added tags or components without re-translating existing content.
• All: Perform a full translation of all content. This option is not recommended for large text volumes to avoid hitting API limits.

Integration Options

Integration options are used for initial configuration and debugging of next-intl multilingual stages. No need to integrate again after normal use.

• Reintegrate NextIntl: Use when initial configuration or configuration is confused. Do not check for manually integrated projects.
• Enable Static Rendering: Ensure static rendering of multilingual content during server-side rendering. For details, refer to official documentation.
• Enable Subpage Locale Redirection: Recommended to enable. For example, accessing /about will redirect to /eng/about. For details, refer to official documentation.
• Disable Default Language Redirection: Do not add /en prefix for default language to maintain SEO data. For details, refer to official documentation.

Submit

Note: Make sure to save or commit the code to avoid issues that cannot be rolled back.

Click the Submit button, and the tool will automatically process the configuration content. The first submission will generate a configuration file named "auto-i18n-config.json," declaring the multilingual configuration of the current project, which can be committed to version control systems.

Submit Results Display

After submission, the processing log will be displayed.

Submit Errors

If an error occurs, follow the prompt to fix the issue if it can be resolved. If the error cannot be fixed or is suspected to be a tool issue, click Click Me, Feedback The Error to submit the error to the developer. If logged in at http://autoi18n.dev, the error information and email will be automatically included; otherwise, manually enter your email and name before submitting.

Preview Interface

Click to automatically open the browser and visit: http://localhost:3000.

Default Locale JSON Editor Function Introduction

Selective Translation

You can select multiple content items to be re-translated by checking the boxes in front of the rows. Click “Confirm Selection or Edit” at the bottom of the interface to save temporarily.

Modify Label Or Content

Through the JSON editor, you can edit the default language JSON of the project:

During editing, you can perform the following operations:

• Undo, Redo, Reset
• Quickly locate content that needs to be changed through search

After completing modifications, click “Confirm Selection or Edit” at the bottom of the interface to save temporarily. Only after submission will the changes be processed, and all changes or selected content will be automatically handled and translated when returning to the home page and submitting.

Other

FAQ

The FAQ section in the application describes common issues and solutions. It is recommended to browse this section before use.

About

The About section in the application includes current application information, version information, and other details. You can manually check for updates and find contact information and feedback options.