Intlayer ile Next.js 15 çevirin | Uluslararasılaştırma (i18n)

GitHub'da Uygulama Şablonuna bakın.

Neden alternatifler yerine Intlayer?

'Next-intl' veya 'i18next' gibi ana çözümlerle karşılaştırıldığında Intlayer, aşağıdaki gibi entegre optimizasyonlarla gelen bir çözümdür:

Next.js Uygulamasında Intlayer Kurulumu Adım Adım Kılavuzu

1. 1

   Bağımlılıkları Kurma

   Gerekli paketleri npm kullanarak kurun:

   bash

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   npm install intlayer next-intlayernpx intlayer init

   • intlayer

     Yapılandırma yönetimi, çeviri, içerik bildirimi, derleme ve CLI komutları için uluslararasılaştırma araçları sağlayan çekirdek paket.

   • next-intlayer

     Intlayer'ı Next.js ile entegre eden paket. Next.js için bağlam sağlayıcıları ve kancalar sağlar. Ayrıca, Intlayer'ı Webpack veya Turbopack ile entegre etmek için Next.js eklentisini içerir, ayrıca kullanıcının tercih ettiği yerel ayarı algılamak, çerezleri yönetmek ve URL yönlendirmesini işlemek için middleware içerir.

2. 2

   Projenizi Yapılandırma

   Here is the final structure that we will make:

   bash

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   .├── src│   ├── app│   │   ├── [locale]│   │   │   ├── layout.tsx            # Locale layout for the Intlayer provider│   │   │   ├── page.content.ts│   │   │   └── page.tsx│   │   └── layout.tsx                # Root layout for style and global providers│   ├── components│   │   ├── client-component-example.content.ts│   │   ├── ClientComponentExample.tsx│   │   ├── LocaleSwitcher│   │   │   ├── localeSwitcher.content.ts│   │   │   └── LocaleSwitcher.tsx│   │   ├── server-component-example.content.ts│   │   └── ServerComponentExample.tsx│   └── middleware.ts├── intlayer.config.ts├── next.config.ts├── package.json└── tsconfig.json

   If you don't want locale routing, intlayer can be used as a simple provider / hook. See this guide for more details.

   Uygulamanızın dillerini yapılandırmak için bir yapılandırma dosyası oluşturun:

   intlayer.config.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import { Locales, type IntlayerConfig } from "intlayer";
   
   const config: IntlayerConfig = {
     internationalization: {
       locales: [
         Locales.ENGLISH,
         Locales.FRENCH,
         Locales.SPANISH,
         // Diğer yerel ayarlarınız
       ],
       defaultLocale: Locales.ENGLISH,
     },
   };
   
   export default config;

   Bu yapılandırma dosyası aracılığıyla, yerelleştirilmiş URL'ler, middleware yönlendirmesi, çerez adları, içerik bildirimlerinizin konumu ve uzantısı, Intlayer günlüklerinin konsolda devre dışı bırakılması ve daha fazlasını ayarlayabilirsiniz. Kullanılabilir parametrelerin tam listesi için yapılandırma dokümantasyonuna bakın.

3. 3

   Next.js Yapılandırmanızda Intlayer'ı Entegre Etme

   Next.js kurulumunuzu Intlayer ile uyumlu hale getirin:

   next.config.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import type { NextConfig } from "next";
   import { withIntlayer } from "next-intlayer/server";
   
   const nextConfig: NextConfig = {
     /* yapılandırma seçenekleri burada */
   };
   
   export default withIntlayer(nextConfig);

   withIntlayer() Next.js eklentisi, Intlayer'ı Next.js ile entegre etmek için kullanılır. İçerik bildirim dosyalarının oluşturulmasını sağlar ve bunları geliştirme modunda izler. Intlayer ortam değişkenlerini Webpack veya Turbopack ortamlarında tanımlar. Ayrıca, performansı optimize etmek ve sunucu bileşenleriyle uyumluluğu sağlamak için takma adlar sağlar. withIntlayer() fonksiyonu promise tabanlı bir fonksiyondur.

4. 4

   Dinamik Yerel Rotalar Tanımlama

   RootLayout'dan her şeyi kaldırın ve aşağıdaki kodla değiştirin:

   src/app/layout.tsx

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import type { PropsWithChildren, FC } from "react";
   import "./globals.css";
   
   const RootLayout: FC<PropsWithChildren> = ({ children }) => children;
   
   export default RootLayout;

   RootLayout bileşenini boş tutmak, lang ve dir niteliklerini <html> etiketine ayarlamanıza izin verir.

   Dinamik yönlendirmeyi uygulamak için, [locale] dizininizde yeni bir düzen sağlayarak yerel ayar için yolu ekleyin:

   src/app/[locale]/layout.tsx

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import { type NextLayoutIntlayer, IntlayerClientProvider } 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}>
           <IntlayerClientProvider locale={locale}>
             {children}
           </IntlayerClientProvider>
         </body>
       </html>
     );
   };
   
   export default LocaleLayout;

   [locale] yol segmenti, yerel ayarı tanımlamak için kullanılır. Örnek: /en-US/about en-US'ye, /fr/about ise fr'ye referans verir.

   Bu aşamada, "Kök düzeninde <html> ve <body> etiketleri eksik" hatasıyla karşılaşacaksınız. Bu beklenir çünkü /app/page.tsx dosyası artık kullanımda değildir ve kaldırılabilir. Bunun yerine, [locale] yol segmenti /app/[locale]/page.tsx sayfasını etkinleştirir. Sonuç olarak, sayfalar tarayıcınızda /en, /fr, /es gibi yollarla erişilebilir olacaktır. Varsayılan yerel ayarı kök sayfa olarak ayarlamak için adım 7'deki middleware kurulumuna bakın.

   Ardından, uygulama düzeninizde generateStaticParams fonksiyonunu uygulayın.

   src/app/[locale]/layout.tsx

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   export { generateStaticParams } from "next-intlayer"; // Eklenecek satır
   
   const LocaleLayout: NextLayoutIntlayer = async ({ children, params }) => {
     /*... Geri kalan kod*/
   };
   
   export default LocaleLayout;

   generateStaticParams, uygulamanızın tüm yerel ayarlar için gerekli sayfaları önceden oluşturmasını sağlar, böylece çalışma zamanı hesaplamasını azaltır ve kullanıcı deneyimini iyileştirir. Daha fazla detay için Next.js'in generateStaticParams dokümantasyonuna bakın.

5. 5

   İçeriğinizi Bildirin

   Çevirileri depolamak için içerik bildirimlerinizi oluşturun ve yönetin:

   src/app/[locale]/page.content.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   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;

   İçerik bildirimleriniz, varsayılan olarak ./src olan contentDir dizinine dahil olduğu sürece uygulamanızın herhangi bir yerinde tanımlanabilir. Ve içerik bildirim dosyası uzantısı (varsayılan olarak .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}) ile eşleşmelidir.

   Daha fazla detay için içerik bildirim dokümantasyonuna bakın.

6. 6

   Kodunuzda İçeriği Kullanın

   İçerik sözlüklerinize uygulamanız boyunca erişin:

   src/app/[locale]/page.tsx

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import type { FC } from "react";
   import { ClientComponentExample } from "@components/ClientComponentExample";
   import { ServerComponentExample } from "@components/ServerComponentExample";
   import { type NextPageIntlayer } 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 />
   
         <ClientComponentExample />
       </IntlayerServerProvider>
     );
   };
   
   export default Page;

   • IntlayerClientProvider istemci tarafı bileşenleri için yerel ayarı sağlamak için kullanılır. Düzen dahil olmak üzere herhangi bir üst bileşende yerleştirilebilir. Ancak, düzenlerde yerleştirmek önerilir çünkü Next.js düzen kodunu sayfalar arasında paylaşır, böylece yeniden başlatmadan kaçınılır ve performans iyileştirilir. Düzenlerde IntlayerClientProvider kullanmak, uygulamanız genelinde tutarlı bir yerelleştirme bağlamı sağlar.

   • IntlayerServerProvider sunucu alt öğeleri için yerel ayarı sağlamak için kullanılır. Düzenlerde ayarlanamaz.

     Düzen ve sayfa, sunucu bağlam sistemi React'in cache mekanizması aracılığıyla istek başına veri deposuna dayandığı için ortak bir sunucu bağlamını paylaşamaz. Sağlayıcıyı paylaşılan bir düzende yerleştirmek, sunucu bileşenlerinize sunucu bağlam değerlerinin doğru şekilde yayılmasını engelleyen bu izolasyonu bozar.

   src/components/ClientComponentExample.tsx

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   "use client";
   
   import type { FC } from "react";
   import { useIntlayer } from "next-intlayer";
   
   export const ClientComponentExample: FC = () => {
     const content = useIntlayer("client-component-example"); // İlgili içerik bildirimi oluşturun
   
     return (
       <div>
         <h2>{content.title}</h2>
         <p>{content.content}</p>
       </div>
     );
   };

   src/components/ServerComponentExample.tsx

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import type { FC } from "react";
   import { useIntlayer } from "next-intlayer/server";
   
   export const ServerComponentExample: FC = () => {
     const content = useIntlayer("server-component-example"); // İlgili içerik bildirimi oluşturun
   
     return (
       <div>
         <h2>{content.title}</h2>
         <p>{content.content}</p>
       </div>
     );
   };

   İçeriğinizi bir string niteliğinde kullanmak istiyorsanız, alt, title, href, aria-label vb. gibi, fonksiyonun değerini çağırmanız gerekir:

   html

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   <img src="{content.image.src.value}" alt="{content.image.value}" /><img src="{content.image.src.toString()}" alt="{content.image.toString()}" /><img src="{String(content.image.src)}" alt="{String(content.image)}" />

   useIntlayer kancası hakkında daha fazla bilgi edinmek için dokümantasyona bakın.

7. 7

   Yerel Algılama için Middleware Kurulumu

   İsteğe bağlı

   Kullanıcının tercih ettiği yerel ayarı algılamak için middleware kurun:

   src/middleware.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

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

   intlayerMiddleware, kullanıcının tercih ettiği yerel ayarı algılar ve onları yapılandırmada belirtildiği gibi uygun URL'ye yönlendirir. Ayrıca, kullanıcının tercih ettiği yerel ayarı bir çerezde kaydetmeyi etkinleştirir.

8. 8

   Meta verilerinizin uluslararasılaştırılması

   İsteğe bağlı

   Meta verilerinizi uluslararasılaştırmak istiyorsanız, sayfanızın başlığını çevirmek gibi, Next.js tarafından sağlanan generateMetadata fonksiyonunu kullanabilirsiniz. İçinde, getIntlayer fonksiyonundan içeriği alarak meta verilerinizi çevirebilirsiniz.

   src/app/[locale]/metadata.content.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   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;

   src/app/[locale]/layout.tsx or src/app/[locale]/page.tsx

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   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);
   
     /**
      * Her yerel ayar için tüm URL'leri içeren bir nesne oluşturur.
      *
      * Örnek:
      * ```ts
      *  getMultilingualUrls('/about');
      *
      *  // Döndürür
      *  // {
      *  //   en: '/about',
      *  //   fr: '/fr/about',
      *  //   es: '/es/about',
      *  // }
      * ```
      */
     const multilingualUrls = getMultilingualUrls("/");
     const localizedUrl =
       multilingualUrls[locale as keyof typeof multilingualUrls];
   
     return {
       ...metadata,
       alternates: {
         canonical: localizedUrl,
         languages: { ...multilingualUrls, "x-default": "/" },
       },
       openGraph: {
         url: localizedUrl,
       },
     };
   };
   
   // ... Geri kalan kod

   Not: next-intlayer'dan içe aktarılan getIntlayer fonksiyonu, içeriğinizi görsel düzenleyici ile entegrasyon için IntlayerNode'a sarılmış olarak döndürür. Aksine, intlayer'dan içe aktarılan getIntlayer fonksiyonu içeriğinizi doğrudan ek özellikler olmadan döndürür.

   Alternatif olarak, meta verilerinizi bildirmek için getTranslation fonksiyonunu kullanabilirsiniz. Ancak, içerik bildirim dosyalarını kullanmak, meta verilerinizin çevirisini otomatikleştirmek ve içeriği bir noktada harici hale getirmek için önerilir.

   src/app/[locale]/layout.tsx or src/app/[locale]/page.tsx

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   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",
       }),
     };
   };
   
   // ... Geri kalan kod

   Meta veri optimizasyonu hakkında daha fazla bilgi edinmek için resmi Next.js dokümantasyonuna bakın.

9. 9

   Sitemap.xml ve robots.txt'nizin uluslararasılaştırılması

   İsteğe bağlı

   sitemap.xml ve robots.txt'nizi uluslararasılaştırmak için, Intlayer tarafından sağlanan getMultilingualUrls fonksiyonunu kullanabilirsiniz. Bu fonksiyon, sitemap'iniz için çok dilli URL'ler oluşturmanıza izin verir.

   src/app/sitemap.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

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

   src/app/robots.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import type { MetadataRoute } from "next";
   import { getMultilingualUrls } from "intlayer";
   
   const getAllMultilingualUrls = (urls: string[]) =>
     urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);
   
   const robots = (): MetadataRoute.Robots => ({
     rules: {
       userAgent: "*",
       allow: ["/"],
       disallow: getAllMultilingualUrls(["/login", "/register"]),
     },
     host: "https://example.com",
     sitemap: `https://example.com/sitemap.xml`,
   });
   
   export default robots;

   Sitemap optimizasyonu hakkında daha fazla bilgi edinmek için resmi Next.js dokümantasyonuna. Robots.txt optimizasyonu hakkında daha fazla bilgi edinmek için resmi Next.js dokümantasyonuna bakın.

10. 10

    İçeriğinizin dilini değiştirme

    İsteğe bağlı

    Next.js'te içeriğinizin dilini değiştirmek için, kullanıcıları uygun yerelleştirilmiş sayfaya yönlendirmek için Link bileşenini kullanmak önerilen yoldur. Link bileşeni, sayfa ön yüklemesini etkinleştirir, bu da tam sayfa yeniden yüklemeden kaçınmaya yardımcı olur.

    src/components/LocaleSwitcher.tsx

    İçeriği kopyala

    Kodu kopyala

    Kodu panoya kopyala

    "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)}
                hrefLang={localeItem}
                key={localeItem}
                aria-current={locale === localeItem ? "page" : undefined}
                onClick={() => setLocale(localeItem)}
              >
                <span>
                  {/* Yerel ayar - örn. FR */}
                  {localeItem}
                </span>
                <span>
                  {/* Kendi yerel ayarındaki dil - örn. Français */}
                  {getLocaleName(localeItem, locale)}
                </span>
                <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
                  {/* Geçerli yerel ayar set edildiğinde dil - örn. Locales.SPANISH set edildiğinde Francés */}
                  {getLocaleName(localeItem)}
                </span>
                <span dir="ltr" lang={Locales.ENGLISH}>
                  {/* İngilizce'deki dil - örn. French */}
                  {getLocaleName(localeItem, Locales.ENGLISH)}
                </span>
              </Link>
            ))}
          </div>
        </div>
      );
    };

    Alternatif bir yol, useLocale kancası tarafından sağlanan setLocale fonksiyonunu kullanmaktır. Bu fonksiyon, sayfa ön yüklemesine izin vermez ve sayfayı yeniden yükler.

    Bu durumda, router.push kullanarak yönlendirme olmadan, sadece sunucu tarafı kodunuz içeriğin yerel ayarını değiştirecektir.

    src/components/LocaleSwitcher.tsx

    İçeriği kopyala

    Kodu kopyala

    Kodu panoya kopyala

    "use client";import { useRouter } from "next/navigation";import { useLocale } from "next-intlayer";import { getLocalizedUrl } from "intlayer";// ... Geri kalan kodconst router = useRouter();const { setLocale } = useLocale({  onLocaleChange: (locale) => {    router.push(getLocalizedUrl(pathWithoutLocale, locale));  },});return (  <button onClick={() => setLocale(Locales.FRENCH)}>Fransızca'ya Geç</button>);

    Dokümantasyon referansları:

    • useLocale kancası
    • getLocaleName kancası
    • getLocalizedUrl kancası
    • getHTMLTextDir kancası
    • hrefLang özelliği
    • lang özelliği
    • dir özelliği
    • aria-current özelliği

11. 11

    Yerelleştirilmiş Bağlantı Bileşeni Oluşturma

    İsteğe bağlı

    Uygulamanızın navigasyonunun mevcut yerel ayarı saygı göstermesini sağlamak için, özel bir Link bileşeni oluşturabilirsiniz. Bu bileşen, dahili URL'leri otomatik olarak mevcut dille önekler, böylece örneğin Fransızca konuşan bir kullanıcı "Hakkında" sayfasına bir bağlantıya tıkladığında, /fr/hakkinda yerine /hakkindaya yönlendirilir.

    Bu davranış birkaç nedenden dolayı kullanışlıdır:

    • SEO ve Kullanıcı Deneyimi: Yerelleştirilmiş URL'ler, arama motorlarının dil özel sayfalarını doğru şekilde indekslemesine yardımcı olur ve kullanıcılara tercih ettikleri dilde içerik sağlar.
    • Tutarlılık: Uygulamanız boyunca yerelleştirilmiş bir bağlantı kullanarak, navigasyonun mevcut yerel ayar içinde kalmasını garanti edersiniz, beklenmedik dil anahtarlarını önlersiniz.
    • Bakım Kolaylığı: URL yönetim mantığını tek bir bileşende merkezileştirmek, kod tabanınızı yönetmeyi ve uygulamanız büyüdükçe genişletmeyi basitleştirir.

    Aşağıda, TypeScript'te yerelleştirilmiş bir Link bileşeninin uygulanması bulunmaktadır:

    src/components/Link.tsx

    İçeriği kopyala

    Kodu kopyala

    Kodu panoya kopyala

    "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";
    
    /**
     * Verilen bir URL'nin harici olup olmadığını kontrol eden yardımcı fonksiyon.
     * URL http:// veya https:// ile başlıyorsa, harici olarak kabul edilir.
     */
    export const checkIsExternalLink = (href?: string): boolean =>
      /^https?:\/\//.test(href ?? "");
    
    /**
     * Href özelliğini mevcut yerel ayar temelinde uyarlayan özel bir Link bileşeni.
     * Dahili bağlantılar için, `getLocalizedUrl` kullanarak URL'yi yerel ayar ile önekler (örneğin, /fr/hakkinda).
     * Bu, navigasyonun aynı yerel ayar bağlamında kalmasını sağlar.
     */
    export const Link: FC<PropsWithChildren<NextLinkProps>> = ({
      href,
      children,
      ...props
    }) => {
      const { locale } = useLocale();
      const isExternalLink = checkIsExternalLink(href.toString());
    
      // Bağlantı dahili ise ve geçerli bir href sağlanmışsa, yerelleştirilmiş URL'yi alın.
      const hrefI18n: NextLinkProps["href"] =
        href && !isExternalLink ? getLocalizedUrl(href.toString(), locale) : href;
    
      return (
        <NextLink href={hrefI18n} {...props}>
          {children}
        </NextLink>
      );
    };

    Nasıl Çalışır

    • Harici Bağlantıları Algılama:
      Yardımcı fonksiyon checkIsExternalLink, bir URL'nin harici olup olmadığını belirler. Harici bağlantılar değişmeden bırakılır çünkü yerelleştirmeye ihtiyaçları yoktur.

    • Mevcut Yerel Ayarı Alma:
      useLocale kancası mevcut yerel ayarı sağlar (örneğin, Fransızca için fr).

    • URL'yi Yerelleştirme:
      Dahili bağlantılar (yani harici olmayan) için, getLocalizedUrl kullanarak URL'yi otomatik olarak mevcut yerel ayar ile önekler. Bu, kullanıcınız Fransızca ise, /hakkinda href'ini geçmek onu /fr/hakkindaya dönüştürür.

    • Bağlantıyı Döndürme:
      Bileşen, yerelleştirilmiş URL ile bir <a> elementi döndürür, böylece navigasyon yerel ayar ile tutarlı olur.

    Bu Link bileşenini uygulamanız boyunca entegre ederek, tutarlı ve dil bilincine sahip bir kullanıcı deneyimi sürdürürsünüzken aynı zamanda gelişmiş SEO ve kullanılabilirlikten de yararlanırsınız.

12. 12

    bundle boyutunuzu Optimize Edin

    İsteğe bağlı

    next-intlayer kullanırken, sözlükler varsayılan olarak her sayfa için pakete dahil edilir. bundle boyutunu optimize etmek için, Intlayer isteğe bağlı bir SWC eklentisi sağlar ki bu, useIntlayer çağrılarını akıllıca makrolar kullanarak değiştirir. Bu, sözlüklerin sadece onları gerçekten kullanan sayfalar için paketlere dahil edilmesini sağlar.

    Bu optimizasyonu etkinleştirmek için, @intlayer/swc paketini kurun. Kurulduktan sonra, next-intlayer eklentiyi otomatik olarak algılayacak ve kullanacaktır:

    bash

    İçeriği kopyala

    Kodu kopyala

    Kodu panoya kopyala

    npm install @intlayer/swc --save-dev

    Not: Bu optimizasyon sadece Next.js 13 ve üzeri için kullanılabilir.

    Not: Bu paket varsayılan olarak kurulmaz çünkü SWC eklentileri Next.js'te hala deneyseldir. Gelecekte değişebilir.

TypeScript Yapılandırma

Intlayer, TypeScript'ten faydalanmak ve kod tabanınızı daha güçlü hale getirmek için modül genişletmesi kullanır.

TypeScript yapılandırmanızın otomatik olarak oluşturulan türleri içerdiğinden emin olun.

{  // ... Mevcut TypeScript yapılandırmalarınız  "include": [    // ... Mevcut TypeScript yapılandırmalarınız    ".intlayer/**/*.ts", // Otomatik olarak oluşturulan türleri dahil edin  ],}

Git Yapılandırma

Intlayer tarafından oluşturulan dosyaları yok saymanız önerilir. Bu, onları Git deposuna göndermemenizi sağlar.

Bunu yapmak için, .gitignore dosyanıza aşağıdaki talimatları ekleyebilirsiniz:

# Intlayer tarafından oluşturulan dosyaları yok say.intlayer

VS Code Uzantısı

Intlayer ile geliştirme deneyiminizi geliştirmek için, resmi Intlayer VS Code Uzantısı'nı kurabilirsiniz.

VS Code Marketplace'ten Kurun

Bu uzantı şunları sağlar:

• Çeviri anahtarları için otomatik tamamlama.
• Eksik çeviriler için gerçek zamanlı hata algılama.
• Çevrilmiş içeriğin satır içi önizlemeleri.
• Çevirileri kolayca oluşturmak ve güncellemek için hızlı eylemler.

Uzantının nasıl kullanılacağı hakkında daha fazla detay için, Intlayer VS Code Uzantısı dokümantasyonuna bakın.

Daha Fazla Bilgi Edinin

Daha fazla ilerlemek için, görsel düzenleyiciyi uygulayabilir veya içeriğinizi CMS kullanarak harici hale getirebilirsiniz.