Support multiple languages, with your app code becoming simpler instead of more complex.
📣 Support for Next.js 13 and the app directory is coming →import {useTranslations, useIntl} from 'next-intl'; function UserDetails({user}) { const t = useTranslations('UserDetails'); const intl = useIntl(); return ( <section> <h2>{t('title')}</h2> <p>{t('followers', {count: user.followers.length})}</p> <p>{t('lastSeen', {time: intl.formatRelativeTime(user.lastSeen)})</p> <Image alt={t('portrait', {username: user.name})} src={user.portrait} /> </section> );}
{ "UserDetails": { "title": "User details", "followers": "{count, plural, ↵ =0 {No followers yet} ↵ =1 {One follower} ↵ other {# followers} ↵ }",
Localize your messages with interpolation, plurals, ordinal pluralization, enum-based label selection, and rich text.
// "Feb 28, 2023"intl.formatDateTime(lastSeen, 'medium'); // "2 hours ago"intl.formatRelativeTime(lastSeen); // "$1,499.90"intl.formatNumber(1499.9, {style: 'currency', currency: 'USD'});
Use global formats for a consistent look & feel of your app and apply fine-tuning as necessary.
Found 1 error in UserDetails.tsx:13 <h1>{t('titel')}</h1> ~~~~~~~ Argument of type "titel" is not assignableto parameter of type "title" | "description".
Speed up development with autocompletion for message keys and catch typos early with compile-time checks.
const t = useTranslations('UserDetails');t('title'); // stringt.rich('bio'); // ReactNode const intl = useIntl();const timeZone = useTimeZone();const locale = useLocale();const now = useNow();
Learn a single API that can be used across your code base, from components accepting children to string attributes.
$ next build Route (pages) Size First Load JS┌ ● / 637 B 90.1 kB├ ● /about 512 B 92.5 kB└ ● /contact 931 B 91.2 kB ● (SSG) automatically generated as static HTML + JSON
Get the best performance from your app by supporting internationalization on both static and dynamic pages.
Intl.LocaleIntl.DateTimeFormatIntl.NumberFormatIntl.PluralRulesIntl.RelativeTimeFormat IntlMessageformat
Use the best parts of built-in JavaScript APIs and supplemental lower-level APIs from Format.JS.