Intlayer kullanarak Next.js 16 web sitenizi çevirin | Uluslararasılaştırma (i18n)

GitHub'da Uygulama Şablonunu inceleyin.

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. Intlayer, güçlü App Router dahil olmak üzere en son Next.js 16 çerçevesiyle sorunsuz bir şekilde entegre olur. Verimli render için Server Components ile çalışacak şekilde optimize edilmiştir ve Turbopack ile tam uyumludur.

Intlayer ile şunları yapabilirsiniz:

• Bileşen seviyesinde bildirimsel sözlükler kullanarak çevirileri kolayca yönetmek.
• Meta verileri, rotaları ve içeriği dinamik olarak yerelleştirmek.
• Hem istemci tarafı hem de sunucu tarafı bileşenlerinde çevirilere erişmek.
• Otomatik oluşturulan tiplerle TypeScript desteğini sağlamak, otomatik tamamlama ve hata tespitini iyileştirmek.
• Dinamik yerel ayar algılama ve değiştirme gibi gelişmiş özelliklerden yararlanın.

Intlayer, Next.js 12, 13, 14 ve 16 ile uyumludur. Next.js Page Router kullanıyorsanız, bu kılavuza bakabilirsiniz. Next.js 12, 13, 14 App Router ile kullanıyorsanız, bu kılavuza başvurun.

Next.js Uygulamasında Intlayer Kurulumu Adım Adım Rehber

Adım 1: Bağımlılıkları Yükleyin

Gerekli paketleri npm ile yükleyin:

npm install intlayer next-intlayer

• intlayer

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

• next-intlayer

Intlayer'ı Next.js ile entegre eden paket. Next.js uluslararasılaştırması için bağlam sağlayıcıları ve kancalar sunar. Ayrıca, Intlayer'ı Webpack veya Turbopack ile entegre etmek için Next.js eklentisini, kullanıcının tercih ettiği dili algılamak, çerezleri yönetmek ve URL yönlendirmesini işlemek için proxy'yi içerir.

Adım 2: Projenizi Yapılandırın

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 dilleriniz    ],    defaultLocale: Locales.ENGLISH,  },};export default config;

Bu yapılandırma dosyası aracılığıyla, yerelleştirilmiş URL'ler, proxy yönlendirmesi, çerez isimleri, içerik bildirimlerinizin konumu ve uzantısı, Intlayer günlüklerini konsolda devre dışı bırakma ve daha fazlasını ayarlayabilirsiniz. Mevcut parametrelerin tam listesi için yapılandırma dokümantasyonuna bakınız.

Adım 3: Intlayer'ı Next.js Yapılandırmanıza Entegre Edin

Next.js kurulumunuzu Intlayer kullanacak şekilde yapılandırın:

import type { NextConfig } from "next";import { withIntlayer } from "next-intlayer/server";const nextConfig: NextConfig = {  /* yapılandırma seçenekleri buraya */};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 geliştirme modunda bunları izler. Intlayer ortam değişkenlerini Webpack veya Turbopack ortamlarında tanımlar. Ayrıca, performansı optimize etmek için takma adlar sağlar ve sunucu bileşenleri ile uyumluluğu garanti eder.

withIntlayer() fonksiyonu bir promise fonksiyonudur. Yapı başlamadan önce intlayer sözlüklerini hazırlamaya olanak tanır. Başka eklentilerle birlikte kullanmak isterseniz, onu await edebilirsiniz. Örnek:

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

export default nextConfigWithOtherPlugins;

Eşzamanlı kullanmak isterseniz, `withIntlayerSync()` fonksiyonunu kullanabilirsiniz. Örnek:```tsxconst nextConfig = withIntlayerSync(nextConfig);const nextConfigWithOtherPlugins = withOtherPlugins(nextConfig);export default nextConfigWithOtherPlugins;

Adım 4: Dinamik Yerel Rotaları Tanımlayın

RootLayout içindeki 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 }) => (  // Çocukları hala diğer sağlayıcılarla sarabilirsiniz, örneğin `next-themes`, `react-query`, `framer-motion` vb.  <>{children}</>);export default RootLayout;

RootLayout bileşenini boş tutmak, <html> etiketi için lang ve dir özniteliklerini ayarlamaya olanak tanır.

Dinamik yönlendirmeyi uygulamak için, [locale] dizininize yeni bir layout ekleyerek yerel yolunu sağlayın:

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;

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

Bu aşamada, şu hatayla karşılaşacaksınız: Error: Missing <html> and <body> tags in the root layout.. Bu beklenen bir durumdur çünkü /app/page.tsx dosyası artık kullanılmamaktadır ve kaldırılabilir. Bunun yerine, [locale] yol segmenti /app/[locale]/page.tsx sayfasını etkinleştirecektir. Sonuç olarak, tarayıcınızda sayfalara /en, /fr, /es gibi yollar üzerinden erişilebilecektir. Varsayılan dili kök sayfa olarak ayarlamak için, 7. adımdaki proxy ayarına bakınız.

Sonrasında, uygulamanızın Layout bileşeninde generateStaticParams fonksiyonunu uygulayın.

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

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

Intlayer, sayfaların tüm yereller için önceden oluşturulmasını sağlamak amacıyla export const dynamic = 'force-static'; ile çalışır.

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, uygulamanızda herhangi bir yerde tanımlanabilir; yeter ki contentDir dizinine (varsayılan olarak ./src) dahil edilmiş olsun. Ve içerik bildirim dosya uzantısıyla (varsayılan olarak .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}) eşleşmelidir.

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

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

Uygulamanız boyunca içerik sözlüklerinize erişin:

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, istemci tarafı bileşenlere yerel ayarı sağlamak için kullanılır. Herhangi bir üst bileşende, layout dahil olmak üzere yerleştirilebilir. Ancak, Next.js'in layout kodunu sayfalar arasında paylaştığı ve bu nedenle daha verimli olduğu için, bunu bir layout içinde yerleştirmek önerilir. IntlayerClientProvider'ı layout içinde kullanarak, her sayfa için yeniden başlatılmasını önler, performansı artırır ve uygulamanız boyunca tutarlı bir yerelleştirme bağlamı sağlar.
• IntlayerServerProvider, sunucu tarafındaki alt bileşenlere yerel ayarı sağlamak için kullanılır. Layout içinde ayarlanamaz.

Layout ve sayfa ortak bir sunucu bağlamını paylaşamaz çünkü sunucu bağlam sistemi, her istek için veri deposuna (React'in cache mekanizması aracılığıyla) dayanır ve bu, uygulamanın farklı segmentleri için her "bağlamın" yeniden oluşturulmasına neden olur. Sağlayıcıyı paylaşılan bir layout içinde yerleştirmek bu izolasyonu bozacak ve sunucu bağlam değerlerinin sunucu bileşenlerinize doğru şekilde iletilmesini engelleyecektir.

"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ştur  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ştur  return (    <div>      <h2>{content.title}</h2>      <p>{content.content}</p>    </div>  );};

İçeriğinizi alt, title, href, aria-label gibi bir string özniteliğinde kullanmak istiyorsanız, fonksiyonun değerini şu şekilde çağırmalısınız:

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

useIntlayer kancasını daha fazla öğrenmek için, belgelere bakınız.

(İsteğe Bağlı) Adım 7: Yerel Algılama için Proxy Yapılandırması

Kullanıcının tercih ettiği yereli algılamak için proxy kurun:

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

intlayerProxy, kullanıcının tercih ettiği yereli algılamak ve onları yapılandırmada belirtilen uygun URL'ye yönlendirmek için kullanılır. Ayrıca, kullanıcının tercih ettiği yerelin bir çerezde saklanmasını sağlar.

Birden fazla proxy'yi zincirlemek (örneğin, intlayerProxy ile kimlik doğrulama veya özel proxy'ler) gerekiyorsa, Intlayer artık multipleProxies adlı bir yardımcı sağlar.

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

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

Sayfanızın başlığı gibi meta verilerinizi uluslararasılaştırmak isterseniz, Next.js tarafından sağlanan generateMetadata fonksiyonunu kullanabilirsiniz. İçerisinde, meta verilerinizi çevirmek için getIntlayer fonksiyonundan içeriği alabilirsiniz.

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 dil için tüm URL'leri içeren bir nesne oluşturur.   *   * Örnek:   * ```ts   *  getMultilingualUrls('/about');   *   *  // Döner   *  // {   *  //   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,    },  };};// ... Kodun geri kalanı

next-intlayer'dan içe aktarılan getIntlayer fonksiyonunun, içeriğinizi bir IntlayerNode içinde döndürdüğünü ve bu sayede görsel editörle entegrasyon sağladığını unutmayın. Buna karşılık, intlayer'dan içe aktarılan getIntlayer fonksiyonu, içeriğinizi ek özellikler olmadan doğrudan döndürür.

Alternatif olarak, meta verilerinizi bildirmek için getTranslation fonksiyonunu kullanabilirsiniz. Ancak, meta verilerinizin çevirisini otomatikleştirmek ve içeriği bir noktada dışa aktarmak için içerik bildirim dosyalarını kullanmanız ö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: "Açıklamam",      fr: "Ma description",      es: "Mi descripción",    }),  };};// ... Kodun geri kalanı

Metadata optimizasyonu hakkında daha fazla bilgi edinin resmi Next.js dokümantasyonunda.

(İsteğe Bağlı) Adım 9: sitemap.xml ve robots.txt dosyalarınızın uluslararasılaştırılması

sitemap.xml ve robots.txt dosyalarınızı 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 olanak tanır.

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[]);// Tüm çok dilli URL'leri almak için fonksiyonconst robots = (): MetadataRoute.Robots => ({  rules: {    userAgent: "*", // Tüm kullanıcı ajanlarına izin ver    allow: ["/"], // Ana sayfaya izin ver    disallow: getAllMultilingualUrls(["/login", "/register"]), // Giriş ve kayıt sayfalarını engelle  },  host: "https://example.com",  sitemap: `https://example.com/sitemap.xml`, // Site haritası URL'si});export default robots;

Site haritası optimizasyonu hakkında daha fazla bilgi için resmi Next.js dokümantasyonuna bakabilirsiniz. robots.txt optimizasyonu hakkında daha fazla bilgi için resmi Next.js dokümantasyonuna göz atabilirsiniz.

(İ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 önerilen yöntem, kullanıcıları uygun yerelleştirilmiş sayfaya yönlendirmek amacıyla Link bileşenini kullanmaktır. Link bileşeni, sayfanın önceden yüklenmesini (prefetch) sağlar, bu da tam sayfa yeniden yüklemesini önlemeye 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)}            key={localeItem}            aria-current={locale === localeItem ? "page" : undefined}            onClick={() => setLocale(localeItem)}            replace // "Geri git" tarayıcı düğmesinin önceki sayfaya yönlendirmesini sağlar          >            <span>              {/* Yerel Ayar - örn. FR */}              {localeItem}            </span>            <span>              {/* Dil kendi Yerel Ayarında - örn. Français */}              {getLocaleName(localeItem, locale)}            </span>            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>              {/* Dil mevcut Yerel Ayarda - örn. Locales.SPANISH olarak ayarlanmış mevcut yerel ayarla Francés */}              {getLocaleName(localeItem)}            </span>            <span dir="ltr" lang={Locales.ENGLISH}>              {/* İngilizce dilinde - örn. French */}              {getLocaleName(localeItem, Locales.ENGLISH)}            </span>          </Link>        ))}      </div>    </div>  );};

Alternatif bir yöntem, useLocale kancasının sağladığı setLocale fonksiyonunu kullanmaktır. Bu fonksiyon sayfanın önceden getirilmesine (prefetch) izin vermez. Daha fazla detay için useLocale kancası dokümantasyonuna bakabilirsiniz.

Ayrıca, onLocaleChange seçeneğinde, dil değiştiğinde özel bir fonksiyon tetiklemek için bir fonksiyon ayarlayabilirsiniz.

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

Dokümantasyon referansları:

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

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

Uygulamanızın navigasyonunun mevcut yerel ayara uygun olmasını sağlamak için özel bir Link bileşeni oluşturabilirsiniz. Bu bileşen, dahili URL'lerin önüne otomatik olarak mevcut dili ekler. Örneğin, Fransızca konuşan bir kullanıcı "Hakkında" sayfasına tıkladığında, /about yerine /fr/about adresine yönlendirilir.

Bu davranış birkaç nedenle faydalıdır:

• SEO ve Kullanıcı Deneyimi: Yerelleştirilmiş URL'ler, arama motorlarının dil bazlı sayfaları doğru şekilde indekslemesine yardımcı olur ve kullanıcılara tercih ettikleri dilde içerik sunar.
• Tutarlılık: Uygulamanızda yerelleştirilmiş linkler kullanarak, navigasyonun mevcut yerel ayar içinde kalmasını garanti eder, beklenmedik dil değişimlerini önlersiniz.
• Bakım Kolaylığı: Yerelleştirme mantığını tek bir bileşende merkezileştirmek, URL yönetimini basitleştirir ve uygulamanız büyüdükçe kod tabanınızı daha kolay bakım yapılabilir ve genişletilebilir hale getirir.

Aşağıda TypeScript ile 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 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 ?? "");/** * Mevcut yerel ayara göre href özniteliğini uyarlayan özel bir Link bileşeni. * Dahili bağlantılar için, URL'nin önüne yerel ayarı eklemek üzere `getLocalizedUrl` kullanılır (örneğin, /fr/about). * Bu, gezinmenin aynı yerel bağlam içinde kalmasını sağlar. */export const Link: FC<PropsWithChildren<NextLinkProps>> = ({  href,  children,  ...props}) => {  const { locale } = useLocale();  const isExternalLink = checkIsExternalLink(href.toString());  // Bağlantı dahili ve geçerli bir href sağlanmışsa, yerelleştirilmiş URL alınır.  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ı Tespit Etme:
  Yardımcı fonksiyon checkIsExternalLink, bir URL'nin harici olup olmadığını belirler. Harici bağlantılar, yerelleştirmeye gerek olmadığı için değiştirilmeden bırakılır.

• Geçerli Yerel Ayarın Alınması:
  useLocale kancası, geçerli yerel ayarı sağlar (örneğin, Fransızca için fr).

• URL'nin Yerelleştirilmesi:
  Dahili bağlantılar (yani harici olmayanlar) için, getLocalizedUrl URL'yi otomatik olarak geçerli yerel ayarla ön ekler. Bu, kullanıcınız Fransızca ise, href olarak /about verilirse bunun /fr/about olarak dönüşeceği anlamına gelir.

• Bağlantının Döndürülmesi:
  Bileşen, yerelleştirilmiş URL ile bir <a> öğesi döndürür ve böylece gezinmenin yerel ayarla tutarlı olmasını sağlar.

Bu Link bileşenini uygulamanızın tamamında entegre ederek, tutarlı ve dil farkındalığı olan bir kullanıcı deneyimi sağlarken aynı zamanda geliştirilmiş SEO ve kullanılabilirlikten de faydalanırsınız.

(İsteğe Bağlı) Adım 12: Sunucu Eylemlerinde (Server Actions) geçerli yerel ayarı (locale) alın

Eğer bir Sunucu Eylemi içinde aktif yerel ayara ihtiyacınız varsa (örneğin, e-postaları yerelleştirmek veya yerel ayara duyarlı mantık çalıştırmak için), next-intlayer/server'dan getLocale fonksiyonunu çağırın:

"use server";import { getLocale } from "next-intlayer/server";export const myServerAction = async () => {  const locale = await getLocale();  // Yerel ayar ile bir şeyler yap};

getLocale fonksiyonu, kullanıcının yerel ayarını belirlemek için kademeli (cascading) bir strateji izler:

1. İlk olarak, proxy tarafından ayarlanmış olabilecek bir yerel değer için istek başlıklarını kontrol eder
2. Başlıklarda yerel bulunamazsa, çerezlerde saklanan bir yerel arar
3. Çerez bulunamazsa, kullanıcının tercih ettiği dili tarayıcı ayarlarından tespit etmeye çalışır
4. Son çare olarak, uygulamanın yapılandırılmış varsayılan yereline geri döner

Bu, mevcut bağlama göre en uygun yerelin seçilmesini sağlar.

(İsteğe Bağlı) Adım 13: Paket boyutunuzu optimize edin

next-intlayer kullanıldığında, sözlükler varsayılan olarak her sayfanın paketine dahil edilir. Paket boyutunu optimize etmek için, Intlayer, useIntlayer çağrılarını makrolar kullanarak akıllıca değiştiren isteğe bağlı bir SWC eklentisi sağlar. Bu, sözlüklerin yalnızca gerçekten kullanan sayfaların paketlerine dahil edilmesini garanti eder.

Bu optimizasyonu etkinleştirmek için @intlayer/swc paketini yükleyin. Yüklendikten sonra, next-intlayer eklentiyi otomatik olarak algılar ve kullanır:

npm install @intlayer/swc --save-dev

Not: Bu optimizasyon yalnızca Next.js 13 ve üzeri sürümler için kullanılabilir.

Not: Bu paket varsayılan olarak kurulmaz çünkü SWC eklentileri Next.js üzerinde hâlâ deneysel durumdadır. Gelecekte değişebilir.

Turbopack üzerinde sözlük değişikliklerini izleme

next dev komutuyla geliştirme sunucusu olarak Turbopack kullanıldığında, sözlük değişiklikleri varsayılan olarak otomatik algılanmaz.

Bu kısıtlama, Turbopack'in içerik dosyalarınızdaki değişiklikleri izlemek için webpack eklentilerini paralel olarak çalıştıramamasından kaynaklanır. Bunun üstesinden gelmek için, geliştirme sunucusunu ve Intlayer derleme izleyicisini aynı anda çalıştırmak üzere intlayer watch komutunu kullanmanız gerekir.

{  // ... Mevcut package.json yapılandırmalarınız  "scripts": {    // ... Mevcut script yapılandırmalarınız    "dev": "intlayer watch --with 'next dev'",  },}

Eğer next-intlayer@<=6.x.x kullanıyorsanız, Next.js 16 uygulamasının Turbopack ile doğru çalışması için --turbopack bayrağını korumanız gerekir. Bu sınırlamadan kaçınmak için next-intlayer@>=7.x.x kullanmanızı öneririz.

TypeScript'i Yapılandırma

Intlayer, TypeScript'in avantajlarından yararlanmak ve kod tabanınızı daha güçlü hale getirmek için modül genişletme (module augmentation) kullanır.

TypeScript yapılandırmanızın otomatik 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 oluşturulan türleri dahil et  ],}

Git Yapılandırması

Intlayer tarafından oluşturulan dosyaların göz ardı edilmesi önerilir. Bu, bu dosyaların Git deposuna eklenmesini önlemenize olanak tanır.

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

# Intlayer tarafından oluşturulan dosyaları göz ardı et.intlayer

VS Code Eklentisi

Intlayer ile geliştirme deneyiminizi iyileştirmek için resmi Intlayer VS Code Eklentisini yükleyebilirsiniz.

VS Code Marketplace'ten Yükleyin

Bu eklenti şunları sağlar:

• Çeviri anahtarları için Otomatik Tamamlama.
• Eksik çeviriler için Gerçek Zamanlı Hata Tespiti.
• Çevrilmiş içeriğin satır içi önizlemeleri.
• Çevirileri kolayca oluşturmak ve güncellemek için hızlı işlemler.

Eklentinin nasıl kullanılacağı hakkında daha fazla bilgi için Intlayer VS Code Eklentisi dokümantasyonuna bakabilirsiniz.

Daha İleri Gitmek

Daha ileri gitmek için, görsel editörü uygulayabilir veya içeriğinizi CMS kullanarak dışa aktarabilirsiniz.