Next.js Entegrasyonu: useIntlayer Hook Dokümantasyonu

useIntlayer hook'u, Next.js uygulamalarında yerelleştirilmiş içeriği verimli bir şekilde almak ve yönetmek için tasarlanmıştır. Bu dokümantasyon, Next.js projelerinde hook'un nasıl kullanılacağına odaklanacak ve uygun yerelleştirme uygulamalarını sağlayacaktır.

Next.js'te useIntlayer İçe Aktarma

Next.js uygulamanızda istemci tarafı veya sunucu tarafı bileşenlerde çalışıp çalışmadığınıza bağlı olarak, useIntlayer hook'unu aşağıdaki gibi içe aktarabilirsiniz:

• İstemci Bileşeni:

  typescript

  İçeriği kopyala

  Kodu kopyala

  Kodu panoya kopyala

  import { useIntlayer } from "next-intlayer"; // İstemci tarafı bileşenlerde kullanılır

• Sunucu Bileşeni:

  tsx

  İçeriği kopyala

  Kodu kopyala

  Kodu panoya kopyala

  import { useIntlayer } from "next-intlayer/server"; // Sunucu tarafı bileşenlerde kullanılır

Parametreler

1. key: İçeriği almak istediğiniz sözlük anahtarının dize tanımlayıcısı.
2. locale (isteğe bağlı): Kullanılacak belirli bir yerel ayar. Atlanırsa, hook istemci veya sunucu bağlamında ayarlanan yerel ayara varsayılan olur.

Sözlük Dosyaları

Çalışma zamanı hatalarını önlemek ve tür güvenliğini sağlamak için tüm içerik anahtarlarının içerik bildirim dosyalarında tanımlanması önemlidir. Bu yaklaşım ayrıca derleme zamanı doğrulaması için TypeScript entegrasyonunu kolaylaştırır.

İçerik bildirim dosyalarının kurulumu için talimatlar burada mevcuttur.

Next.js'te Örnek Kullanım

İşte uygulamanın mevcut yerel ayarına göre yerelleştirilmiş içeriği dinamik olarak yüklemek için useIntlayer hook'unu bir Next.js sayfasında nasıl uygulayabileceğiniz:

import { ClientComponentExample } from "@components/ClientComponentExample";
import { ServerComponentExample } from "@components/ServerComponentExample";
import { type NextPageIntlayer, IntlayerClientProvider } from "next-intlayer";
import { useIntlayer, IntlayerServerProvider } from "next-intlayer/server";

const HomePage: NextPageIntlayer = async ({ params }) => {
  const { locale } = await params;

  const content = useIntlayer("homepage", locale);

  return (
    <>
      <p>{content.introduction}</p>
      <IntlayerClientProvider locale={locale}>
        <ClientComponentExample />
      </IntlayerClientProvider>
      <IntlayerServerProvider locale={locale}>
        <ServerComponentExample />
      </IntlayerServerProvider>
    </>
  );
};

"use-client";

import type { FC } from "react";
import { useIntlayer } from "next-intlayer";

const ClientComponentExample: FC = () => {
  const content = useIntlayer("component-content");

  return (
    <div>
      <h1>{content.title}</h1>
      <p>{content.description}</p>
    </div>
  );
};

import type { FC } from "react";
import { useIntlayer } from "next-intlayer/server";

const ServerComponentExample: FC = () => {
  const content = useIntlayer("component-content");

  return (
    <div>
      <h1>{content.title}</h1>
      <p>{content.description}</p>
    </div>
  );
};

Özellik Yerelleştirmesi İşleme

alt, title, href, aria-label vb. gibi özellikleri yerelleştirmek için, içeriği değerini şu şekilde kullanabilirsiniz:

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

Daha Fazla Bilgi

• Intlayer Görsel Düzenleyici: Daha kolay içerik yönetimi için görsel düzenleyicinin nasıl kullanılacağını öğrenin burada.

Bu dokümantasyon, Next.js ortamlarında useIntlayer hook'unun kullanımını özetler, Next.js uygulamalarınızda yerelleştirmeyi yönetmek için sağlam bir çözüm sağlar.