next-intl ve Intlayer ile Next.js Uluslararasılaştırma (i18n)

Hem next-intl hem de Intlayer, Next.js uygulamaları için tasarlanmış açık kaynaklı uluslararasılaştırma (i18n) çerçeveleridir. Yazılım projelerinde çevirileri, yerelleştirmeyi ve dil değiştirmeyi yönetmek için yaygın olarak kullanılırlar.

Üç temel kavramı paylaşırlar:

1. Sözlük: Uygulamanızın çevrilebilir içeriğini tanımlama yöntemi.

   • Intlayer'da content declaration file olarak adlandırılır, yapılandırılmış veriyi dışa aktaran bir JSON, JS veya TS dosyası olabilir. Daha fazla bilgi için Intlayer dokümantasyonuna bakın.
   • next-intl'de messages veya locale messages olarak adlandırılır, genellikle JSON dosyalarında. Daha fazla bilgi için next-intl dokümantasyonuna bakın.

2. Araçlar: Uygulamada içerik beyanlarını oluşturmak ve yorumlamak için araçlar, örneğin Intlayer için useIntlayer() veya useLocale(), next-intl için useTranslations().

3. Eklentiler ve Ara Yazılımlar: URL yönlendirmesini, paket optimizasyonunu vb. yönetmek için özellikler, örneğin Intlayer için intlayerMiddleware veya next-intl için createMiddleware.

Intlayer vs. next-intl: Temel Farklılıklar

Intlayer'ın Next.js için diğer i18n kütüphaneleriyle (next-intl gibi) nasıl karşılaştırıldığına dair daha derin bir analiz için next-i18next vs. next-intl vs. Intlayer blog yazısına bakın.

Intlayer ile next-intl Mesajları Nasıl Oluşturulur

Neden Intlayer'ı next-intl ile Kullanmalı?

Intlayer içerik beyan dosyaları genellikle daha iyi bir geliştirici deneyimi sunar. İki ana avantaj nedeniyle daha esnek ve sürdürülebilirlerdir:

1. Esnek Yerleştirme: Intlayer içerik beyan dosyasını uygulamanızın dosya ağacında herhangi bir yere yerleştirebilirsiniz. Bu, kullanılmayan veya sallanan mesaj dosyaları bırakmadan bileşenleri yeniden adlandırmayı veya silmeyi kolaylaştırır.

   Örnek dosya yapıları:

   bash

   Kodu kopyala

   Kodu panoya kopyala

   .└── src    └── components        └── MyComponent            ├── index.content.ts # İçerik beyan dosyası            └── index.tsx

2. Merkezi Çeviriler: Intlayer tüm çevirileri tek bir içerik beyanında depolar, hiçbir çevirinin eksik olmasını sağlar. TypeScript projelerinde, eksik çeviriler otomatik olarak tip hataları olarak işaretlenir, geliştiricilere anında geri bildirim sağlar.

Kurulum

Intlayer ve next-intl'i birlikte kullanmak için her iki kütüphaneyi de yükleyin:

npm install intlayer next-intl

next-intl Mesajlarını Dışa Aktarmak İçin Intlayer'ı Yapılandırma

Not: Intlayer'dan next-intl için mesajları dışa aktarmak yapıda hafif farklılıklar getirebilir. Mümkünse, entegrasyonu basitleştirmek için Intlayer-only veya next-intl-only akışını koruyun. Intlayer'dan next-intl mesajları oluşturmanız gerekiyorsa, aşağıdaki adımları takip edin.

Projenizin kökünde bir intlayer.config.ts dosyası oluşturun veya güncelleyin (.mjs / .cjs):

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },  content: {    dictionaryOutput: ["next-intl"], // next-intl çıktısını kullan    nextIntlMessagesDir: "./intl/messages", // next-intl mesajlarının kaydedileceği yer  },};export default config;

Sözlük

Çeşitli formatlardaki içerik beyan dosyalarının örnekleri aşağıdadır. Intlayer bunları next-intl'in tüketebileceği mesaj dosyalarına derleyecektir.

import { t, type Dictionary } from "intlayer";const content = {  key: "my-component",  content: {    helloWorld: t({      en: "Hello World",      es: "Hola Mundo",      fr: "Bonjour le monde",    }),  },} satisfies Dictionary;export default content;

next-intl Mesajlarını Oluştur

next-intl için mesaj dosyalarını oluşturmak için şunu çalıştırın:

npx intlayer dictionaries build

Bu, ./intl/messages dizininde kaynaklar oluşturacaktır ( intlayer.config.* dosyasında yapılandırıldığı gibi). Beklenen çıktı:

.└── intl    └── messages       └── en           └── my-content.json       └── fr           └── my-content.json       └── es           └── my-content.json

Her dosya, tüm Intlayer içerik beyanlarından derlenmiş mesajları içerir. Üst düzey anahtarlar genellikle content.key alanlarınızla eşleşir.

Next.js Uygulamanızda next-intl Kullanma

Daha fazla detay için resmi next-intl kullanım dokümantasyonuna bakın.

1. Bir Ara Yazılım Oluşturun (isteğe bağlı):
   Otomatik yerel algılama veya yönlendirmeyi yönetmek istiyorsanız, next-intl’in createMiddleware özelliğini kullanın.

   middleware.ts

   Kodu kopyala

   Kodu panoya kopyala

   import createMiddleware from "next-intl/middleware";import { NextResponse } from "next/server";export default createMiddleware({  locales: ["en", "fr", "es"],  defaultLocale: "en",});export const config = {  matcher: ["/((?!api|_next|.*\\..*).*)"],};

2. Mesajları Yüklemek İçin layout.tsx veya _app.tsx Oluşturun:
   App Router kullanıyorsanız (Next.js 13+), bir layout oluşturun:

   app/[locale]/layout.tsx

   Kodu kopyala

   Kodu panoya kopyala

   import { NextIntlClientProvider } from 'next-intl';import { notFound } from 'next/navigation';import React, { ReactNode } from 'react';

export default async function RootLayout({

}: {

}) {

}

typescript fileName="pages/_app.tsx" import type { AppProps } from 'next/app'; import { NextIntlProvider } from 'next-intl';

function MyApp({ Component, pageProps }: AppProps) {

}

export default MyApp;

typescript fileName="pages/index.tsx" import { GetServerSideProps } from "next"; import HomePage from "../components/HomePage";

export default HomePage;

export const getServerSideProps: GetServerSideProps = async ({ locale }) => {

};

typescript fileName="src/components/MyComponent/index.tsx" codeFormat="typescript" import type { FC } from "react"; import { useTranslations } from 'next-intl';

const MyComponent: FC = () => { const t = useTranslations('my-component'); // 'my-component' Intlayer'daki içerik anahtarına karşılık gelir

return (

); };

export default MyComponent;

jsx fileName="src/components/MyComponent/index.jsx" codeFormat="esm" import { useTranslations } from "next-intl";

export default function MyComponent() { const t = useTranslations("my-component");

return (

); }