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

GitHub'da Uygulama Şablonuna bakın.

Intlayer Nedir?

Intlayer, modern web uygulamalarında çok dilli desteği basitleştirmek için tasarlanmış yenilikçi, açık kaynaklı bir uluslararasılaştırma (i18n) kütüphanesidir. Next.js 15 framework'ü ile sorunsuz bir şekilde entegre olur ve güçlü App Router'ını içerir. Sunucu Bileşenleri ile verimli rendering için optimize edilmiştir ve Turbopack ile tamamen uyumludur.

Intlayer ile şunları yapabilirsiniz:

• Çevirileri bildirimsel sözlükler kullanarak kolayca yönetin bileşen düzeyinde.
• Meta verileri, rotaları ve içeriği dinamik olarak yerelleştirin.
• İstemci tarafı ve sunucu tarafı bileşenlerinde çevirilere erişin.
• Otomatik oluşturulan türlerle TypeScript desteği sağlayın, böylece otomatik tamamlama ve hata algılama iyileştirilir.
• Gelişmiş özelliklerden yararlanın, dinamik yerel algılama ve anahtarlama gibi.

Intlayer, Next.js 12, 13, 14 ve 15 ile uyumludur. Next.js Sayfa Yönlendirici kullanıyorsanız, bu kılavuza bakın. Next.js 12, 13, 14 App Router için bu kılavuza bakın.

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

Adım 1: Bağımlılıkları Kurma

Gerekli paketleri npm kullanarak kurun:

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.

Adım 2: Projenizi Yapılandırma

Here is the final structure that we will make:

.├── 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:

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.

Adım 3: Next.js Yapılandırmanızda Intlayer'ı Entegre Etme

Next.js kurulumunuzu Intlayer ile uyumlu hale getirin:

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.

Adım 4: Dinamik Yerel Rotalar Tanımlama

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

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:

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.

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.

Adım 5: İçeriğinizi Bildirin

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

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}) ile eşleşmelidir.

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

Adım 6: Kodunuzda İçeriği Kullanın

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

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.

"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>
  );
};

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.

(İsteğe Bağlı) Adım 7: Yerel Algılama için Middleware Kurulumu

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

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.

(İsteğe Bağlı) Adım 8: Meta verilerinizin uluslararasılaştırılması

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.

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);

  /**
   * 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.

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.

(İsteğe Bağlı) Adım 9: Sitemap.xml ve robots.txt'nizin uluslararasılaştırılması

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.

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;

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.

(İsteğe Bağlı) Adım 10: İçeriğinizin dilini değiştirme

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.

"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.

"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

(İsteğe Bağlı) Adım 11: Yerelleştirilmiş Bağlantı Bileşeni Oluşturma

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:

"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.

(İsteğe Bağlı) Adım 12: Paket Boyutunuzu Optimize Edin

next-intlayer kullanırken, sözlükler varsayılan olarak her sayfa için pakete dahil edilir. Paket 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:

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.