Tổng hợp ví dụ của chính next-intl triển khai với pages, app (ok)

Nghiên cứu dự án mẫu trong next-intl

— 1. example-pages-router

messages\en.json

{
  "Index": {
    "title": "Home",
    "description": "This is the home page."
  },
  "LocaleSwitcher": {
    "switchLocale": "Switch to {locale, select, vi {Vietnam} en {English} other {Unknown}}"
  },
  "PageLayout": {
    "pageTitle": "Next Intl En"
  }
}

messages\vi.json

{
  "Index": {
    "title": "Trang chủ",
    "description": "Đây là trang chủ"
  },
  "LocaleSwitcher": {
    "switchLocale": "Chuyển sang {locale, select, vi {Vietnam} en {English} other {Unknown}}"
  },
  "PageLayout": {
    "pageTitle": "Next Intl Vi"
  }
}

next.config.ts

import type { NextConfig } from "next";
const nextConfig: NextConfig = {
  i18n: {
    locales: ['en', 'vi'],
    defaultLocale: 'en'
  },
  reactStrictMode: true
};
export default nextConfig;

src\pages\index.tsx

import {GetStaticPropsContext} from 'next';
import {useTranslations} from 'next-intl';
import LocaleSwitcher from '@/pages/components/LocaleSwitcher';
import PageLayout from '@/pages/components/PageLayout';
export default function Home() {
  const t = useTranslations('Index');
  return (
    <PageLayout title={t('title')}>
      <p>{t('description')}</p>
      <LocaleSwitcher />
    </PageLayout>
  );
}
export async function getStaticProps({locale}: GetStaticPropsContext) {
  return {
    props: {
      messages: (await import(`../../messages/${locale}.json`)).default
    }
  };
}

src\pages\_app.tsx

import "@/styles/globals.css";
import type { AppProps } from "next/app";
import {useRouter} from 'next/router';
import {NextIntlClientProvider} from 'next-intl';
export default function App({ Component, pageProps }: AppProps) {
  const router = useRouter();
  return (
    <NextIntlClientProvider
      locale={router.locale}
      messages={pageProps.messages}
      timeZone="Europe/Vienna"
    >
      <Component {...pageProps} />;
    </NextIntlClientProvider>
  )
}

src\pages\components\LocaleSwitcher.tsx

import Link from 'next/link';
import { useRouter } from 'next/router';
import { useTranslations } from 'next-intl';
export default function LocaleSwitcher() {
  const t = useTranslations('LocaleSwitcher');
  const { locale, locales, route } = useRouter();
  const otherLocale = locales?.find((cur) => cur !== locale) as string;
  return (
    <Link href={route} locale={otherLocale}>
      {t('switchLocale', { locale: otherLocale })}
    </Link>
  )
}

src\pages\components\PageLayout.tsx

import Head from 'next/head';
import { useTranslations } from 'next-intl';
import { ReactNode } from 'react';
type Props = {
  children?: ReactNode;
  title: string;
};
export default function PageLayout({ children, title }: Props) {
  const t = useTranslations('PageLayout')
  return (
    <>
      <Head>
        <title>{[title, t('pageTitle')].join(' - ')}</title>
      </Head>
      <div className="container m-auto">
        <h1>{title}</h1>
        {children}
      </div>
    </>
  )
}

pages\index.tsx

import messages from '../messages/en.json';
export default function Home() {
  console.log(typeof messages);
  return (
    <div>
      Home
    </div>
  );
}
Kết quả: console.log(typeof messages); object

— 2. example-pages-router-advanced

messages\en.json

{
  "Index": {
    "title": "Home",
    "description": "<p>Only the minimum of <code>{locale}</code> messages are loaded to render this page.</p><p>These namespaces are available:</p>"
  },
  "LocaleSwitcher": {
    "switchLocale": "Switch to {locale, select, vi {Vietnam} en {English} other {Unknown}}"
  },
  "PageLayout": {
    "pageTitle": "Next Intl En"
  },
  "About": {
    "title": "About",
    "lastUpdated": "This example was updated {lastUpdatedRelative} ({lastUpdated, date, short})."
  },
  "Navigation": {
    "index": "Home",
    "about": "About",
    "switchLocale": "Switch to {locale, select, de {German} en {English} other {Unknown}}"
  },
  "NotFound": {
    "title": "Sorry, this page could not be found."
  },
  "StrictTypes": {
    "nested": {
      "hello": "Hello",
      "another": {
        "level": "Level"
      }
    }
  }
}

messages\vi.json

{
  "Index": {
    "title": "Trang chủ",
    "description": "<p>Chỉ có tối thiểu <code>{locale}</code> tin nhắn được tải để hiển thị trang này.</p><p>Các không gian tên sau đây khả dụng:</p>"
  },
  "LocaleSwitcher": {
    "switchLocale": "Chuyển sang {locale, select, vi {Vietnam} en {English} other {Unknown}}"
  },
  "About": {
    "title": "About",
    "lastUpdated": "Ví dụ này đã được cập nhật {lastUpdatedRelative} ({lastUpdated, date, short})."
  },
  "PageLayout": {
    "pageTitle": "Next Intl Vi"
  },
  "Navigation": {
    "index": "Trang chủ",
    "about": "Chúng tôi",
    "switchLocale": "Chuyển đến {locale, select, vi {Việt Nam} en {English} other {Unknown}}"
  },
  "NotFound": {
    "title": "Xin lỗi trang không được tìm thấy"
  },
  "StrictTypes": {
    "nested": {
      "hello": "Xin chào",
      "another": {
        "level": "Cấp độ"
      }
    }
  }
}

src\pages\components\Code.tsx

import {ReactNode} from 'react';
type Props = {
  children: ReactNode;
};
export default function Code({children}: Props) {
  return (
    <code style={{background: 'red', padding: 4, borderRadius: 4}}>
      {children}
    </code>
  );
}

src\pages\components\LocaleSwitcher.tsx

import Link from 'next/link';
import { useRouter } from 'next/router';
import { useTranslations } from 'next-intl';
export default function LocaleSwitcher() {
  const t = useTranslations('LocaleSwitcher');
  const { locale, locales, route } = useRouter();
  const otherLocale = locales?.find((cur) => cur !== locale) as string;
  return (
    <Link href={route} locale={otherLocale}>
      {t('switchLocale', { locale: otherLocale })}
    </Link>
  )
}

src\pages\components\Navigation.tsx

import Link from 'next/link';
import {useRouter} from 'next/router';
import {useTranslations} from 'next-intl';
export default function Navigation() {
  const t = useTranslations('Navigation');
  const {locale, locales, route} = useRouter();
  const otherLocale = locales?.find((cur) => cur !== locale) as string;
  return (
    <div style={{display: 'flex', justifyContent: 'space-between'}}>
      <div style={{display: 'flex', gap: 10}}>
        <Link href="/">{t('index')}</Link>
        <Link href="/about">{t('about')}</Link>
      </div>
      <Link href={route} locale={otherLocale}>
        {t('switchLocale', {locale: otherLocale})}
      </Link>
    </div>
  );
}
Navigation.messages = ['Navigation'];

src\pages\components\PageLayout.tsx

import Head from 'next/head';
import { useTranslations } from 'next-intl';
import { ReactNode } from 'react';
import Navigation from './Navigation';
type Props = {
  children?: ReactNode;
  title: string;
};
export default function PageLayout({ children, title }: Props) {
  const t = useTranslations('PageLayout')
  return (
    <>
      <Head>
        <title>{[title, t('pageTitle')].join(' - ')}</title>
      </Head>
      <div className="container m-auto">
        <Navigation />
        <h1>{title}</h1>
        {children}
      </div>
    </>
  )
}
PageLayout.messages = ['PageLayout', ...Navigation.messages];

src\pages\_app.tsx

import "@/styles/globals.css";
import type { AppProps } from "next/app";
import {useRouter} from 'next/router';
import {NextIntlClientProvider} from 'next-intl';
export default function App({ Component, pageProps }: AppProps) {
  const router = useRouter();
  return (
    <NextIntlClientProvider
      // To achieve consistent date, time and number formatting
      // across the app, you can define a set of global formats.
      formats={{
        dateTime: {
          short: {
            day: 'numeric',
            month: 'short',
            year: 'numeric'
          }
        }
      }}
      locale={router.locale}
      // Messages can be received from individual pages or configured
      // globally in this module (`App.getInitialProps`). Note that in
      // the latter case the messages are available as a top-level prop
      // and not nested within `pageProps`.
      messages={pageProps.messages}
      // Providing an explicit value for `now` ensures consistent formatting of
      // relative values regardless of the server or client environment.
      now={new Date(pageProps.now)}
      // Also an explicit time zone is helpful to ensure dates render the
      // same way on the client as on the server, which might be located
      // in a different time zone.
      timeZone="Europe/Vienna"
    >
      <Component {...pageProps} />
    </NextIntlClientProvider>
  )
}

src\pages\index.tsx

import {GetStaticPropsContext} from 'next';
import {useTranslations} from 'next-intl';
import PageLayout from '@/pages/components/PageLayout';
import Code from '@/pages/components/Code';
import { useRouter } from 'next/router';
export default function Home() {
  const t = useTranslations('Index');
  const {locale} = useRouter();
  return (
    <PageLayout title={t('title')}>
      <div>
        {t.rich('description', {
          locale: locale!,
          p: (children) => <p>{children}</p>,
          code: (children) => <Code>{children}</Code>
        })}
      </div>
      <ul>
        {Home.messages.map((componentName) => (
          <li key={componentName} style={{marginBottom: 5}}>
            <Code>{componentName}</Code>
          </li>
        ))}
      </ul>
    </PageLayout>
  );
}
export async function getStaticProps({locale}: GetStaticPropsContext) {
  return {
    props: {
      messages: (await import(`../../messages/${locale}.json`)).default
    }
  };
}
Home.messages = ['Index', ...PageLayout.messages];

src\pages\about.tsx

import {GetServerSidePropsContext} from 'next';
import {useFormatter, useTranslations} from 'next-intl';
import PageLayout from '@/pages/components/PageLayout';
export default function About() {
  const t = useTranslations('About');
  const format = useFormatter();
  const lastUpdated = new Date('2021-12-23T10:04:45.567Z');
  return (
    <PageLayout title={t('title')}>
      <p>
        {t('lastUpdated', {
          lastUpdated,
          lastUpdatedRelative: format.relativeTime(lastUpdated)
        })}
      </p>
    </PageLayout>
  );
}
About.messages = ['About', ...PageLayout.messages];
export async function getServerSideProps({locale}: GetServerSidePropsContext) {
  return {
    props: {
      messages: (await import(`../../messages/${locale}.json`)).default,
      // Note that when `now` is passed to the app, you need to make sure the
      // value is updated from time to time, so relative times are updated. See
      // https://next-intl.dev/docs/usage/configuration#global-now-value
      now: new Date().getTime()
    }
  };
}

35KB

next-itl.zip

hashtagNghiên cứu dự án mẫu trong next-intl

hashtag— 1. example-pages-router

hashtag— 2. example-pages-router-advanced

Nghiên cứu dự án mẫu trong next-intl

— 1. example-pages-router

— 2. example-pages-router-advanced