+ Design system +
++ Blue (primary) +
+Gray
++ Title large +
++ Title normal +
+Title description
++ Title caption +
++ Title small +
++ Headline +
++ Headline caption +
+Body large
+Body large muted
++ Body with{' '} + + a link + +
+Body muted
+Label
++ Label muted +
++ Inline code +
++ Title large +
++ Title normal +
+Title description
++ Title caption +
++ Title small +
+Headline
++ Headline caption +
+Body large
+Body large muted
++ Body with{' '} + + a link + +
+Body muted
+Label
++ Label muted +
++ Inline code +
++ Title caption +
++ Title normal +
++ Title description +
++ Title caption +
++ Title normal +
++ Title description +
+
+
+ {children}
+
+
+ );
+}
+
+export function Example({
+ title,
+ children,
+}: {
+ title: string;
+ children: ReactNode;
+}) {
+ return (
+ + Explore translations, formatting, routing, and patterns using Next.js + and next-intl. +
++ {messages.greeting} +
++ {messages.description} +
+{messages.count}
+ {count > 0 && ( + + )} +useState which only
+ work in Client Components.
+
+ Client Components run in the browser and can use interactive
+ features like hooks. With next-intl, you can use the{" "}
+
+ useTranslations()
+ {" "}
+ hook to access translated strings in your interactive components.
+
+ {`'use client';\n\nimport { useTranslations } from 'next-intl';\n\nexport default function Button() {\n const t = useTranslations();\n \n return ;\n}`}
+
+ + Learn more in the{" "} + + next-intl documentation + + . +
+
+ Server Components are components that render exclusively on the
+ server. With next-intl, you can seamlessly use the{" "}
+
+ useTranslations()
+ {" "}
+ hook to access translated strings.
+
+ {`import { useTranslations } from 'next-intl';\n\nexport default function Page() {\n const t = useTranslations();\n return {t('welcome.title')}
;\n}`}
+
+ + Learn more in the{" "} + + next-intl documentation + + . +
++ {exampleMessages.welcome} +
++ {exampleMessages.description} +
+