Przetłumacz swoją stronę Next.js 16 za pomocą Intlayer | Internacjonalizacja (i18n)

Zobacz Szablon aplikacji na GitHub.

Czym jest Intlayer?

Intlayer to innowacyjna, otwartoźródłowa biblioteka do internacjonalizacji (i18n), zaprojektowana w celu uproszczenia obsługi wielojęzyczności we współczesnych aplikacjach internetowych. Intlayer bezproblemowo integruje się z najnowszym frameworkiem Next.js 16, w tym z jego potężnym App Router. Jest zoptymalizowany do pracy z Server Components dla efektywnego renderowania i jest w pełni kompatybilny z Turbopack.

Dzięki Intlayer możesz:

• Łatwo zarządzać tłumaczeniami za pomocą deklaratywnych słowników na poziomie komponentu.
• Dynamicznie lokalizować metadane, trasy i zawartość.
• Uzyskać dostęp do tłumaczeń zarówno w komponentach po stronie klienta, jak i serwera.
• Zapewnić wsparcie dla TypeScript dzięki automatycznie generowanym typom, co poprawia autouzupełnianie i wykrywanie błędów.
• Korzystaj z zaawansowanych funkcji, takich jak dynamiczne wykrywanie i przełączanie lokalizacji.

Intlayer jest kompatybilny z Next.js 12, 13, 14 i 16. Jeśli używasz Next.js Page Router, możesz odnieść się do tego przewodnika. Dla Next.js 12, 13, 14 z App Router, odnieś się do tego przewodnika.

Przewodnik krok po kroku, jak skonfigurować Intlayer w aplikacji Next.js

Krok 1: Zainstaluj zależności

Zainstaluj niezbędne pakiety za pomocą npm:

npm install intlayer next-intlayer

• intlayer

  Podstawowy pakiet, który dostarcza narzędzia do internacjonalizacji dla zarządzania konfiguracją, tłumaczeń, deklaracji treści, transpilecji oraz poleceń CLI.

• next-intlayer

  Pakiet integrujący Intlayer z Next.js. Dostarcza dostawców kontekstu oraz hooki do internacjonalizacji w Next.js. Dodatkowo zawiera wtyczkę Next.js do integracji Intlayer z Webpack lub Turbopack, a także proxy do wykrywania preferowanego języka użytkownika, zarządzania ciasteczkami oraz obsługi przekierowań URL.

Krok 2: Skonfiguruj swój projekt

Utwórz plik konfiguracyjny, aby skonfigurować języki swojej aplikacji:

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [      Locales.ENGLISH,      Locales.FRENCH,      Locales.SPANISH,      // Twoje pozostałe lokalizacje    ],    defaultLocale: Locales.ENGLISH,  },};export default config;

Dzięki temu plikowi konfiguracyjnemu możesz ustawić lokalizowane adresy URL, przekierowania proxy, nazwy ciasteczek, lokalizację i rozszerzenie deklaracji zawartości, wyłączyć logi Intlayer w konsoli i wiele więcej. Pełną listę dostępnych parametrów znajdziesz w dokumentacji konfiguracji.

Krok 3: Zintegruj Intlayer w konfiguracji Next.js

Skonfiguruj swoje środowisko Next.js, aby korzystało z Intlayer:

import type { NextConfig } from "next";import { withIntlayer } from "next-intlayer/server";const nextConfig: NextConfig = {  /* opcje konfiguracji tutaj */};export default withIntlayer(nextConfig);

Wtyczka Next.js withIntlayer() służy do integracji Intlayer z Next.js. Zapewnia budowanie plików deklaracji treści oraz monitoruje je w trybie deweloperskim. Definiuje zmienne środowiskowe Intlayer w środowiskach Webpack lub Turbopack. Dodatkowo dostarcza aliasy optymalizujące wydajność oraz zapewnia kompatybilność z komponentami serwerowymi.

Funkcja withIntlayer() jest funkcją zwracającą obietnicę (promise). Pozwala przygotować słowniki Intlayer przed rozpoczęciem budowania. Jeśli chcesz użyć jej z innymi wtyczkami, możesz na nią zaczekać (await). Przykład:

const nextConfig = await withIntlayer(nextConfig);const nextConfigWithOtherPlugins = withOtherPlugins(nextConfig);export default nextConfigWithOtherPlugins;

Jeśli chcesz używać tego synchronicznie, możesz użyć funkcji withIntlayerSync(). Przykład:

const nextConfig = withIntlayerSync(nextConfig);const nextConfigWithOtherPlugins = withOtherPlugins(nextConfig);export default nextConfigWithOtherPlugins;

Krok 4: Zdefiniuj dynamiczne trasy lokalizacji

Usuń wszystko z RootLayout i zastąp to następującym kodem:

import type { PropsWithChildren, FC } from "react";import "./globals.css";const RootLayout: FC<PropsWithChildren> = ({ children }) => (  // Nadal możesz opakować children innymi providerami, takimi jak `next-themes`, `react-query`, `framer-motion` itd.  <>{children}</>);export default RootLayout;

Pozostawienie komponentu RootLayout pustym pozwala na ustawienie atrybutów lang oraz dir dla tagu <html>.

Aby zaimplementować dynamiczne routowanie, podaj ścieżkę dla lokalizacji, dodając nowy layout w katalogu [locale]:

import type { NextLayoutIntlayer } from "next-intlayer";import { Inter } from "next/font/google";import { getHTMLTextDir } from "intlayer";const inter = Inter({ subsets: ["latin"] });const LocaleLayout: NextLayoutIntlayer = async ({ children, params }) => {  const { locale } = await params;  return (    <html lang={locale} dir={getHTMLTextDir(locale)}>      <body className={inter.className}>{children}</body>    </html>  );};export default LocaleLayout;

Segment ścieżki [locale] służy do określenia lokalizacji. Przykład: /en-US/about odnosi się do en-US, a /fr/about do fr.

Na tym etapie napotkasz błąd: Error: Missing <html> and <body> tags in the root layout.. Jest to oczekiwane, ponieważ plik /app/page.tsx nie jest już używany i można go usunąć. Zamiast tego segment ścieżki [locale] aktywuje stronę /app/[locale]/page.tsx. W konsekwencji strony będą dostępne pod ścieżkami takimi jak /en, /fr, /es w Twojej przeglądarce. Aby ustawić domyślny język jako stronę główną, odnieś się do konfiguracji proxy w kroku 7.

Następnie zaimplementuj funkcję generateStaticParams w układzie aplikacji.

export { generateStaticParams } from "next-intlayer"; // Linia do dodaniaconst LocaleLayout: NextLayoutIntlayer = async ({ children, params }) => {  /*... Reszta kodu*/};export default LocaleLayout;

generateStaticParams zapewnia, że Twoja aplikacja wstępnie buduje niezbędne strony dla wszystkich lokalizacji, zmniejszając obciążenie podczas działania i poprawiając doświadczenie użytkownika. Aby uzyskać więcej informacji, zapoznaj się z dokumentacją Next.js dotyczącą generateStaticParams.

Intlayer działa z export const dynamic = 'force-static';, aby zapewnić, że strony są wstępnie zbudowane dla wszystkich lokalizacji.

Krok 5: Zadeklaruj swoją zawartość

Utwórz i zarządzaj deklaracjami zawartości, aby przechowywać tłumaczenia:

import { t, type Dictionary } from "intlayer";const pageContent = {  key: "page",  content: {    getStarted: {      main: t({        en: "Get started by editing",        fr: "Commencez par éditer",        es: "Comience por editar",      }),      pageLink: "src/app/page.tsx",    },  },} satisfies Dictionary;export default pageContent;

Twoje deklaracje zawartości mogą być definiowane w dowolnym miejscu w aplikacji, pod warunkiem, że zostaną umieszczone w katalogu contentDir (domyślnie ./src). I będą miały rozszerzenie pliku deklaracji zawartości (domyślnie .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}).

Aby uzyskać więcej szczegółów, zapoznaj się z dokumentacją deklaracji zawartości.

Krok 6: Wykorzystaj zawartość w swoim kodzie

Uzyskaj dostęp do swoich słowników zawartości w całej aplikacji:

import type { FC } from "react";import { ClientComponentExample } from "@components/ClientComponentExample";import { ServerComponentExample } from "@components/ServerComponentExample";import { type NextPageIntlayer, IntlayerClientProvider } from "next-intlayer";import { IntlayerServerProvider, useIntlayer } from "next-intlayer/server";const PageContent: FC = () => {  const content = useIntlayer("page");  return (    <>      <p>{content.getStarted.main}</p>      <code>{content.getStarted.pageLink}</code>    </>  );};const Page: NextPageIntlayer = async ({ params }) => {  const { locale } = await params;  return (    <IntlayerServerProvider locale={locale}>      <PageContent />      <ServerComponentExample />      <IntlayerClientProvider locale={locale}>        <ClientComponentExample />      </IntlayerClientProvider>    </IntlayerServerProvider>  );};export default Page;

• IntlayerClientProvider służy do dostarczania lokalizacji komponentom po stronie klienta. Może być umieszczony w dowolnym komponencie nadrzędnym, w tym w layoucie. Jednak zaleca się umieszczenie go w layoucie, ponieważ Next.js współdzieli kod layoutu między stronami, co jest bardziej efektywne. Używając IntlayerClientProvider w layoucie, unikasz ponownej inicjalizacji dla każdej strony, poprawiając wydajność i utrzymując spójny kontekst lokalizacji w całej aplikacji.

• IntlayerServerProvider służy do dostarczania lokalizacji komponentom po stronie serwera. Nie może być ustawiony w layoucie.

  Layout i strona nie mogą dzielić wspólnego kontekstu serwera, ponieważ system kontekstu serwera opiera się na magazynie danych na żądanie (za pomocą mechanizmu React's cache), co powoduje, że każdy "kontekst" jest tworzony na nowo dla różnych segmentów aplikacji. Umieszczenie providera w wspólnym layoucie złamałoby tę izolację, uniemożliwiając prawidłowe propagowanie wartości kontekstu serwera do komponentów serwerowych.

  Layout i strona nie mogą współdzielić wspólnego kontekstu serwera, ponieważ system kontekstu serwera opiera się na magazynie danych dla każdego żądania (za pomocą mechanizmu React's cache), co powoduje, że każdy „kontekst” jest tworzony na nowo dla różnych segmentów aplikacji. Umieszczenie providera w współdzielonym layoucie naruszyłoby tę izolację, uniemożliwiając prawidłowe propagowanie wartości kontekstu serwera do Twoich komponentów serwerowych.

"use client";import type { FC } from "react";import { useIntlayer } from "next-intlayer";export const ClientComponentExample: FC = () => {  const content = useIntlayer("client-component-example"); // Utwórz powiązaną deklarację zawartości  return (    <div>      <h2>{content.title}</h2>      <p>{content.content}</p>    </div>  );};

import type { FC } from "react";import { useIntlayer } from "next-intlayer/server";export const ServerComponentExample: FC = () => {  const content = useIntlayer("server-component-example"); // Utwórz powiązaną deklarację zawartości  return (    <div>      <h2>{content.title}</h2>      <p>{content.content}</p>    </div>  );};

Jeśli chcesz użyć swojej zawartości w atrybucie string, takim jak alt, title, href, aria-label itp., musisz wywołać wartość funkcji, na przykład:

<img src={content.image.src.value} alt={content.image.value} />

Aby dowiedzieć się więcej o hooku useIntlayer, zapoznaj się z dokumentacją.

(Opcjonalny) Krok 7: Konfiguracja proxy do wykrywania lokalizacji

Skonfiguruj proxy, aby wykrywać preferowaną lokalizację użytkownika:

export { intlayerProxy as proxy } from "next-intlayer/proxy";export const config = {  matcher:    "/((?!api|static|assets|robots|sitemap|sw|service-worker|manifest|.*\\..*|_next).*)",};

intlayerProxy służy do wykrywania preferowanego języka użytkownika i przekierowywania go na odpowiedni adres URL, zgodnie z konfiguracją. Dodatkowo umożliwia zapisywanie preferowanego języka użytkownika w ciasteczku.

Jeśli potrzebujesz łączyć kilka proxy razem (na przykład intlayerProxy z uwierzytelnianiem lub niestandardowymi proxy), Intlayer udostępnia teraz pomocnika o nazwie multipleProxies.

import { multipleProxies, intlayerProxy } from "next-intlayer/proxy";import { customProxy } from "@utils/customProxy";export const proxy = multipleProxies([intlayerProxy, customProxy]);

(Opcjonalny) Krok 8: Internacjonalizacja Twoich metadanych

Jeśli chcesz internacjonalizować swoje metadane, takie jak tytuł strony, możesz użyć funkcji generateMetadata dostarczonej przez Next.js. Wewnątrz możesz pobrać zawartość z funkcji getIntlayer, aby przetłumaczyć swoje metadane.

import { type Dictionary, t } from "intlayer";import { Metadata } from "next";const metadataContent = {  key: "page-metadata",  content: {    title: t({      en: "Create Next App",      fr: "Créer une application Next.js",      es: "Crear una aplicación Next.js",    }),    description: t({      en: "Generated by create next app",      fr: "Généré par create next app",      es: "Generado por create next app",    }),  },} satisfies Dictionary<Metadata>;export default metadataContent;

import { getIntlayer, getMultilingualUrls } from "intlayer";import type { Metadata } from "next";import type { LocalPromiseParams } from "next-intlayer";export const generateMetadata = async ({  params,}: LocalPromiseParams): Promise<Metadata> => {  const { locale } = await params;  const metadata = getIntlayer("page-metadata", locale);  /**   * Generuje obiekt zawierający wszystkie adresy URL dla każdego języka.   *   * Przykład:   * ```ts   *  getMultilingualUrls('/about');   *   *  // Zwraca   *  // {   *  //   en: '/about',   *  //   fr: '/fr/about',   *  //   es: '/es/about',   *  // }   * ```   */  const multilingualUrls = getMultilingualUrls("/");  return {    ...metadata,    alternates: {      canonical: multilingualUrls[locale as keyof typeof multilingualUrls],      languages: { ...multilingualUrls, "x-default": "/" },    },    openGraph: {      url: multilingualUrls[locale],    },  };};// ... Reszta kodu

Zauważ, że funkcja getIntlayer importowana z next-intlayer zwraca Twoją zawartość opakowaną w IntlayerNode, co umożliwia integrację z edytorem wizualnym. Natomiast funkcja getIntlayer importowana z intlayer zwraca Twoją zawartość bezpośrednio, bez dodatkowych właściwości.

Alternatywnie możesz użyć funkcji getTranslation do deklarowania swoich metadanych. Jednak zaleca się używanie plików deklaracji treści, aby zautomatyzować tłumaczenie metadanych oraz w pewnym momencie wyodrębnić zawartość na zewnątrz.

import {  type IConfigLocales,  getTranslation,  getMultilingualUrls,} from "intlayer";import type { Metadata } from "next";import type { LocalPromiseParams } from "next-intlayer";export const generateMetadata = async ({  params,}: LocalPromiseParams): Promise<Metadata> => {  const { locale } = await params;  const t = <T>(content: IConfigLocales<T>) => getTranslation(content, locale);  return {    title: t<string>({      en: "My title",Alternatywnie możesz użyć funkcji `getTranslation` do deklarowania swoich metadanych. Jednak zaleca się korzystanie z plików deklaracji treści, aby zautomatyzować tłumaczenie metadanych i w pewnym momencie wyodrębnić zawartość na zewnątrz.```typescript fileName="src/app/[locale]/layout.tsx or src/app/[locale]/page.tsx" codeFormat="typescript"import {  type IConfigLocales,  getTranslation,  getMultilingualUrls,} from "intlayer";import type { Metadata } from "next";import type { LocalPromiseParams } from "next-intlayer";export const generateMetadata = async ({  params,}: LocalPromiseParams): Promise<Metadata> => {  const { locale } = await params;  const t = <T>(content: IConfigLocales<T>) => getTranslation(content, locale);  return {    title: t<string>({      en: "My title",      fr: "Mon titre",      es: "Mi título",    }),    description: t({      en: "My description",      fr: "Ma description",      es: "Mi descripción",    }),  };};// ... Reszta kodu

Dowiedz się więcej o optymalizacji metadanych w oficjalnej dokumentacji Next.js.

```javascript fileName="src/app/[locale]/layout.cjs or src/app/[locale]/page.cjs" codeFormat="commonjs"const { getTranslation, getMultilingualUrls } = require("intlayer");const generateMetadata = async ({ params }) => {  const { locale } = await params;  const t = (content) => getTranslation(content, locale);  return {    title: t({      en: "My title",      fr: "Mon titre",      es: "Mi título",    }),    description: t({      en: "My description",      fr: "Ma description",      es: "Mi descripción",    }),  };};module.exports = { generateMetadata };// ... Reszta kodu

Dowiedz się więcej o optymalizacji metadanych w oficjalnej dokumentacji Next.js.

(Opcjonalny) Krok 9: Internacjonalizacja plików sitemap.xml i robots.txt

Aby zinternacjonalizować swoje pliki sitemap.xml i robots.txt, możesz użyć funkcji getMultilingualUrls dostarczonej przez Intlayer. Funkcja ta pozwala na generowanie wielojęzycznych adresów URL dla Twojej mapy witryny.

import { getMultilingualUrls } from "intlayer";import type { MetadataRoute } from "next";const sitemap = (): MetadataRoute.Sitemap => [  {    url: "https://example.com",    alternates: {      languages: { ...getMultilingualUrls("https://example.com") },    },  },  {    url: "https://example.com/login",    alternates: {      languages: { ...getMultilingualUrls("https://example.com/login") },    },  },  {    url: "https://example.com/register",    alternates: {      languages: { ...getMultilingualUrls("https://example.com/register") },    },  },];export default sitemap;

import type { MetadataRoute } from "next";import { getMultilingualUrls } from "intlayer";const getAllMultilingualUrls = (urls: string[]) =>  urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);// Funkcja zwraca reguły dla pliku robots.txtconst robots = (): MetadataRoute.Robots => ({  rules: {    userAgent: "*", // Dotyczy wszystkich robotów    allow: ["/"], // Zezwól na dostęp do strony głównej    disallow: getAllMultilingualUrls(["/login", "/register"]), // Zabroń dostępu do stron logowania i rejestracji we wszystkich językach  },  host: "https://example.com", // Główna domena serwisu  sitemap: `https://example.com/sitemap.xml`, // Lokalizacja mapy strony});export default robots;

Dowiedz się więcej o optymalizacji mapy witryny w oficjalnej dokumentacji Next.js. Dowiedz się więcej o optymalizacji pliku robots.txt w oficjalnej dokumentacji Next.js.

(Opcjonalny) Krok 10: Zmień język swojej zawartości

Aby zmienić język swojej zawartości w Next.js, zalecanym sposobem jest użycie komponentu Link do przekierowania użytkowników na odpowiednią zlokalizowaną stronę. Komponent Link umożliwia prefetching strony, co pomaga uniknąć pełnego przeładowania strony.

"use client";import type { FC } from "react";import {  Locales,  getHTMLTextDir,  getLocaleName,  getLocalizedUrl,} from "intlayer";import { useLocale } from "next-intlayer";import Link from "next/link";export const LocaleSwitcher: FC = () => {  const { locale, pathWithoutLocale, availableLocales, setLocale } =    useLocale();  return (    <div>      <button popoverTarget="localePopover">{getLocaleName(locale)}</button>      <div id="localePopover" popover="auto">        {availableLocales.map((localeItem) => (          <Link            href={getLocalizedUrl(pathWithoutLocale, localeItem)}            key={localeItem}            aria-current={locale === localeItem ? "page" : undefined}            onClick={() => setLocale(localeItem)}            replace // Zapewni, że przycisk "wstecz" w przeglądarce przekieruje do poprzedniej strony          >            <span>              {/* Lokalizacja - np. FR */}              {localeItem}            </span>            <span>              {/* Język w swojej własnej lokalizacji - np. Français */}              {getLocaleName(localeItem, locale)}            </span>            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>              {/* Język w bieżącej lokalizacji - np. Francés przy ustawionej lokalizacji Locales.SPANISH */}              {getLocaleName(localeItem)}            </span>            <span dir="ltr" lang={Locales.ENGLISH}>              {/* Język po angielsku - np. French */}              {getLocaleName(localeItem, Locales.ENGLISH)}            </span>          </Link>        ))}      </div>    </div>  );};

Alternatywnym sposobem jest użycie funkcji setLocale dostarczonej przez hook useLocale. Ta funkcja nie pozwala na prefetchowanie strony. Zobacz dokumentację useLocale hook po więcej szczegółów.

Możesz również ustawić funkcję w opcji onLocaleChange, aby wywołać niestandardową funkcję, gdy zmieni się lokalizacja.

"use client";import { useRouter } from "next/navigation";import { useLocale } from "next-intlayer";import { getLocalizedUrl } from "intlayer";// ... Reszta koduconst router = useRouter();const { setLocale } = useLocale({  onLocaleChange: (locale) => {    router.push(getLocalizedUrl(pathWithoutLocale, locale));  },});return (  <button onClick={() => setLocale(Locales.FRENCH)}>Zmień na francuski</button>);

Odnośniki do dokumentacji:

• useLocale hook
• getLocaleName hook
• getLocalizedUrl hook
• getHTMLTextDir hook
• hrefLang attribute
• lang attribute
• dir attribute`
• aria-current attribute`

(Opcjonalny) Krok 11: Tworzenie zlokalizowanego komponentu Link

Aby zapewnić, że nawigacja w Twojej aplikacji respektuje aktualny język, możesz stworzyć niestandardowy komponent Link. Ten komponent automatycznie dodaje prefiks z aktualnym językiem do wewnętrznych adresów URL. Na przykład, gdy użytkownik mówiący po francusku kliknie link do strony "O nas", zostanie przekierowany na /fr/about zamiast na /about.

To zachowanie jest przydatne z kilku powodów:

• SEO i doświadczenie użytkownika: Lokalizowane adresy URL pomagają wyszukiwarkom poprawnie indeksować strony w określonych językach oraz dostarczać użytkownikom treści w ich preferowanym języku.
• Spójność: Korzystając z lokalizowanego linku w całej aplikacji, zapewniasz, że nawigacja pozostaje w obrębie aktualnego języka, zapobiegając nieoczekiwanym zmianom języka.
• Utrzymywalność: Centralizacja logiki lokalizacji w jednym komponencie upraszcza zarządzanie adresami URL, co sprawia, że baza kodu jest łatwiejsza do utrzymania i rozbudowy wraz z rozwojem aplikacji.

Poniżej znajduje się implementacja lokalizowanego komponentu Link w TypeScript:

"use client";import { getLocalizedUrl } from "intlayer";import NextLink, { type LinkProps as NextLinkProps } from "next/link";import { useLocale } from "next-intlayer";import type { PropsWithChildren, FC } from "react";/** * Funkcja pomocnicza do sprawdzania, czy dany URL jest zewnętrzny. * Jeśli URL zaczyna się od http:// lub https://, jest uznawany za zewnętrzny. */export const checkIsExternalLink = (href?: string): boolean =>  /^https?:\/\//.test(href ?? "");/** * Niestandardowy komponent Link, który dostosowuje atrybut href na podstawie bieżącego języka. * Dla linków wewnętrznych używa `getLocalizedUrl`, aby poprzedzić URL kodem języka (np. /fr/about). * Zapewnia to, że nawigacja pozostaje w kontekście tego samego języka. */export const Link: FC<PropsWithChildren<NextLinkProps>> = ({  href,  children,  ...props}) => {  const { locale } = useLocale();  const isExternalLink = checkIsExternalLink(href.toString());  // Jeśli link jest wewnętrzny i podano prawidłowy href, pobierz zlokalizowany URL.  const hrefI18n: NextLinkProps["href"] =    href && !isExternalLink ? getLocalizedUrl(href.toString(), locale) : href;  return (    <NextLink href={hrefI18n} {...props}>      {children}    </NextLink>  );};

Jak to działa

• Wykrywanie linków zewnętrznych:
  Funkcja pomocnicza checkIsExternalLink określa, czy URL jest zewnętrzny. Linki zewnętrzne pozostają niezmienione, ponieważ nie wymagają lokalizacji.

• Pobieranie bieżącej lokalizacji:
  Hook useLocale dostarcza bieżącą lokalizację (np. fr dla języka francuskiego).

• Lokalizacja URL:
  Dla linków wewnętrznych (czyli nie zewnętrznych) używana jest funkcja getLocalizedUrl, która automatycznie dodaje prefiks lokalizacji do URL. Oznacza to, że jeśli użytkownik korzysta z wersji francuskiej, przekazanie /about jako href zostanie przekształcone na /fr/about.

• Zwracanie linku:
  Komponent zwraca element <a> z zlokalizowanym URL, zapewniając, że nawigacja jest spójna z lokalizacją.

Integrując ten komponent Link w całej aplikacji, utrzymujesz spójne i świadome językowo doświadczenie użytkownika, jednocześnie korzystając z poprawy SEO i użyteczności.

(Opcjonalnie) Krok 12: Pobierz aktualny locale w Server Actions

Jeśli potrzebujesz aktywnego locale wewnątrz Server Action (np. do lokalizacji e-maili lub wykonywania logiki zależnej od locale), wywołaj getLocale z next-intlayer/server:

"use server";import { getLocale } from "next-intlayer/server";export const myServerAction = async () => {  const locale = await getLocale();  // Wykonaj coś z locale};

Funkcja getLocale stosuje kaskadową strategię, aby określić locale użytkownika:

1. Najpierw sprawdza nagłówki żądania pod kątem wartości lokalizacji, która mogła zostać ustawiona przez proxy
2. Jeśli nie znajdzie lokalizacji w nagłówkach, szuka lokalizacji zapisanej w ciasteczkach
3. Jeśli nie znajdzie ciasteczka, próbuje wykryć preferowany język użytkownika na podstawie ustawień przeglądarki
4. W ostateczności używa domyślnej lokalizacji skonfigurowanej w aplikacji

Zapewnia to wybór najbardziej odpowiedniej lokalizacji na podstawie dostępnego kontekstu.

(Opcjonalny) Krok 13: Optymalizacja rozmiaru paczki

Podczas korzystania z next-intlayer, słowniki są domyślnie dołączane do paczki dla każdej strony. Aby zoptymalizować rozmiar paczki, Intlayer udostępnia opcjonalny plugin SWC, który inteligentnie zastępuje wywołania useIntlayer za pomocą makr. Zapewnia to, że słowniki są dołączane tylko do paczek dla stron, które faktycznie ich używają.

Aby włączyć tę optymalizację, zainstaluj pakiet @intlayer/swc. Po instalacji next-intlayer automatycznie wykryje i użyje tego pluginu:

npm install @intlayer/swc --save-dev

Uwaga: Ta optymalizacja jest dostępna tylko dla Next.js w wersji 13 i wyższych.

Uwaga: Ten pakiet nie jest instalowany domyślnie, ponieważ wtyczki SWC są wciąż eksperymentalne w Next.js. Może się to zmienić w przyszłości.

Monitorowanie zmian słowników w Turbopack

Podczas korzystania z Turbopack jako serwera deweloperskiego z poleceniem next dev, zmiany w słownikach nie będą domyślnie automatycznie wykrywane.

To ograniczenie wynika z faktu, że Turbopack nie może uruchamiać wtyczek webpack równolegle, aby monitorować zmiany w plikach zawartości. Aby to obejść, musisz użyć polecenia intlayer watch, aby jednocześnie uruchomić serwer deweloperski oraz obserwatora budowy Intlayer.

{  // ... Twoje istniejące konfiguracje package.json  "scripts": {    // ... Twoje istniejące konfiguracje skryptów    "dev": "intlayer watch --with 'next dev'",  },}

Jeśli używasz next-intlayer@<=6.x.x, musisz zachować flagę --turbopack, aby aplikacja Next.js 16 działała poprawnie z Turbopack. Zalecamy używanie next-intlayer@>=7.x.x, aby uniknąć tego ograniczenia.

Konfiguracja TypeScript

Intlayer korzysta z rozszerzania modułów, aby wykorzystać zalety TypeScript i wzmocnić bazę kodu.

Upewnij się, że Twoja konfiguracja TypeScript zawiera automatycznie generowane typy.

{  // ... Twoje istniejące konfiguracje TypeScript  "include": [    // ... Twoje istniejące konfiguracje TypeScript    ".intlayer/**/*.ts", // Include the auto-generated types  ],}

Konfiguracja Git

Zaleca się ignorowanie plików generowanych przez Intlayer. Pozwala to uniknąć ich zatwierdzania do repozytorium Git.

Aby to zrobić, możesz dodać następujące instrukcje do pliku .gitignore:

# Ignoruj pliki generowane przez Intlayer.intlayer

Rozszerzenie VS Code

Aby poprawić swoje doświadczenie programistyczne z Intlayer, możesz zainstalować oficjalne rozszerzenie Intlayer dla VS Code.

Zainstaluj z Marketplace VS Code

To rozszerzenie oferuje:

• Autouzupełnianie kluczy tłumaczeń.
• Wykrywanie błędów w czasie rzeczywistym dla brakujących tłumaczeń.
• Podglądy w linii przetłumaczonej treści.
• Szybkie akcje umożliwiające łatwe tworzenie i aktualizowanie tłumaczeń.

Aby uzyskać więcej informacji na temat korzystania z rozszerzenia, zapoznaj się z dokumentacją rozszerzenia Intlayer VS Code.

Idź dalej

Aby pójść dalej, możesz zaimplementować edytor wizualny lub zewnętrznie zarządzać swoją treścią za pomocą CMS.