Setting Up next-intl with the Sherlock VS Code extension.

#What is this about?

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

#Main Links:

#Why Choose Sherlock and next-intl together?

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 Sherlock: 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 Sherlock:

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

#Usage:

• Visit the ide-extension documenation
• Visit the next-intl documenation