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


#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": "",
  "sourceLanguageTag": "en",
  "languageTags": [
    "en", "de"
  "modules": [
  "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.


Edit on GitHub


Read more: