, 'children'>;
8 |
9 | export default function RichText({children, ...rest}: Props) {
10 | return (
11 |
12 | {children({
13 | b: (chunks: ReactNode) => {chunks},
14 | i: (chunks: ReactNode) => {chunks}
15 | })}
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/examples/example-app-router-playground/src/components/client/01-MessagesAsPropsCounter/ClientCounter.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import {useState} from 'react';
4 |
5 | type Props = {
6 | messages: {
7 | count: string;
8 | increment: string;
9 | };
10 | };
11 |
12 | export default function ClientCounter({messages}: Props) {
13 | const [count, setCount] = useState(0);
14 |
15 | function onIncrement() {
16 | setCount(count + 1);
17 | }
18 |
19 | return (
20 |
21 |
22 | {messages.count} {count}
23 |
24 |
27 |
16 |
{t('count', {count: String(count)})}
17 |
20 |
{t('description')}
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/examples/example-app-router-single-locale/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import {NextIntlClientProvider} from 'next-intl';
2 | import {getLocale} from 'next-intl/server';
3 | import {ReactNode} from 'react';
4 |
5 | type Props = {
6 | children: ReactNode;
7 | };
8 |
9 | export default async function LocaleLayout({children}: Props) {
10 | const locale = await getLocale();
11 |
12 | return (
13 |
14 |
15 | next-intl
16 |
17 |
18 | {children}
19 |
20 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/examples/example-app-router-single-locale/src/app/page.tsx:
--------------------------------------------------------------------------------
1 | import Link from 'next/link';
2 | import {useTranslations} from 'next-intl';
3 | import PageLayout from '@/components/PageLayout';
4 |
5 | export default function Index() {
6 | const t = useTranslations('Index');
7 |
8 | return (
9 |
10 | {t('description')}
11 | {t('navigateToAbout')}
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/examples/example-app-router-single-locale/src/components/PageLayout.tsx:
--------------------------------------------------------------------------------
1 | import {ReactNode} from 'react';
2 |
3 | type Props = {
4 | children?: ReactNode;
5 | title: string;
6 | };
7 |
8 | export default function PageLayout({children, title}: Props) {
9 | return (
10 | <>
11 |
18 |
19 |
{title}
20 | {children}
21 |
22 |
{t('title')}
7 | );
8 | }
9 |
--------------------------------------------------------------------------------
/examples/example-app-router-without-i18n-routing/src/app/app/profile/page.tsx:
--------------------------------------------------------------------------------
1 | import {useTranslations} from 'next-intl';
2 |
3 | export default function ProfilePage() {
4 | const t = useTranslations('ProfilePage');
5 | return (
6 | {t('title')}
7 | );
8 | }
9 |
--------------------------------------------------------------------------------
/examples/example-app-router-without-i18n-routing/src/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | * {
6 | -webkit-font-smoothing: antialiased;
7 | @apply outline-sky-600;
8 | }
9 |
--------------------------------------------------------------------------------
/examples/example-app-router-without-i18n-routing/src/app/page.tsx:
--------------------------------------------------------------------------------
1 | import {redirect} from 'next/navigation';
2 |
3 | export default function IndexPage() {
4 | redirect('/login');
5 | }
6 |
--------------------------------------------------------------------------------
/examples/example-app-router-without-i18n-routing/src/components/Button.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import {ComponentProps} from 'react';
4 | import {useFormStatus} from 'react-dom';
5 |
6 | export default function Button(props: ComponentProps<'button'>) {
7 | const {pending} = useFormStatus();
8 |
9 | return (
10 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/examples/example-app-router-without-i18n-routing/src/components/LocaleSwitcher.tsx:
--------------------------------------------------------------------------------
1 | import {useLocale, useTranslations} from 'next-intl';
2 | import LocaleSwitcherSelect from './LocaleSwitcherSelect';
3 |
4 | export default function LocaleSwitcher() {
5 | const t = useTranslations('LocaleSwitcher');
6 | const locale = useLocale();
7 |
8 | return (
9 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/examples/example-app-router-without-i18n-routing/src/i18n/config.ts:
--------------------------------------------------------------------------------
1 | export type Locale = (typeof locales)[number];
2 |
3 | export const locales = ['en', 'de'] as const;
4 | export const defaultLocale: Locale = 'en';
5 |
--------------------------------------------------------------------------------
/examples/example-app-router-without-i18n-routing/src/i18n/request.ts:
--------------------------------------------------------------------------------
1 | import {getRequestConfig} from 'next-intl/server';
2 | import {getUserLocale} from '../services/locale';
3 |
4 | export default getRequestConfig(async () => {
5 | const locale = await getUserLocale();
6 |
7 | return {
8 | locale,
9 | messages: (await import(`../../messages/${locale}.json`)).default
10 | };
11 | });
12 |
--------------------------------------------------------------------------------
/examples/example-app-router-without-i18n-routing/src/services/locale.ts:
--------------------------------------------------------------------------------
1 | 'use server';
2 |
3 | import {cookies} from 'next/headers';
4 | import {Locale, defaultLocale} from '@/i18n/config';
5 |
6 | // In this example the locale is read from a cookie. You could alternatively
7 | // also read it from a database, backend service, or any other source.
8 | const COOKIE_NAME = 'NEXT_LOCALE';
9 |
10 | export async function getUserLocale() {
11 | return (await cookies()).get(COOKIE_NAME)?.value || defaultLocale;
12 | }
13 |
14 | export async function setUserLocale(locale: Locale) {
15 | (await cookies()).set(COOKIE_NAME, locale);
16 | }
17 |
--------------------------------------------------------------------------------
/examples/example-app-router-without-i18n-routing/src/services/session.ts:
--------------------------------------------------------------------------------
1 | export async function loginUser(credentials: {
2 | email: string;
3 | password: string;
4 | }) {
5 | // In a real app, the credentials would be checked against a
6 | // database and potentially a session token set in a cookie
7 | return new Promise((resolve) => {
8 | setTimeout(() => {
9 | resolve(
10 | credentials.email === 'jane@doe.com' &&
11 | credentials.password === 'next-intl'
12 | );
13 | }, 1000);
14 | });
15 | }
16 |
--------------------------------------------------------------------------------
/examples/example-app-router-without-i18n-routing/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | content: ['./src/**/*.{js,ts,jsx,tsx}'],
4 | theme: {
5 | extend: {}
6 | },
7 | plugins: []
8 | };
9 |
--------------------------------------------------------------------------------
/examples/example-app-router-without-i18n-routing/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "strict": true,
6 | "allowJs": true,
7 | "skipLibCheck": true,
8 | "noEmit": true,
9 | "esModuleInterop": true,
10 | "module": "esnext",
11 | "moduleResolution": "node",
12 | "resolveJsonModule": true,
13 | "isolatedModules": true,
14 | "jsx": "preserve",
15 | "incremental": true,
16 | "plugins": [
17 | {
18 | "name": "next"
19 | }
20 | ],
21 | "paths": {
22 | "@/*": ["./src/*"]
23 | },
24 | "strictNullChecks": true
25 | },
26 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
27 | "exclude": ["node_modules"]
28 | }
29 |
--------------------------------------------------------------------------------
/examples/example-app-router/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | /.next/
3 | .DS_Store
4 | tsconfig.tsbuildinfo
5 | /test-results/
6 | /playwright-report/
7 | /playwright/.cache/
8 | out
9 | messages/en.d.json.ts
10 |
--------------------------------------------------------------------------------
/examples/example-app-router/README.md:
--------------------------------------------------------------------------------
1 | # example-app-router
2 |
3 | An example that showcases basic usage of `next-intl` with the App Router, including internationalized routing.
4 |
5 | [Demo](https://next-intl-example-app-router.vercel.app/)
6 |
7 | ## Deploy your own
8 |
9 | By deploying to [Vercel](https://vercel.com), you can check out the example in action. Note that you'll be prompted to create a new GitHub repository as part of this, allowing you to make subsequent changes.
10 |
11 | [](https://vercel.com/new/clone?repository-url=https://github.com/amannn/next-intl/tree/main/examples/example-app-router)
12 |
--------------------------------------------------------------------------------
/examples/example-app-router/eslint.config.mjs:
--------------------------------------------------------------------------------
1 | import {dirname} from 'path';
2 | import {fileURLToPath} from 'url';
3 | import {FlatCompat} from '@eslint/eslintrc';
4 |
5 | const __filename = fileURLToPath(import.meta.url);
6 | const __dirname = dirname(__filename);
7 |
8 | const compat = new FlatCompat({
9 | baseDirectory: __dirname
10 | });
11 |
12 | const eslintConfig = [
13 | ...compat.extends('next/core-web-vitals', 'next/typescript'),
14 | {
15 | rules: {
16 | '@typescript-eslint/no-explicit-any': 'off'
17 | }
18 | }
19 | ];
20 |
21 | export default eslintConfig;
22 |
--------------------------------------------------------------------------------
/examples/example-app-router/global.ts:
--------------------------------------------------------------------------------
1 | import {routing} from '@/i18n/routing';
2 | import messages from './messages/en.json';
3 |
4 | declare module 'next-intl' {
5 | interface AppConfig {
6 | Locale: (typeof routing.locales)[number];
7 | Messages: typeof messages;
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/examples/example-app-router/jest.config.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 | const nextJest = require('next/jest');
3 |
4 | const createJestConfig = nextJest({dir: './'});
5 |
6 | module.exports = async () => ({
7 | ...(await createJestConfig({
8 | testEnvironment: 'jsdom',
9 | rootDir: 'src'
10 | })()),
11 | transformIgnorePatterns: ['node_modules/(?!next-intl)/']
12 | });
13 |
--------------------------------------------------------------------------------
/examples/example-app-router/next-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 | ///
3 |
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
6 |
--------------------------------------------------------------------------------
/examples/example-app-router/next.config.ts:
--------------------------------------------------------------------------------
1 | import {NextConfig} from 'next';
2 | import createNextIntlPlugin from 'next-intl/plugin';
3 |
4 | const withNextIntl = createNextIntlPlugin({
5 | experimental: {
6 | createMessagesDeclaration: './messages/en.json'
7 | }
8 | });
9 |
10 | const config: NextConfig = {};
11 |
12 | export default withNextIntl(config);
13 |
--------------------------------------------------------------------------------
/examples/example-app-router/playwright.config.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable import/no-extraneous-dependencies */
2 | import type {PlaywrightTestConfig} from '@playwright/test';
3 | import {devices} from '@playwright/test';
4 |
5 | // Use a distinct port on CI to avoid conflicts during concurrent tests
6 | const PORT = process.env.CI ? 3001 : 3000;
7 |
8 | const config: PlaywrightTestConfig = {
9 | retries: process.env.CI ? 1 : 0,
10 | testDir: './tests',
11 | projects: [
12 | {
13 | name: 'chromium',
14 | use: devices['Desktop Chrome']
15 | }
16 | ],
17 | fullyParallel: true,
18 | webServer: {
19 | command: `PORT=${PORT} pnpm start`,
20 | port: PORT,
21 | reuseExistingServer: true
22 | }
23 | };
24 |
25 | export default config;
26 |
--------------------------------------------------------------------------------
/examples/example-app-router/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {}
5 | }
6 | };
7 |
--------------------------------------------------------------------------------
/examples/example-app-router/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/amannn/next-intl/9c837d654703507a510278a616490db4bdd0469b/examples/example-app-router/public/favicon.ico
--------------------------------------------------------------------------------
/examples/example-app-router/src/app/[locale]/[...rest]/page.tsx:
--------------------------------------------------------------------------------
1 | import {notFound} from 'next/navigation';
2 |
3 | export default function CatchAllPage() {
4 | notFound();
5 | }
6 |
--------------------------------------------------------------------------------
/examples/example-app-router/src/app/[locale]/not-found.tsx:
--------------------------------------------------------------------------------
1 | // Note that `app/[locale]/[...rest]/page.tsx`
2 | // is necessary for this page to render.
3 |
4 | export {default} from '@/components/NotFoundPage';
5 |
--------------------------------------------------------------------------------
/examples/example-app-router/src/app/[locale]/styles.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
--------------------------------------------------------------------------------
/examples/example-app-router/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import {ReactNode} from 'react';
2 |
3 | type Props = {
4 | children: ReactNode;
5 | };
6 |
7 | // Since we have a `not-found.tsx` page on the root, a layout file
8 | // is required, even if it's just passing children through.
9 | export default function RootLayout({children}: Props) {
10 | return children;
11 | }
12 |
--------------------------------------------------------------------------------
/examples/example-app-router/src/app/manifest.ts:
--------------------------------------------------------------------------------
1 | import {MetadataRoute} from 'next';
2 | import {getTranslations} from 'next-intl/server';
3 | import {routing} from '@/i18n/routing';
4 |
5 | export default async function manifest(): Promise {
6 | const t = await getTranslations({
7 | locale: routing.defaultLocale,
8 | namespace: 'Manifest'
9 | });
10 |
11 | return {
12 | name: t('name'),
13 | start_url: '/',
14 | theme_color: '#101E33'
15 | };
16 | }
17 |
--------------------------------------------------------------------------------
/examples/example-app-router/src/app/not-found.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import Error from 'next/error';
4 |
5 | // This page renders when a route like `/unknown.txt` is requested.
6 | // In this case, the layout at `app/[locale]/layout.tsx` receives
7 | // an invalid value as the `[locale]` param and calls `notFound()`.
8 |
9 | export default function GlobalNotFound() {
10 | return (
11 |
12 |
13 | ;
14 |
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/examples/example-app-router/src/app/page.tsx:
--------------------------------------------------------------------------------
1 | import {redirect} from 'next/navigation';
2 |
3 | // This page only renders when the app is built statically (output: 'export')
4 | export default function RootPage() {
5 | redirect('/en');
6 | }
7 |
--------------------------------------------------------------------------------
/examples/example-app-router/src/app/robots.txt:
--------------------------------------------------------------------------------
1 | User-Agent: *
2 | Allow: *
3 |
--------------------------------------------------------------------------------
/examples/example-app-router/src/components/ExternalLink.tsx:
--------------------------------------------------------------------------------
1 | type Props = {
2 | title: string;
3 | description: string;
4 | href: string;
5 | };
6 |
7 | export default function ExternalLink({description, href, title}: Props) {
8 | return (
9 |
15 |
16 | {title} →
17 |
18 | {description}
19 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/examples/example-app-router/src/components/LocaleSwitcher.tsx:
--------------------------------------------------------------------------------
1 | import {useLocale, useTranslations} from 'next-intl';
2 | import {routing} from '@/i18n/routing';
3 | import LocaleSwitcherSelect from './LocaleSwitcherSelect';
4 |
5 | export default function LocaleSwitcher() {
6 | const t = useTranslations('LocaleSwitcher');
7 | const locale = useLocale();
8 |
9 | return (
10 |
11 | {routing.locales.map((cur) => (
12 |
15 | ))}
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/examples/example-app-router/src/components/Navigation.tsx:
--------------------------------------------------------------------------------
1 | import {useTranslations} from 'next-intl';
2 | import LocaleSwitcher from './LocaleSwitcher';
3 | import NavigationLink from './NavigationLink';
4 |
5 | export default function Navigation() {
6 | const t = useTranslations('Navigation');
7 |
8 | return (
9 |
10 |
17 |
{t('description')}
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/examples/example-app-router/src/config.ts:
--------------------------------------------------------------------------------
1 | export const port = process.env.PORT || 3000;
2 | export const host = process.env.VERCEL_PROJECT_PRODUCTION_URL
3 | ? `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`
4 | : `http://localhost:${port}`;
5 |
--------------------------------------------------------------------------------
/examples/example-app-router/src/i18n/navigation.ts:
--------------------------------------------------------------------------------
1 | import {createNavigation} from 'next-intl/navigation';
2 | import {routing} from './routing';
3 |
4 | export const {Link, getPathname, redirect, usePathname, useRouter} =
5 | createNavigation(routing);
6 |
--------------------------------------------------------------------------------
/examples/example-app-router/src/i18n/request.ts:
--------------------------------------------------------------------------------
1 | import {hasLocale} from 'next-intl';
2 | import {getRequestConfig} from 'next-intl/server';
3 | import {routing} from './routing';
4 |
5 | export default getRequestConfig(async ({requestLocale}) => {
6 | // Typically corresponds to the `[locale]` segment
7 | const requested = await requestLocale;
8 | const locale = hasLocale(routing.locales, requested)
9 | ? requested
10 | : routing.defaultLocale;
11 |
12 | return {
13 | locale,
14 | messages: (await import(`../../messages/${locale}.json`)).default
15 | };
16 | });
17 |
--------------------------------------------------------------------------------
/examples/example-app-router/src/i18n/routing.ts:
--------------------------------------------------------------------------------
1 | import {defineRouting} from 'next-intl/routing';
2 |
3 | export const routing = defineRouting({
4 | locales: ['en', 'de'],
5 | defaultLocale: 'en',
6 | pathnames: {
7 | '/': '/',
8 | '/pathnames': {
9 | de: '/pfadnamen'
10 | }
11 | }
12 | });
13 |
--------------------------------------------------------------------------------
/examples/example-app-router/src/middleware.ts:
--------------------------------------------------------------------------------
1 | import createMiddleware from 'next-intl/middleware';
2 | import {routing} from './i18n/routing';
3 |
4 | export default createMiddleware(routing);
5 |
6 | export const config = {
7 | // Match all pathnames except for
8 | // - … if they start with `/api`, `/trpc`, `/_next` or `/_vercel`
9 | // - … the ones containing a dot (e.g. `favicon.ico`)
10 | matcher: '/((?!api|trpc|_next|_vercel|.*\\..*).*)'
11 | };
12 |
--------------------------------------------------------------------------------
/examples/example-app-router/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "allowArbitraryExtensions": true,
4 | "target": "es5",
5 | "lib": ["dom", "dom.iterable", "esnext"],
6 | "strict": true,
7 | "allowJs": true,
8 | "skipLibCheck": true,
9 | "noEmit": true,
10 | "esModuleInterop": true,
11 | "module": "esnext",
12 | "moduleResolution": "Bundler",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "jsx": "preserve",
16 | "incremental": true,
17 | "plugins": [
18 | {
19 | "name": "next"
20 | }
21 | ],
22 | "paths": {
23 | "@/*": ["./src/*"]
24 | }
25 | },
26 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
27 | "exclude": ["node_modules"]
28 | }
29 |
--------------------------------------------------------------------------------
/examples/example-pages-router-advanced/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | /.next/
3 | .DS_Store
4 | tsconfig.tsbuildinfo
--------------------------------------------------------------------------------
/examples/example-pages-router-advanced/eslint.config.mjs:
--------------------------------------------------------------------------------
1 | import {dirname} from 'path';
2 | import {fileURLToPath} from 'url';
3 | import {FlatCompat} from '@eslint/eslintrc';
4 |
5 | const __filename = fileURLToPath(import.meta.url);
6 | const __dirname = dirname(__filename);
7 |
8 | const compat = new FlatCompat({
9 | baseDirectory: __dirname
10 | });
11 |
12 | const eslintConfig = [
13 | ...compat.extends('next/core-web-vitals', 'next/typescript'),
14 | {
15 | rules: {
16 | '@typescript-eslint/no-explicit-any': 'off'
17 | }
18 | }
19 | ];
20 |
21 | export default eslintConfig;
22 |
--------------------------------------------------------------------------------
/examples/example-pages-router-advanced/global.ts:
--------------------------------------------------------------------------------
1 | import messages from './messages/en.json';
2 |
3 | declare module 'next-intl' {
4 | interface AppConfig {
5 | Messages: typeof messages;
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/examples/example-pages-router-advanced/jest.config.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 | const nextJest = require('next/jest');
3 |
4 | const createJestConfig = nextJest({dir: './'});
5 |
6 | module.exports = async () => ({
7 | ...(await createJestConfig({
8 | testEnvironment: 'jsdom',
9 | rootDir: 'src'
10 | })()),
11 | transformIgnorePatterns: ['node_modules/(?!next-intl)/']
12 | });
13 |
--------------------------------------------------------------------------------
/examples/example-pages-router-advanced/messages/de.json:
--------------------------------------------------------------------------------
1 | {
2 | "About": {
3 | "title": "About",
4 | "lastUpdated": "Dieses Beispiel wurde {lastUpdatedRelative} aktualisiert ({lastUpdated, date, short})."
5 | },
6 | "Index": {
7 | "title": "Start",
8 | "description": "Nur das Minimum an {locale} Übersetzungen sind geladen um diese Seite darzustellen.
Diese Namespaces sind verfügbar:
"
9 | },
10 | "Navigation": {
11 | "index": "Start",
12 | "about": "Über",
13 | "switchLocale": "Zu {locale, select, de {Deutsch} en {Englisch} other {Unbekannt}} wechseln"
14 | },
15 | "NotFound": {
16 | "title": "Entschuldigung, diese Seite konnte nicht gefunden werden."
17 | },
18 | "PageLayout": {
19 | "pageTitle": "next-intl"
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/examples/example-pages-router-advanced/next-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 | ///
3 |
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
6 |
--------------------------------------------------------------------------------
/examples/example-pages-router-advanced/next.config.ts:
--------------------------------------------------------------------------------
1 | import {NextConfig} from 'next';
2 |
3 | const config = {
4 | i18n: {
5 | locales: ['en', 'de'],
6 | defaultLocale: 'en'
7 | }
8 | } satisfies NextConfig;
9 |
10 | export default config;
11 |
--------------------------------------------------------------------------------
/examples/example-pages-router-advanced/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/amannn/next-intl/9c837d654703507a510278a616490db4bdd0469b/examples/example-pages-router-advanced/public/favicon.ico
--------------------------------------------------------------------------------
/examples/example-pages-router-advanced/src/components/Code.tsx:
--------------------------------------------------------------------------------
1 | import {ReactNode} from 'react';
2 |
3 | type Props = {
4 | children: ReactNode;
5 | };
6 |
7 | export default function Code({children}: Props) {
8 | return (
9 |
10 | {children}
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/examples/example-pages-router-advanced/src/pages/404.tsx:
--------------------------------------------------------------------------------
1 | import pick from 'lodash/pick';
2 | import {GetStaticPropsContext} from 'next';
3 | import {useTranslations} from 'next-intl';
4 | import PageLayout from 'components/PageLayout';
5 |
6 | export default function NotFound() {
7 | const t = useTranslations('NotFound');
8 | return ;
9 | }
10 |
11 | NotFound.messages = ['NotFound', ...PageLayout.messages];
12 |
13 | export async function getStaticProps({locale}: GetStaticPropsContext) {
14 | return {
15 | props: {
16 | messages: pick(
17 | (await import(`../../messages/${locale}.json`)).default,
18 | NotFound.messages
19 | )
20 | }
21 | };
22 | }
23 |
--------------------------------------------------------------------------------
/examples/example-pages-router-advanced/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "strict": true,
6 | "baseUrl": "src",
7 | "allowJs": true,
8 | "skipLibCheck": true,
9 | "noEmit": true,
10 | "esModuleInterop": true,
11 | "module": "esnext",
12 | "moduleResolution": "node",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "jsx": "preserve",
16 | "incremental": true
17 | },
18 | "include": ["next-env.d.ts", "**/*.js", "**/*.ts", "**/*.tsx"],
19 | "exclude": ["node_modules"]
20 | }
21 |
--------------------------------------------------------------------------------
/examples/example-pages-router-legacy/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | /.next/
3 | .DS_Store
4 |
--------------------------------------------------------------------------------
/examples/example-pages-router-legacy/README.md:
--------------------------------------------------------------------------------
1 | # example-pages-router-legacy
2 |
3 | This example is used to track legacy support of `next-intl` with Next.js and React.
4 |
5 | ## Deploy your own
6 |
7 | By deploying to [Vercel](https://vercel.com), you can check out the example in action. Note that you'll be prompted to create a new GitHub repository as part of this, allowing you to make subsequent changes.
8 |
9 | [](https://vercel.com/new/clone?repository-url=https://github.com/amannn/next-intl/tree/main/examples/example-pages-router-legacy)
10 |
--------------------------------------------------------------------------------
/examples/example-pages-router-legacy/messages/en.json:
--------------------------------------------------------------------------------
1 | {
2 | "Index": {
3 | "title": "Home",
4 | "description": "This is the home page."
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/examples/example-pages-router-legacy/next.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | i18n: {
3 | defaultLocale: 'en',
4 | locales: ['en']
5 | }
6 | };
7 |
--------------------------------------------------------------------------------
/examples/example-pages-router-legacy/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "example-pages-router-legacy",
3 | "private": true,
4 | "scripts": {
5 | "dev": "next dev",
6 | "lint": "prettier src --check",
7 | "build": "next build",
8 | "start": "next start"
9 | },
10 | "dependencies": {
11 | "next": "^12.0.0",
12 | "react": "^17.0.0",
13 | "react-dom": "^17.0.0",
14 | "next-intl": "^4.0.0"
15 | },
16 | "devDependencies": {
17 | "prettier": "^3.3.3"
18 | },
19 | "prettier": {
20 | "singleQuote": true,
21 | "bracketSpacing": false,
22 | "trailingComma": "none"
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/examples/example-pages-router-legacy/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/amannn/next-intl/9c837d654703507a510278a616490db4bdd0469b/examples/example-pages-router-legacy/public/favicon.ico
--------------------------------------------------------------------------------
/examples/example-pages-router-legacy/src/components/PageLayout.js:
--------------------------------------------------------------------------------
1 | export default function PageLayout({children, title}) {
2 | return (
3 | <>
4 |
11 |
12 |
{title}
13 | {children}
14 |
15 |
{t('description')}
12 |
13 |
14 | );
15 | }
16 |
17 | export async function getStaticProps({locale}: GetStaticPropsContext) {
18 | return {
19 | props: {
20 | messages: (await import(`../../messages/${locale}.json`)).default
21 | }
22 | };
23 | }
24 |
--------------------------------------------------------------------------------
/examples/example-pages-router/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "strict": true,
6 | "baseUrl": "src",
7 | "allowJs": true,
8 | "skipLibCheck": true,
9 | "noEmit": true,
10 | "esModuleInterop": true,
11 | "module": "esnext",
12 | "moduleResolution": "node",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "jsx": "preserve",
16 | "incremental": true
17 | },
18 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
19 | "exclude": ["node_modules"]
20 | }
21 |
--------------------------------------------------------------------------------
/examples/example-react-native/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .expo/
3 | dist/
4 | npm-debug.*
5 | *.jks
6 | *.p8
7 | *.p12
8 | *.key
9 | *.mobileprovision
10 | *.orig.*
11 | web-build/
12 |
13 | # macOS
14 | .DS_Store
15 |
--------------------------------------------------------------------------------
/examples/example-react-native/README.md:
--------------------------------------------------------------------------------
1 | # example-react-native
2 |
3 | An example that showcases the usage of `use-intl` with React Native.
4 |
5 | Please double check that [the runtime requirements](https://next-intl.dev/docs/environments/runtime-requirements) are fulfilled.
6 |
7 | ```
8 | pnpm install
9 |
10 | # Run the app with one of:
11 | pnpm run android
12 | pnpm run ios
13 | pnpm run web
14 | ```
15 |
--------------------------------------------------------------------------------
/examples/example-react-native/assets/adaptive-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/amannn/next-intl/9c837d654703507a510278a616490db4bdd0469b/examples/example-react-native/assets/adaptive-icon.png
--------------------------------------------------------------------------------
/examples/example-react-native/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/amannn/next-intl/9c837d654703507a510278a616490db4bdd0469b/examples/example-react-native/assets/favicon.png
--------------------------------------------------------------------------------
/examples/example-react-native/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/amannn/next-intl/9c837d654703507a510278a616490db4bdd0469b/examples/example-react-native/assets/icon.png
--------------------------------------------------------------------------------
/examples/example-react-native/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/amannn/next-intl/9c837d654703507a510278a616490db4bdd0469b/examples/example-react-native/assets/splash.png
--------------------------------------------------------------------------------
/examples/example-react-native/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = function (api) {
2 | api.cache(true);
3 | return {
4 | presets: ['babel-preset-expo']
5 | };
6 | };
7 |
--------------------------------------------------------------------------------
/examples/example-remix/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
3 | /.cache
4 | /build
5 | /public/build
6 | .env
7 |
--------------------------------------------------------------------------------
/examples/example-remix/README.md:
--------------------------------------------------------------------------------
1 | # example-remix
2 |
3 | An example that showcases a basic installation of `use-intl` in a [Remix app](https://remix.run/).
4 |
5 | The relevant integration code is:
6 |
7 | 1. [Set up translations in `messages/`](./messages/en.json)
8 | 2. [Resolve the user locale based on the `accept-language` header and fetch the relevant messages in `app/root.tsx`](./app/root.tsx#L17)
9 | 3. [Set up `IntlProvider` in `app/root.tsx`](./app/root.tsx#L38)
10 | 4. [Use translations in `app/routes/_index.tsx`](./app/routes/_index.tsx#L4)
11 |
12 | You can run the example locally like this:
13 |
14 | ```
15 | npm install
16 | npm run dev
17 | ```
18 |
--------------------------------------------------------------------------------
/examples/example-remix/app/routes/_index.tsx:
--------------------------------------------------------------------------------
1 | import {useTranslations} from 'use-intl';
2 |
3 | export default function Index() {
4 | const t = useTranslations('Index');
5 |
6 | return (
7 |
14 |
15 |
{t('title')}
16 |
{t('description')}
17 |
18 |
{t('hello', {username: user.name})}
;
12 | }
13 |
--------------------------------------------------------------------------------
/examples/example-use-intl/src/config.tsx:
--------------------------------------------------------------------------------
1 | export const locales = ['en'] as const;
2 |
--------------------------------------------------------------------------------
/examples/example-use-intl/src/main.tsx:
--------------------------------------------------------------------------------
1 | import {StrictMode} from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import {IntlProvider} from 'use-intl';
4 | import en from '../messages/en.json';
5 | import App from './App.tsx';
6 |
7 | // You can get the messages from anywhere you like. You can also
8 | // fetch them from within a component and then render the provider
9 | // along with your app once you have the messages.
10 | const messages = en;
11 |
12 | const node = document.getElementById('root');
13 |
14 | ReactDOM.createRoot(node!).render(
15 |
16 |
17 |
18 |
19 |
20 | );
21 |
--------------------------------------------------------------------------------
/examples/example-use-intl/src/vite-env.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/examples/example-use-intl/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2020",
4 | "useDefineForClassFields": true,
5 | "lib": ["ES2020", "DOM", "DOM.Iterable"],
6 | "strict": true,
7 | "module": "ESNext",
8 | "skipLibCheck": true,
9 | "moduleResolution": "bundler",
10 | "allowImportingTsExtensions": true,
11 | "resolveJsonModule": true,
12 | "isolatedModules": true,
13 | "noEmit": true,
14 | "jsx": "react-jsx"
15 | },
16 | "include": ["src", "global.ts"],
17 | "references": [{"path": "./tsconfig.node.json"}]
18 | }
19 |
--------------------------------------------------------------------------------
/examples/example-use-intl/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "composite": true,
4 | "skipLibCheck": true,
5 | "module": "ESNext",
6 | "moduleResolution": "bundler",
7 | "allowSyntheticDefaultImports": true,
8 | "strict": true
9 | },
10 | "include": ["vite.config.ts"]
11 | }
12 |
--------------------------------------------------------------------------------
/examples/example-use-intl/vite.config.ts:
--------------------------------------------------------------------------------
1 | import react from '@vitejs/plugin-react';
2 | import {defineConfig} from 'vite';
3 |
4 | export default defineConfig({
5 | plugins: [react()]
6 | });
7 |
--------------------------------------------------------------------------------
/lerna.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "node_modules/@lerna-lite/cli/schemas/lerna-schema.json",
3 | "version": "4.1.0",
4 | "packages": [
5 | "packages/*"
6 | ],
7 | "npmClient": "pnpm",
8 | "changelogPreset": "conventional-changelog-conventionalcommits",
9 | "command": {
10 | "publish": {
11 | "removePackageFields": [
12 | "devDependencies",
13 | "prettier"
14 | ],
15 | "yes": true
16 | },
17 | "version": {
18 | "changelogIncludeCommitsClientLogin": " – by @%l",
19 | "conventionalCommits": true,
20 | "createRelease": "github",
21 | "syncWorkspaceLock": true
22 | }
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/media/assets.sketch:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/amannn/next-intl/9c837d654703507a510278a616490db4bdd0469b/media/assets.sketch
--------------------------------------------------------------------------------
/media/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/amannn/next-intl/9c837d654703507a510278a616490db4bdd0469b/media/logo.png
--------------------------------------------------------------------------------
/media/og-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/amannn/next-intl/9c837d654703507a510278a616490db4bdd0469b/media/og-image.png
--------------------------------------------------------------------------------
/media/twitter-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/amannn/next-intl/9c837d654703507a510278a616490db4bdd0469b/media/twitter-image.png
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "root",
3 | "private": true,
4 | "scripts": {
5 | "postinstall": "turbo run build --filter './packages/**'",
6 | "publish": "lerna publish"
7 | },
8 | "devDependencies": {
9 | "@lerna-lite/cli": "3.9.0",
10 | "@lerna-lite/publish": "3.9.0",
11 | "conventional-changelog-conventionalcommits": "7.0.2",
12 | "turbo": "^2.4.4"
13 | },
14 | "pnpm": {
15 | "overrides": {
16 | "@babel/parser": "7.21.9"
17 | }
18 | },
19 | "packageManager": "pnpm@9.11.0"
20 | }
21 |
--------------------------------------------------------------------------------
/packages/next-intl/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 |
--------------------------------------------------------------------------------
/packages/next-intl/config.d.ts:
--------------------------------------------------------------------------------
1 | // Needed for projects with `moduleResolution: 'node'`
2 | import config from './dist/types/config';
3 |
4 | export default config;
5 |
--------------------------------------------------------------------------------
/packages/next-intl/middleware.d.ts:
--------------------------------------------------------------------------------
1 | // Needed for projects with `moduleResolution: 'node'`
2 | import createMiddleware from './dist/types/middleware';
3 |
4 | export default createMiddleware;
5 |
--------------------------------------------------------------------------------
/packages/next-intl/navigation.d.ts:
--------------------------------------------------------------------------------
1 | // Needed for projects with `moduleResolution: 'node'`
2 | export * from './dist/types/navigation.react-client';
3 |
--------------------------------------------------------------------------------
/packages/next-intl/next-env.d.ts:
--------------------------------------------------------------------------------
1 | // Normally Next.js creates this file when the build runs. Seems like from
2 | // Next.js 13.2 on this is mandatory to be able to import `usePathname`.
3 |
4 | ///
5 | ///
6 | ///
7 |
--------------------------------------------------------------------------------
/packages/next-intl/plugin.d.cts:
--------------------------------------------------------------------------------
1 | import createNextIntlPlugin from './dist/types/plugin.ts';
2 |
3 | export = createNextIntlPlugin;
4 |
--------------------------------------------------------------------------------
/packages/next-intl/plugin.d.ts:
--------------------------------------------------------------------------------
1 | // Needed for projects with `moduleResolution: 'node'`
2 | import plugin from './dist/types/plugin';
3 |
4 | export default plugin;
5 |
--------------------------------------------------------------------------------
/packages/next-intl/routing.d.ts:
--------------------------------------------------------------------------------
1 | // Needed for projects with `moduleResolution: 'node'`
2 | export * from './dist/types/routing';
3 |
--------------------------------------------------------------------------------
/packages/next-intl/server.d.ts:
--------------------------------------------------------------------------------
1 | // Needed for projects with `moduleResolution: 'node'`
2 | export * from './dist/types/server/react-server';
3 |
--------------------------------------------------------------------------------
/packages/next-intl/src/config.tsx:
--------------------------------------------------------------------------------
1 | export default function getConfig() {
2 | throw new Error(
3 | "Couldn't find next-intl config file. Please follow the instructions at https://next-intl.dev/docs/getting-started/app-router"
4 | );
5 | }
6 |
--------------------------------------------------------------------------------
/packages/next-intl/src/index.react-client.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * This is the default entry file when consumers import from
3 | * 'next-intl'. We use the client APIs in this case.
4 | *
5 | * Note that the `react-server` environment (i.e. RSC) imports
6 | * from `./react-server` instead.
7 | */
8 |
9 | export * from './react-client/index.js';
10 |
--------------------------------------------------------------------------------
/packages/next-intl/src/index.react-server.tsx:
--------------------------------------------------------------------------------
1 | export * from './react-server/index.js';
2 |
--------------------------------------------------------------------------------
/packages/next-intl/src/middleware.tsx:
--------------------------------------------------------------------------------
1 | export {default} from './middleware/index.js';
2 |
--------------------------------------------------------------------------------
/packages/next-intl/src/middleware/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * The middleware, available as `next-intl/middleware`.
3 | */
4 |
5 | export {default} from './middleware.js';
6 |
--------------------------------------------------------------------------------
/packages/next-intl/src/navigation.react-client.tsx:
--------------------------------------------------------------------------------
1 | export * from './navigation/react-client/index.js';
2 |
--------------------------------------------------------------------------------
/packages/next-intl/src/navigation.react-server.tsx:
--------------------------------------------------------------------------------
1 | export * from './navigation/react-server/index.js';
2 |
--------------------------------------------------------------------------------
/packages/next-intl/src/navigation/react-client/index.tsx:
--------------------------------------------------------------------------------
1 | export {default as createNavigation} from './createNavigation.js';
2 | export type {QueryParams} from '../shared/utils.js';
3 |
--------------------------------------------------------------------------------
/packages/next-intl/src/navigation/react-server/getServerLocale.tsx:
--------------------------------------------------------------------------------
1 | import getConfig from '../../server/react-server/getConfig.js';
2 |
3 | /**
4 | * This is only moved to a separate module for easier mocking in
5 | * `../createNavigatoin.test.tsx` in order to avoid suspending.
6 | */
7 | export default async function getServerLocale() {
8 | const config = await getConfig();
9 | return config.locale;
10 | }
11 |
--------------------------------------------------------------------------------
/packages/next-intl/src/navigation/react-server/index.tsx:
--------------------------------------------------------------------------------
1 | export {default as createNavigation} from './createNavigation.js';
2 | export type {Pathnames} from '../../routing/types.js';
3 |
--------------------------------------------------------------------------------
/packages/next-intl/src/plugin.tsx:
--------------------------------------------------------------------------------
1 | export {default} from './plugin/index.js';
2 |
--------------------------------------------------------------------------------
/packages/next-intl/src/plugin/hasStableTurboConfig.tsx:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line import/order
2 | import {createRequire} from 'module';
3 |
4 | const require = createRequire(import.meta.url);
5 | const pkg = require('next/package.json');
6 |
7 | function compareVersions(version1: string, version2: string) {
8 | const v1Parts = version1.split('.').map(Number);
9 | const v2Parts = version2.split('.').map(Number);
10 |
11 | for (let i = 0; i < 3; i++) {
12 | const v1 = v1Parts[i] || 0;
13 | const v2 = v2Parts[i] || 0;
14 | if (v1 > v2) return 1;
15 | if (v1 < v2) return -1;
16 | }
17 | return 0;
18 | }
19 |
20 | const hasStableTurboConfig = compareVersions(pkg.version, '15.3.0') >= 0;
21 | export default hasStableTurboConfig;
22 |
--------------------------------------------------------------------------------
/packages/next-intl/src/plugin/index.tsx:
--------------------------------------------------------------------------------
1 | export {default} from './createNextIntlPlugin.js';
2 |
--------------------------------------------------------------------------------
/packages/next-intl/src/plugin/types.tsx:
--------------------------------------------------------------------------------
1 | export type PluginConfig = {
2 | requestConfig?: string;
3 | experimental?: {
4 | /** A path to the messages file that you'd like to create a declaration for. In case you want to consider multiple files, you can pass an array of paths. */
5 | createMessagesDeclaration?: string | Array;
6 | };
7 | };
8 |
--------------------------------------------------------------------------------
/packages/next-intl/src/plugin/utils.tsx:
--------------------------------------------------------------------------------
1 | function formatMessage(message: string) {
2 | return `\n[next-intl] ${message}\n`;
3 | }
4 |
5 | export function throwError(message: string): never {
6 | throw new Error(formatMessage(message));
7 | }
8 |
9 | export function warn(message: string) {
10 | console.warn(formatMessage(message));
11 | }
12 |
--------------------------------------------------------------------------------
/packages/next-intl/src/plugin/watchFile.tsx:
--------------------------------------------------------------------------------
1 | import fs from 'fs';
2 | import path from 'path';
3 |
4 | /**
5 | * Wrapper around `fs.watch` that provides a workaround
6 | * for https://github.com/nodejs/node/issues/5039.
7 | */
8 | export default function watchFile(filepath: string, callback: () => void) {
9 | const directory = path.dirname(filepath);
10 | const filename = path.basename(filepath);
11 |
12 | return fs.watch(
13 | directory,
14 | {persistent: false, recursive: false},
15 | (event, changedFilename) => {
16 | if (changedFilename === filename) {
17 | callback();
18 | }
19 | }
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/packages/next-intl/src/react-client/useFormatter.test.tsx:
--------------------------------------------------------------------------------
1 | import {render, screen} from '@testing-library/react';
2 | import {expect, it} from 'vitest';
3 | import {NextIntlClientProvider, useFormatter} from './index.js';
4 |
5 | function Component() {
6 | const format = useFormatter();
7 | return <>{format.number(1)};
8 | }
9 |
10 | it('provides a helpful error message when no provider is found', () => {
11 | expect(() => render()).toThrow(
12 | /Failed to call `useFormatter` because the context from `NextIntlClientProvider` was not found\./
13 | );
14 | });
15 |
16 | it('works with a provider', () => {
17 | render(
18 |
19 |
20 |
21 | );
22 | screen.getByText('1');
23 | });
24 |
--------------------------------------------------------------------------------
/packages/next-intl/src/react-client/useNow.test.tsx:
--------------------------------------------------------------------------------
1 | import {render, screen} from '@testing-library/react';
2 | import {it} from 'vitest';
3 | import {NextIntlClientProvider, useNow} from './index.js';
4 |
5 | function Component() {
6 | const now = useNow();
7 | return <>{now.toISOString()};
8 | }
9 |
10 | it('works without a provider', () => {
11 | render(
12 |
13 |
14 |
15 | );
16 | });
17 |
18 | it('works with a provider', () => {
19 | render(
20 |
24 |
25 |
26 | );
27 | screen.getByText('2021-01-01T00:00:00.000Z');
28 | });
29 |
--------------------------------------------------------------------------------
/packages/next-intl/src/react-client/useTimeZone.test.tsx:
--------------------------------------------------------------------------------
1 | import {render, screen} from '@testing-library/react';
2 | import {it} from 'vitest';
3 | import {NextIntlClientProvider, useTimeZone} from './index.js';
4 |
5 | function Component() {
6 | const timeZone = useTimeZone();
7 | return <>{timeZone};
8 | }
9 |
10 | it('works without a provider', () => {
11 | render(
12 |
13 |
14 |
15 | );
16 | });
17 |
18 | it('works with a provider', () => {
19 | render(
20 |
21 |
22 |
23 | );
24 | screen.getByText('America/New_York');
25 | });
26 |
--------------------------------------------------------------------------------
/packages/next-intl/src/react-server/useFormatter.tsx:
--------------------------------------------------------------------------------
1 | import type {useFormatter as useFormatterType} from 'use-intl';
2 | import getServerFormatter from '../server/react-server/getServerFormatter.js';
3 | import useConfig from './useConfig.js';
4 |
5 | export default function useFormatter(): ReturnType {
6 | const config = useConfig('useFormatter');
7 | return getServerFormatter(config);
8 | }
9 |
--------------------------------------------------------------------------------
/packages/next-intl/src/react-server/useLocale.tsx:
--------------------------------------------------------------------------------
1 | import type {useLocale as useLocaleType} from 'use-intl';
2 | import useConfig from './useConfig.js';
3 |
4 | export default function useLocale(): ReturnType {
5 | const config = useConfig('useLocale');
6 | return config.locale;
7 | }
8 |
--------------------------------------------------------------------------------
/packages/next-intl/src/react-server/useMessages.tsx:
--------------------------------------------------------------------------------
1 | import type {useMessages as useMessagesType} from 'use-intl';
2 | import {getMessagesFromConfig} from '../server/react-server/getMessages.js';
3 | import useConfig from './useConfig.js';
4 |
5 | export default function useMessages(): ReturnType {
6 | const config = useConfig('useMessages');
7 | return getMessagesFromConfig(config);
8 | }
9 |
--------------------------------------------------------------------------------
/packages/next-intl/src/react-server/useNow.tsx:
--------------------------------------------------------------------------------
1 | import type {useNow as useNowType} from 'use-intl';
2 | import getDefaultNow from '../server/react-server/getDefaultNow.js';
3 | import useConfig from './useConfig.js';
4 |
5 | export default function useNow(
6 | options?: Parameters[0]
7 | ): ReturnType {
8 | if (options?.updateInterval != null) {
9 | console.error(
10 | "`useNow` doesn't support the `updateInterval` option in Server Components, the value will be ignored. If you need the value to update, you can convert the component to a Client Component."
11 | );
12 | }
13 |
14 | const config = useConfig('useNow');
15 | return config.now ?? getDefaultNow();
16 | }
17 |
--------------------------------------------------------------------------------
/packages/next-intl/src/react-server/useTimeZone.tsx:
--------------------------------------------------------------------------------
1 | import type {useTimeZone as useTimeZoneType} from 'use-intl';
2 | import useConfig from './useConfig.js';
3 |
4 | export default function useTimeZone(): ReturnType {
5 | const config = useConfig('useTimeZone');
6 | return config.timeZone;
7 | }
8 |
--------------------------------------------------------------------------------
/packages/next-intl/src/react-server/useTranslations.tsx:
--------------------------------------------------------------------------------
1 | import type {useTranslations as useTranslationsType} from 'use-intl';
2 | import getServerTranslator from '../server/react-server/getServerTranslator.js';
3 | import useConfig from './useConfig.js';
4 |
5 | export default function useTranslations(
6 | ...[namespace]: Parameters
7 | ): ReturnType {
8 | const config = useConfig('useTranslations');
9 | return getServerTranslator(config, namespace);
10 | }
11 |
--------------------------------------------------------------------------------
/packages/next-intl/src/routing.tsx:
--------------------------------------------------------------------------------
1 | export * from './routing/index.js';
2 |
--------------------------------------------------------------------------------
/packages/next-intl/src/routing/index.tsx:
--------------------------------------------------------------------------------
1 | export type {
2 | Pathnames,
3 | LocalePrefix,
4 | DomainsConfig,
5 | LocalePrefixMode
6 | } from './types.js';
7 | export {default as defineRouting} from './defineRouting.js';
8 | export type {RoutingConfig} from './config.js';
9 |
--------------------------------------------------------------------------------
/packages/next-intl/src/server.react-client.tsx:
--------------------------------------------------------------------------------
1 | export * from './server/react-client/index.js';
2 |
--------------------------------------------------------------------------------
/packages/next-intl/src/server.react-server.tsx:
--------------------------------------------------------------------------------
1 | export * from './server/react-server/index.js';
2 |
--------------------------------------------------------------------------------
/packages/next-intl/src/server/react-server/RequestLocaleCache.tsx:
--------------------------------------------------------------------------------
1 | import {cache} from 'react';
2 | import type {Locale} from 'use-intl';
3 |
4 | // See https://github.com/vercel/next.js/discussions/58862
5 | function getCacheImpl() {
6 | const value: {locale?: Locale} = {locale: undefined};
7 | return value;
8 | }
9 |
10 | const getCache = cache(getCacheImpl);
11 |
12 | export function getCachedRequestLocale() {
13 | return getCache().locale;
14 | }
15 |
16 | export function setCachedRequestLocale(locale: Locale) {
17 | getCache().locale = locale;
18 | }
19 |
--------------------------------------------------------------------------------
/packages/next-intl/src/server/react-server/createRequestConfig.tsx:
--------------------------------------------------------------------------------
1 | import getRuntimeConfig from 'next-intl/config';
2 | import type {
3 | GetRequestConfigParams,
4 | RequestConfig
5 | } from './getRequestConfig.js';
6 |
7 | export default getRuntimeConfig as unknown as (
8 | params: GetRequestConfigParams
9 | ) => RequestConfig | Promise;
10 |
--------------------------------------------------------------------------------
/packages/next-intl/src/server/react-server/getConfigNow.tsx:
--------------------------------------------------------------------------------
1 | import {cache} from 'react';
2 | import type {Locale} from 'use-intl';
3 | import getConfig from './getConfig.js';
4 |
5 | async function getConfigNowImpl(locale?: Locale) {
6 | const config = await getConfig(locale);
7 | return config.now;
8 | }
9 | const getConfigNow = cache(getConfigNowImpl);
10 |
11 | export default getConfigNow;
12 |
--------------------------------------------------------------------------------
/packages/next-intl/src/server/react-server/getDefaultNow.tsx:
--------------------------------------------------------------------------------
1 | import {cache} from 'react';
2 |
3 | function defaultNow() {
4 | // See https://next-intl.dev/docs/usage/dates-times#relative-times-server
5 | return new Date();
6 | }
7 |
8 | const getDefaultNow = cache(defaultNow);
9 |
10 | export default getDefaultNow;
11 |
--------------------------------------------------------------------------------
/packages/next-intl/src/server/react-server/getFormats.tsx:
--------------------------------------------------------------------------------
1 | import {cache} from 'react';
2 | import getConfig from './getConfig.js';
3 |
4 | async function getFormatsCachedImpl() {
5 | const config = await getConfig();
6 | return config.formats;
7 | }
8 | const getFormats = cache(getFormatsCachedImpl);
9 |
10 | export default getFormats;
11 |
--------------------------------------------------------------------------------
/packages/next-intl/src/server/react-server/getLocale.tsx:
--------------------------------------------------------------------------------
1 | import {cache} from 'react';
2 | import type {Locale} from 'use-intl';
3 | import getConfig from './getConfig.js';
4 |
5 | async function getLocaleCachedImpl(): Promise {
6 | const config = await getConfig();
7 | return config.locale;
8 | }
9 | const getLocaleCached = cache(getLocaleCachedImpl);
10 |
11 | export default getLocaleCached;
12 |
--------------------------------------------------------------------------------
/packages/next-intl/src/server/react-server/getNow.tsx:
--------------------------------------------------------------------------------
1 | import type {Locale} from 'use-intl';
2 | import getConfigNow from './getConfigNow.js';
3 | import getDefaultNow from './getDefaultNow.js';
4 |
5 | export default async function getNow(opts?: {locale?: Locale}): Promise {
6 | return (await getConfigNow(opts?.locale)) ?? getDefaultNow();
7 | }
8 |
--------------------------------------------------------------------------------
/packages/next-intl/src/server/react-server/getServerFormatter.tsx:
--------------------------------------------------------------------------------
1 | import {cache} from 'react';
2 | import {createFormatter} from 'use-intl/core';
3 | import getDefaultNow from './getDefaultNow.js';
4 |
5 | function getFormatterCachedImpl(config: Parameters[0]) {
6 | return createFormatter({
7 | ...config,
8 | // Only init when necessary to avoid triggering a `dynamicIO` error
9 | // unnecessarily (`now` is only needed for `format.relativeTime`)
10 | get now() {
11 | return config.now ?? getDefaultNow();
12 | }
13 | });
14 | }
15 | const getFormatterCached = cache(getFormatterCachedImpl);
16 |
17 | export default getFormatterCached;
18 |
--------------------------------------------------------------------------------
/packages/next-intl/src/server/react-server/getServerTranslator.tsx:
--------------------------------------------------------------------------------
1 | import {cache} from 'react';
2 | import {
3 | type Messages,
4 | type NamespaceKeys,
5 | type NestedKeyOf,
6 | createTranslator
7 | } from 'use-intl/core';
8 |
9 | function getServerTranslatorImpl<
10 | NestedKey extends NamespaceKeys> = never
11 | >(
12 | config: Parameters[0],
13 | namespace?: NestedKey
14 | ): ReturnType> {
15 | return createTranslator({
16 | ...config,
17 | namespace
18 | });
19 | }
20 |
21 | export default cache(getServerTranslatorImpl);
22 |
--------------------------------------------------------------------------------
/packages/next-intl/src/server/react-server/getTimeZone.tsx:
--------------------------------------------------------------------------------
1 | import {cache} from 'react';
2 | import type {Locale} from 'use-intl';
3 | import getConfig from './getConfig.js';
4 |
5 | async function getTimeZoneCachedImpl(locale?: Locale) {
6 | const config = await getConfig(locale);
7 | return config.timeZone;
8 | }
9 | const getTimeZoneCached = cache(getTimeZoneCachedImpl);
10 |
11 | export default async function getTimeZone(opts?: {
12 | locale?: Locale;
13 | }): Promise {
14 | return getTimeZoneCached(opts?.locale);
15 | }
16 |
--------------------------------------------------------------------------------
/packages/next-intl/src/server/react-server/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Server-only APIs available via `next-intl/server`.
3 | */
4 |
5 | export {
6 | default as getRequestConfig,
7 | type GetRequestConfigParams,
8 | type RequestConfig
9 | } from './getRequestConfig.js';
10 | export {default as getFormatter} from './getFormatter.js';
11 | export {default as getNow} from './getNow.js';
12 | export {default as getTimeZone} from './getTimeZone.js';
13 | export {default as getTranslations} from './getTranslations.js';
14 | export {default as getMessages} from './getMessages.js';
15 | export {default as getLocale} from './getLocale.js';
16 |
17 | export {setCachedRequestLocale as setRequestLocale} from './RequestLocaleCache.js';
18 |
--------------------------------------------------------------------------------
/packages/next-intl/src/server/react-server/validateLocale.tsx:
--------------------------------------------------------------------------------
1 | export default function validateLocale(locale: string) {
2 | try {
3 | const constructed = new Intl.Locale(locale);
4 | if (!constructed.language) {
5 | throw new Error('Language is required');
6 | }
7 | } catch {
8 | console.error(
9 | `An invalid locale was provided: "${locale}"\nPlease ensure you're using a valid Unicode locale identifier (e.g. "en-US").`
10 | );
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/packages/next-intl/src/shared/constants.tsx:
--------------------------------------------------------------------------------
1 | // Used to read the locale from the middleware
2 | export const HEADER_LOCALE_NAME = 'X-NEXT-INTL-LOCALE';
3 |
--------------------------------------------------------------------------------
/packages/next-intl/src/shared/types.tsx:
--------------------------------------------------------------------------------
1 | export type ParametersExceptFirst = Fn extends (
2 | arg0: any,
3 | ...rest: infer R
4 | ) => any
5 | ? R
6 | : never;
7 |
8 | export type ParametersExceptFirstTwo = Fn extends (
9 | arg0: any,
10 | arg1: any,
11 | ...rest: infer R
12 | ) => any
13 | ? R
14 | : never;
15 |
16 | // https://www.totaltypescript.com/concepts/the-prettify-helper
17 | export type Prettify = {
18 | [Key in keyof Type]: Type[Key];
19 | } & {};
20 |
--------------------------------------------------------------------------------
/packages/next-intl/src/shared/use.tsx:
--------------------------------------------------------------------------------
1 | import * as react from 'react';
2 |
3 | // @ts-expect-error -- Ooof, Next.js doesn't make this easy.
4 | // `use` is only available in React 19 canary, but we can
5 | // use it in Next.js already as Next.js "vendors" a fixed
6 | // version of React. However, if we'd simply put `use` in
7 | // ESM code, then the build doesn't work since React does
8 | // not export `use` officially. Therefore, we have to use
9 | // something that is not statically analyzable. Once React
10 | // 19 is out, we can remove this in the next major version.
11 | export default react['use'.trim()] as typeof react.use;
12 |
--------------------------------------------------------------------------------
/packages/next-intl/test/setup.tsx:
--------------------------------------------------------------------------------
1 | import {cleanup} from '@testing-library/react';
2 | import {afterEach} from 'vitest';
3 |
4 | afterEach(cleanup);
5 |
--------------------------------------------------------------------------------
/packages/next-intl/tsconfig.build.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "exclude": ["src/**/*.test.tsx", "test", "__mocks__"],
4 | "compilerOptions": {
5 | "rootDir": "src",
6 | "noEmit": false,
7 | "outDir": "dist/types",
8 | "emitDeclarationOnly": true
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/packages/next-intl/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "eslint-config-molindo/tsconfig.json",
3 | "include": ["src", "test", "__mocks__", "types", "next-env.d.ts"],
4 | "compilerOptions": {
5 | "lib": ["dom", "esnext"],
6 | "target": "ES2020",
7 | "declaration": true,
8 | "rootDir": ".",
9 | "module": "NodeNext",
10 | "moduleResolution": "NodeNext",
11 | "jsx": "react-jsx",
12 | "skipLibCheck": true,
13 | "noEmit": true
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/packages/next-intl/vitest.config.mts:
--------------------------------------------------------------------------------
1 | import {defineConfig} from 'vitest/config';
2 |
3 | export default defineConfig({
4 | test: {
5 | environment: 'jsdom',
6 | setupFiles: './test/setup.tsx'
7 | }
8 | });
9 |
--------------------------------------------------------------------------------
/packages/use-intl/.size-limit.ts:
--------------------------------------------------------------------------------
1 | import type {SizeLimitConfig} from 'size-limit';
2 |
3 | const config: SizeLimitConfig = [
4 | {
5 | name: "import * from 'use-intl' (production)",
6 | import: '*',
7 | path: 'dist/esm/production/index.js',
8 | limit: '13.015 kB'
9 | },
10 | {
11 | name: "import {IntlProvider, useLocale, useNow, useTimeZone, useMessages, useFormatter} from 'use-intl' (production)",
12 | path: 'dist/esm/production/index.js',
13 | import:
14 | '{IntlProvider, useLocale, useNow, useTimeZone, useMessages, useFormatter}',
15 | limit: '2.025 kB'
16 | }
17 | ];
18 |
19 | module.exports = config;
20 |
--------------------------------------------------------------------------------
/packages/use-intl/core.d.ts:
--------------------------------------------------------------------------------
1 | // Needed for projects with `moduleResolution: 'node'`
2 | export * from './dist/types/core.d.ts';
3 |
--------------------------------------------------------------------------------
/packages/use-intl/eslint.config.mjs:
--------------------------------------------------------------------------------
1 | import {getPresets} from 'eslint-config-molindo';
2 | import reactCompilerPlugin from 'eslint-plugin-react-compiler';
3 |
4 | export default (await getPresets('typescript', 'react', 'vitest')).concat({
5 | plugins: {
6 | 'react-compiler': reactCompilerPlugin
7 | },
8 | rules: {
9 | 'react-compiler/react-compiler': 'error',
10 |
11 | // Strict type imports to avoid side effects
12 | '@typescript-eslint/consistent-type-imports': 'error',
13 | '@typescript-eslint/consistent-type-exports': 'error',
14 | '@typescript-eslint/no-import-type-side-effects': 'error',
15 | 'import/no-duplicates': ['error', {'prefer-inline': true}],
16 | 'import/extensions': 'error'
17 | }
18 | });
19 |
--------------------------------------------------------------------------------
/packages/use-intl/react.d.ts:
--------------------------------------------------------------------------------
1 | // Needed for projects with `moduleResolution: 'node'`
2 | export * from './dist/types/react.d.ts';
3 |
--------------------------------------------------------------------------------
/packages/use-intl/rollup.config.js:
--------------------------------------------------------------------------------
1 | import {getBuildConfig} from 'tools';
2 | import pkg from './package.json' with {type: 'json'};
3 |
4 | export default getBuildConfig({
5 | input: {
6 | index: 'src/index.tsx',
7 | core: 'src/core.tsx',
8 | react: 'src/react.tsx'
9 | },
10 | external: [
11 | ...Object.keys(pkg.dependencies),
12 | ...Object.keys(pkg.peerDependencies),
13 | 'react/jsx-runtime'
14 | ]
15 | });
16 |
--------------------------------------------------------------------------------
/packages/use-intl/src/core.tsx:
--------------------------------------------------------------------------------
1 | export * from './core/index.js';
2 |
--------------------------------------------------------------------------------
/packages/use-intl/src/core/AbstractIntlMessages.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * A generic type that describes the shape of messages.
3 | *
4 | * Optionally, messages can be strictly-typed in order to get type safety for message
5 | * namespaces and keys. See https://next-intl.dev/docs/usage/typescript
6 | */
7 | type AbstractIntlMessages = {
8 | [id: string]: AbstractIntlMessages | string;
9 | };
10 |
11 | export default AbstractIntlMessages;
12 |
--------------------------------------------------------------------------------
/packages/use-intl/src/core/Formats.tsx:
--------------------------------------------------------------------------------
1 | import type DateTimeFormatOptions from './DateTimeFormatOptions.js';
2 | import type NumberFormatOptions from './NumberFormatOptions.js';
3 |
4 | type Formats = {
5 | number?: Record;
6 | dateTime?: Record;
7 | list?: Record;
8 | };
9 |
10 | export default Formats;
11 |
--------------------------------------------------------------------------------
/packages/use-intl/src/core/ICUArgs.tsx:
--------------------------------------------------------------------------------
1 | // schummar is the best, he published his ICU type parser for next-intl:
2 | // https://github.com/schummar/schummar-translate/issues/28
3 | import type {GetICUArgs, GetICUArgsOptions} from '@schummar/icu-type-parser';
4 |
5 | type ICUArgs =
6 | // This is important when `t` is returned from a function and there's no
7 | // known `Message` yet. Otherwise, we'd run into an infinite loop.
8 | string extends Message ? {} : GetICUArgs;
9 |
10 | export default ICUArgs;
11 |
--------------------------------------------------------------------------------
/packages/use-intl/src/core/ICUTags.tsx:
--------------------------------------------------------------------------------
1 | type ICUTags<
2 | MessageString extends string,
3 | TagsFn
4 | > = MessageString extends `${infer Prefix}<${infer TagName}>${infer Content}${infer Tail}`
5 | ? Record & ICUTags<`${Prefix}${Content}${Tail}`, TagsFn>
6 | : {};
7 |
8 | export default ICUTags;
9 |
--------------------------------------------------------------------------------
/packages/use-intl/src/core/IntlError.tsx:
--------------------------------------------------------------------------------
1 | import type IntlErrorCode from './IntlErrorCode.js';
2 |
3 | export default class IntlError extends Error {
4 | public readonly code: IntlErrorCode;
5 | public readonly originalMessage: string | undefined;
6 |
7 | constructor(code: IntlErrorCode, originalMessage?: string) {
8 | let message: string = code;
9 | if (originalMessage) {
10 | message += ': ' + originalMessage;
11 | }
12 | super(message);
13 |
14 | this.code = code;
15 | if (originalMessage) {
16 | this.originalMessage = originalMessage;
17 | }
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/packages/use-intl/src/core/IntlErrorCode.tsx:
--------------------------------------------------------------------------------
1 | enum IntlErrorCode {
2 | MISSING_MESSAGE = 'MISSING_MESSAGE',
3 | MISSING_FORMAT = 'MISSING_FORMAT',
4 | ENVIRONMENT_FALLBACK = 'ENVIRONMENT_FALLBACK',
5 | INSUFFICIENT_PATH = 'INSUFFICIENT_PATH',
6 | INVALID_MESSAGE = 'INVALID_MESSAGE',
7 | INVALID_KEY = 'INVALID_KEY',
8 | FORMATTING_ERROR = 'FORMATTING_ERROR'
9 | }
10 |
11 | export default IntlErrorCode;
12 |
--------------------------------------------------------------------------------
/packages/use-intl/src/core/NumberFormatOptions.tsx:
--------------------------------------------------------------------------------
1 | import type {Formats} from 'intl-messageformat';
2 |
3 | // Use the already bundled version of `NumberFormat` from `@formatjs/ecma402-abstract`
4 | // that comes with `intl-messageformat`
5 | type NumberFormatOptions = Formats['number'][string];
6 |
7 | export default NumberFormatOptions;
8 |
--------------------------------------------------------------------------------
/packages/use-intl/src/core/RelativeTimeFormatOptions.tsx:
--------------------------------------------------------------------------------
1 | type RelativeTimeFormatOptions = {
2 | now?: number | Date;
3 | unit?: Intl.RelativeTimeFormatUnit;
4 | numberingSystem?: string;
5 | style?: Intl.RelativeTimeFormatStyle;
6 | // We don't support the `numeric` property by design (see https://github.com/amannn/next-intl/pull/765)
7 | };
8 |
9 | export default RelativeTimeFormatOptions;
10 |
--------------------------------------------------------------------------------
/packages/use-intl/src/core/defaults.tsx:
--------------------------------------------------------------------------------
1 | import type IntlError from './IntlError.js';
2 | import joinPath from './joinPath.js';
3 |
4 | /**
5 | * Contains defaults that are used for all entry points into the core.
6 | * See also `InitializedIntlConfiguration`.
7 | */
8 |
9 | export function defaultGetMessageFallback(props: {
10 | error: IntlError;
11 | key: string;
12 | namespace?: string;
13 | }) {
14 | return joinPath(props.namespace, props.key);
15 | }
16 |
17 | export function defaultOnError(error: IntlError) {
18 | console.error(error);
19 | }
20 |
--------------------------------------------------------------------------------
/packages/use-intl/src/core/hasLocale.tsx:
--------------------------------------------------------------------------------
1 | import type {Locale} from './AppConfig.js';
2 |
3 | /**
4 | * Checks if a locale exists in a list of locales.
5 | *
6 | * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale
7 | */
8 | export default function hasLocale(
9 | locales: ReadonlyArray,
10 | candidate: unknown
11 | ): candidate is LocaleType {
12 | return locales.includes(candidate as LocaleType);
13 | }
14 |
--------------------------------------------------------------------------------
/packages/use-intl/src/core/joinPath.tsx:
--------------------------------------------------------------------------------
1 | export default function joinPath(...parts: Array) {
2 | return parts.filter(Boolean).join('.');
3 | }
4 |
--------------------------------------------------------------------------------
/packages/use-intl/src/core/resolveNamespace.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * For the strictly typed messages to work we have to wrap the namespace into
3 | * a mandatory prefix. See https://stackoverflow.com/a/71529575/343045
4 | */
5 | export default function resolveNamespace(
6 | namespace: string,
7 | namespacePrefix: string
8 | ) {
9 | return namespace === namespacePrefix
10 | ? undefined
11 | : namespace.slice((namespacePrefix + '.').length);
12 | }
13 |
--------------------------------------------------------------------------------
/packages/use-intl/src/core/types.tsx:
--------------------------------------------------------------------------------
1 | // https://www.totaltypescript.com/concepts/the-prettify-helper
2 | export type Prettify = {
3 | [K in keyof T]: T[K];
4 | } & {};
5 |
6 | export type DeepPartial = {
7 | [Key in keyof Type]?: Type[Key] extends object
8 | ? DeepPartial
9 | : Type[Key];
10 | };
11 |
--------------------------------------------------------------------------------
/packages/use-intl/src/index.tsx:
--------------------------------------------------------------------------------
1 | export * from './core.js';
2 | export * from './react.js';
3 |
--------------------------------------------------------------------------------
/packages/use-intl/src/react.tsx:
--------------------------------------------------------------------------------
1 | export * from './react/index.js';
2 |
--------------------------------------------------------------------------------
/packages/use-intl/src/react/IntlContext.tsx:
--------------------------------------------------------------------------------
1 | import {createContext} from 'react';
2 | import type {InitializedIntlConfig} from '../core/IntlConfig.js';
3 | import type {Formatters, IntlCache} from '../core/formatters.js';
4 |
5 | export type IntlContextValue = InitializedIntlConfig & {
6 | formatters: Formatters;
7 | cache: IntlCache;
8 | };
9 |
10 | const IntlContext = createContext(undefined);
11 |
12 | export default IntlContext;
13 |
--------------------------------------------------------------------------------
/packages/use-intl/src/react/index.tsx:
--------------------------------------------------------------------------------
1 | export {default as IntlProvider} from './IntlProvider.js';
2 | export {default as useTranslations} from './useTranslations.js';
3 | export {default as useLocale} from './useLocale.js';
4 | export {default as useNow} from './useNow.js';
5 | export {default as useTimeZone} from './useTimeZone.js';
6 | export {default as useMessages} from './useMessages.js';
7 | export {default as useFormatter} from './useFormatter.js';
8 |
--------------------------------------------------------------------------------
/packages/use-intl/src/react/useFormatter.tsx:
--------------------------------------------------------------------------------
1 | import {useMemo} from 'react';
2 | import createFormatter from '../core/createFormatter.js';
3 | import useIntlContext from './useIntlContext.js';
4 |
5 | export default function useFormatter(): ReturnType {
6 | const {
7 | formats,
8 | formatters,
9 | locale,
10 | now: globalNow,
11 | onError,
12 | timeZone
13 | } = useIntlContext();
14 |
15 | return useMemo(
16 | () =>
17 | createFormatter({
18 | formats,
19 | locale,
20 | now: globalNow,
21 | onError,
22 | timeZone,
23 | _formatters: formatters
24 | }),
25 | [formats, formatters, globalNow, locale, onError, timeZone]
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/packages/use-intl/src/react/useIntlContext.tsx:
--------------------------------------------------------------------------------
1 | import {useContext} from 'react';
2 | import IntlContext, {type IntlContextValue} from './IntlContext.js';
3 |
4 | export default function useIntlContext(): IntlContextValue {
5 | const context = useContext(IntlContext);
6 |
7 | if (!context) {
8 | throw new Error(
9 | process.env.NODE_ENV !== 'production'
10 | ? 'No intl context found. Have you configured the provider? See https://next-intl.dev/docs/usage/configuration#server-client-components'
11 | : undefined
12 | );
13 | }
14 |
15 | return context;
16 | }
17 |
--------------------------------------------------------------------------------
/packages/use-intl/src/react/useLocale.test.tsx:
--------------------------------------------------------------------------------
1 | import {render, screen} from '@testing-library/react';
2 | import {it} from 'vitest';
3 | import IntlProvider from './IntlProvider.js';
4 | import useLocale from './useLocale.js';
5 |
6 | it('returns the current locale', () => {
7 | function Component() {
8 | return <>{useLocale()};
9 | }
10 |
11 | render(
12 |
13 |
14 |
15 | );
16 |
17 | screen.getByText('en');
18 | });
19 |
--------------------------------------------------------------------------------
/packages/use-intl/src/react/useLocale.tsx:
--------------------------------------------------------------------------------
1 | import type {Locale} from '../core.js';
2 | import useIntlContext from './useIntlContext.js';
3 |
4 | export default function useLocale(): Locale {
5 | return useIntlContext().locale;
6 | }
7 |
--------------------------------------------------------------------------------
/packages/use-intl/src/react/useMessages.tsx:
--------------------------------------------------------------------------------
1 | import type {Messages} from '../core/AppConfig.js';
2 | import useIntlContext from './useIntlContext.js';
3 |
4 | export default function useMessages(): Messages {
5 | const context = useIntlContext();
6 |
7 | if (!context.messages) {
8 | throw new Error(
9 | process.env.NODE_ENV !== 'production'
10 | ? 'No messages found. Have you configured them correctly? See https://next-intl.dev/docs/configuration#messages'
11 | : undefined
12 | );
13 | }
14 |
15 | return context.messages;
16 | }
17 |
--------------------------------------------------------------------------------
/packages/use-intl/src/react/useTimeZone.tsx:
--------------------------------------------------------------------------------
1 | import useIntlContext from './useIntlContext.js';
2 |
3 | export default function useTimeZone() {
4 | return useIntlContext().timeZone;
5 | }
6 |
--------------------------------------------------------------------------------
/packages/use-intl/test/setup.tsx:
--------------------------------------------------------------------------------
1 | import {cleanup} from '@testing-library/react';
2 | import {afterEach} from 'vitest';
3 |
4 | afterEach(cleanup);
5 |
--------------------------------------------------------------------------------
/packages/use-intl/tsconfig.build.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "exclude": ["src/**/*.test.tsx", "test"],
4 | "compilerOptions": {
5 | "rootDir": "src",
6 | "noEmit": false,
7 | "outDir": "dist/types",
8 | "emitDeclarationOnly": true
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/packages/use-intl/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "eslint-config-molindo/tsconfig.json",
3 | "include": ["src", "test", "types"],
4 | "compilerOptions": {
5 | "lib": ["dom", "esnext"],
6 | "target": "ES2020",
7 | "declaration": true,
8 | "rootDir": ".",
9 | "module": "NodeNext",
10 | "moduleResolution": "NodeNext",
11 | "jsx": "react-jsx",
12 | "skipLibCheck": true,
13 | "noEmit": true
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/packages/use-intl/vitest.config.mts:
--------------------------------------------------------------------------------
1 | import {defineConfig} from 'vitest/config';
2 |
3 | export default defineConfig({
4 | test: {
5 | environment: 'jsdom',
6 | setupFiles: './test/setup.tsx'
7 | }
8 | });
9 |
--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 | - 'packages/*'
3 | - 'examples/*'
4 | - 'docs'
5 | - 'tools'
6 |
--------------------------------------------------------------------------------
/tools/eslint.config.mjs:
--------------------------------------------------------------------------------
1 | import {getPresets} from 'eslint-config-molindo';
2 | import globals from 'globals';
3 |
4 | export default (await getPresets('javascript')).concat({
5 | languageOptions: {
6 | globals: globals.node
7 | }
8 | });
9 |
--------------------------------------------------------------------------------
/tools/src/index.js:
--------------------------------------------------------------------------------
1 | export {default as getBuildConfig} from './getBuildConfig.js';
2 |
--------------------------------------------------------------------------------
/turbo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://turbo.build/schema.json",
3 | "tasks": {
4 | "build": {
5 | "dependsOn": ["^build"],
6 | "outputs": ["dist/**", ".next/**", "!.next/cache/**", "build/**"]
7 | },
8 | "lint": {
9 | "dependsOn": ["^build"]
10 | },
11 | "example-app-router-playground#lint": {
12 | "dependsOn": ["example-app-router-playground#build"]
13 | },
14 | "test": {
15 | "dependsOn": ["build"]
16 | },
17 | "size": {
18 | "dependsOn": ["build"]
19 | }
20 | }
21 | }
22 |
--------------------------------------------------------------------------------