Messages

Basic usage

Inside getTranslations or useTranslations pass the namespace of the message.

import { getTranslations } from 'next-intl/server';
 
export const ExampleComponent = async () => {
  const t = await getTranslations('welcome.home'); 
 
  return <div>{t('hello')}</div>;
};

Example of usage

Dynamic values

en.json

"message": "Hello {name}!"

t('message', { name: 'Jane' }); // "Hello Jane!"

Pluralization

en.json

"message": "You have {count, plural, one {# message} other {# messages}}"

t('message', { count: 1 }); // "You have 1 message"
t('message', { count: 2 }); // "You have 2 messages"

Rich text

en.json

{
  "message": "Please refer to <guidelines>the guidelines</guidelines>."
}

// Returns `<>Please refer to <a href="/guidelines">the guidelines</a>.</>`
t.rich('message', {
  guidelines: chunks => <a href="/guidelines">{chunks}</a>,
});

next-intl Docs

For more information, check the next-intl documentation.

Basic usage

Example of usage

Dynamic values

Pluralization

Rich text

next-intl Docs

On this page