Skip to content
3.0 preview (see announcement)
Docs
FAQ

FAQ

What trade-offs does this library make?

If you bundle next-intl for the client side (which you don't have to), the bundle size comes in at ~14kB gzipped (opens in a new tab) which is the tradeoff that's necessary for supporting all the included i18n features. There are smaller libraries for internationalization, but they typically cover less features.

If you don't need all features of next-intl, you can reduce the bundle size with tree shaking. Furthermore if native Intl.MessageFormat (opens in a new tab) lands in JavaScript in the future, we might be able to reduce the bundle size significantly.

Generally, it's recommended to handle internationalization in Server Components to avoid bundling next-intl for the client side in the first place.

How is this library different from using react-intl?

  1. This library offers tight integration with Next.js, e.g. through the routing integration and Server Components support.
  2. This library offers a hooks-only API for message consumption. The reason for this is that the same API can be used for attributes as well as children.
  3. This library is built around the concept of namespaces and that components consume a single namespace—however this is not required.
  4. This library currently doesn't support AST-based extraction like react-intl. Note that building ASTs for messages upfront can help with runtime performance, but in exchange your bundle size might grow.
  5. This library is a bit smaller in size (next-intl (opens in a new tab) vs react-intl (opens in a new tab) on BundlePhobia).
  6. This library offers type safety for message keys.

Can next-intl be used with Jest and Storybook?

Yes. These environments pose the challenge that components render in isolation and therefore relevant providers might be missing. To fix this, you should wrap the component with NextIntlClientProvider.

Please see the Jest example (opens in a new tab) to explore a working setup. For Storybook, you have to add a global decorator (opens in a new tab) that configures the provider.

Can next-intl be used without Next.js?

Yes, see use-intl (opens in a new tab).

Can next-intl be used with Remix (opens in a new tab)?

Yes, see the Remix example (opens in a new tab).

Can next-intl be used with React Native (opens in a new tab)?

Yes, see the React Native example (opens in a new tab). Please double check that the runtime requirements are fulfilled.