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.

Messages

Basic usage

Example of usage

Dynamic values

Pluralization

Rich text

next-intl Docs

On this page