ESLint

To ensure correct usage of next-intl, you can use ESLint to enforce certain rules.

Avoid hardcoded labels in component markup

The react/jsx-no-literals (opens in a new tab) rule from eslint-plugin-react (opens in a new tab) can be helpful with spotting hardcoded labels in component markup. This can be especially helpful when migrating a project to next-intl, if you want to make sure that all labels have been extracted.

// ...
 
  rules: {
    // Avoid hardcoded labels
    'react/jsx-no-literals': 'error'
  }

Be careful though that this doesn't catch hardcoded attributes (e.g. aria-label="Open menu").

Consistent usage of navigation APIs

If you are using i18n routing, you might want to ensure that developers consistently use the navigation APIs that you've configured in your project.

In this example, developers will be prompted to import from @/navigation when they try to import navigation APIs from Next.js.

// ...
 
  rules: {
    // Consistently import navigation APIs from `@/navigation`
    'no-restricted-imports': [
      'error',
      {
        name: 'next/link',
        message: 'Please import from `@/navigation` instead.'
      },
      {
        name: 'next/navigation',
        importNames: ['redirect', 'permanentRedirect', 'useRouter', 'usePathname'],
        message: 'Please import from `@/navigation` instead.'
      }
    ]
  }