Setting Up next-intl with IDE Extension.

I'll walk you through the integration of the next-intl internationalization library with inlang's IDE extension.

Nils Jacobsen

image

#What is this about?

In this guide, I'll walk you through the seamless integration of the next-intl internationalization library with your favorite IDE extension. This powerful combination, featuring next-intl and an IDE extension, enhances your development workflow, offering i18n management for Next.js projects.

#Why Choose the IDE Extension and next-intl Combo?

The synergy of the next-intl i18n library and an IDE extension provides a robust solution for internationalization in Next.js. Here's why it's a winning combination:

  • Extract translations: via the Inlang: Extract Message code action.
  • Translation Linting: Get notified about missing translations and other issues directly in your IDE.
  • Inline Annotations: See translations directly in your code.
  • Update Translations: Translations from the resource files are automatically updated when you change the source text.

#Let's Get Started:

#1. Add the settings.json file:


  • Ensure you have a working next-intl project. You could also find examples here
  • Add a project.inlang folder on the root
  • Copy the following settings.json file to that new dir project.inlang/settings.json.
{
  "$schema": "https://inlang.com/schema/project-settings",
  "sourceLanguageTag": "en",
  "languageTags": [
    "en", "de"
  ],
  "modules": [
    "https://cdn.jsdelivr.net/npm/@inlang/plugin-next-intl@latest/dist/index.js",
    "https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-empty-pattern@latest/dist/index.js",
    "https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-identical-pattern@latest/dist/index.js",
    "https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-missing-translation@latest/dist/index.js",
    "https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-without-source@latest/dist/index.js"
  ],
  "plugin.inlang.nextIntl": {
    "pathPattern": "./messages/{languageTag}.json"
  }
}

Adjust languageTags, and the path to your translations if needed. The plugin-next-intl is a plugin to make next-intl ecosystem compatible with inlang. For further configuration read the documentation.

#2. Install the IDE Extension:


  • Install the IDE extension from the vscode marketplace
  • Reload the VS Code window to activate the extension.

#Usage:



Edit on GitHub

Keywords

Read more: