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

Hem next-i18next 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.

Her iki çözüm de üç temel kavramı içerir:

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

   • i18next durumunda resource olarak adlandırılır, içerik beyanı bir veya daha fazla dilde çeviriler için anahtar-değer çiftleri içeren yapılandırılmış bir JSON nesnesidir. Daha fazla bilgi için i18next dokümantasyonuna bakın.
   • Intlayer durumunda content declaration file olarak adlandırılır, içerik beyanı 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.

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

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

Intlayer vs. i18next: Temel Farklılıklar

i18next ve Intlayer arasındaki farkları keşfetmek için next-i18next vs. next-intl vs. Intlayer blog yazımıza bakın.

Intlayer ile next-i18next Sözlükleri Nasıl Oluşturulur

Neden Intlayer'ı next-i18next 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: Bir Intlayer içerik beyan dosyası uygulamanın dosya ağacında herhangi bir yere yerleştirilebilir, kullanılmayan içerik beyanları bırakmadan yinelenen veya silinen bileşenlerin yönetimini basitleştirir.

   Ö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 dosyada depolar, hiçbir çevirinin eksik olmasını sağlar. TypeScript kullanırken, eksik çeviriler otomatik olarak algılanır ve hatalar olarak raporlanır.

Kurulum

npm install intlayer i18next next-i18next i18next-resources-to-backend

i18next Sözlüklerini Dışa Aktarmak İçin Intlayer'ı Yapılandırma

i18next kaynaklarını dışa aktarmak diğer çerçevelerle 1:1 uyumluluk sağlamaz. Sorunları en aza indirmek için Intlayer tabanlı bir yapılandırmaya bağlı kalmak önerilir.

i18next kaynaklarını dışa aktarmak için Intlayer'ı bir intlayer.config.ts dosyasında yapılandırın. Örnek yapılandırmalar:

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },  content: {    dictionaryOutput: ["i18next"],    i18nextResourcesDir: "./i18next/resources",  },};export default config;

Burada belgenizin kalan kısımlarının devamı ve düzeltmesi:

Sözlükleri i18next Yapılandırmanıza İçe Aktarma

Oluşturulan kaynakları i18next yapılandırmanıza içe aktarmak için i18next-resources-to-backend kullanın. Aşağıda örnekler:

import i18next from "i18next";import resourcesToBackend from "i18next-resources-to-backend";i18next.use(  resourcesToBackend(    (language: string, namespace: string) =>      import(`../i18next/resources/${language}/${namespace}.json`)  ));

Sözlük

Çeşitli formatlardaki içerik beyan dosyalarının örnekleri:

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

next-i18next Kaynaklarını Oluştur

next-i18next kaynaklarını oluşturmak için aşağıdaki komutu çalıştırın:

npx run intlayer build

Bu, ./i18next/resources dizininde kaynaklar oluşturacaktır. Beklenen çıktı:

.└── i18next    └── resources       └── en           └── my-content.json       └── fr           └── my-content.json       └── es           └── my-content.json

Not: i18next ad alanı Intlayer beyan anahtarına karşılık gelir.

Next.js Eklentisini Uygula

Yapılandırıldıktan sonra, Intlayer içerik beyan dosyaları güncellendiğinde i18next kaynaklarınızı yeniden oluşturmak için Next.js eklentisini uygulayın.

import { withIntlayer } from "next-intlayer/server";/** @type {import('next').NextConfig} */const nextConfig = {};export default withIntlayer(nextConfig);

Next.js Bileşenlerinde İçeriği Kullanma

Next.js eklentisini uyguladıktan sonra, içeriği bileşenlerinizde kullanabilirsiniz:

import type { FC } from "react";import { useTranslation } from "react-i18next";const IndexPage: FC = () => {  const { t } = useTranslation();  return (    <div>      <h1>{t("my-content.title")}</h1>      <p>{t("my-content.description")}</p>    </div>  );};export default IndexPage;