M

MLOG

Türkçe

Next.js uygulamalarınızda küresel bir kitleye ulaşmak için sorunsuz uluslararasılaştırma (i18n) uygulamayı öğrenin. Yönlendirme, içerik çevirisi ve en iyi uygulamaları kapsar.

Next.js Uluslararasılaştırma: Küresel Kitle İçin Çok Dilli Uygulamalar Geliştirme

Günümüzün birbirine bağlı dünyasında, küresel bir kitleye hitap eden uygulamalar geliştirmek artık bir lüks değil, bir zorunluluktur. Güçlü bir React framework'ü olan Next.js, uluslararasılaştırmayı (i18n) uygulamak için sağlam özellikler sunarak dünya çapındaki kullanıcılara yerelleştirilmiş bir deneyim sunan çok dilli uygulamalar oluşturmanıza olanak tanır. Bu kapsamlı kılavuz, uluslararasılaştırılmış Next.js uygulamaları oluşturmak için temel kavramlar, teknikler ve en iyi uygulamalar konusunda size yol gösterecektir.

Uluslararasılaştırma ve Yerelleştirmeyi Anlamak

Next.js i18n'in ayrıntılarına dalmadan önce, anahtar terimleri açıklığa kavuşturalım:

Esasen, i18n uygulamanızı yerelleştirme için hazırlar. Dile bağlı unsurları temel koddan ayırarak, uygulamayı farklı pazarlar için yerelleştirmeyi kolaylaştırırsınız.

Next.js'te Neden Uluslararasılaştırma Uygulanmalı?

Next.js uygulamanızda i18n uygulamak sayısız fayda sunar:

Next.js i18n Özellikleri ve Yapılandırması

Next.js, yönlendirme ve içerik yönetimi özellikleri aracılığıyla i18n için yerleşik destek sunar. Aşağıda önemli özelliklerin bir dökümü bulunmaktadır:

1. next.config.js'de i18n Yapılandırması

i18n için temel yapılandırma next.config.js dosyasında yer alır. İşte bir örnek:


/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'es', 'fr'], // Desteklenen yerel ayarların (dil kodları) bir dizisi
    defaultLocale: 'en', // Kullanılacak varsayılan yerel ayar
    localeDetection: true, // Tarayıcı ayarlarına göre otomatik yerel ayar tespitini etkinleştir/devre dışı bırak (isteğe bağlı)
    //  domains: [
    //  {
    //    domain: 'example.com',
    //    defaultLocale: 'en',
    //  },
    //  {
    //    domain: 'example.es',
    //    defaultLocale: 'es',
    //  },
    //  ],
  },
}

module.exports = nextConfig;

Açıklama:

2. Yerel Ayar Önekleriyle Yönlendirme

Next.js, rotaları otomatik olarak yerel ayar ile önekler. Örneğin, /about adresinde bir sayfanız varsa ve yerel ayar 'es' (İspanyolca) ise, URL /es/about olur. Bu, sayfaların farklı dil sürümlerini mümkün kılar ve arama motorlarının her yerel ayar için içeriği dizine eklemesini sağlar. Framework, yönlendirmeyi ve rota yönetimini sizin için halleder.

3. useRouter Hook'unu Kullanma

next/router'dan gelen useRouter hook'u, mevcut yerel ayara ve diğer yönlendirme bilgilerine erişim sağlar.


import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();
  const { locale, locales, defaultLocale } = router;

  return (
    

      
Mevcut yerel ayar: {locale}

      
Mevcut yerel ayarlar: {locales.join(', ')}

      
Varsayılan yerel ayar: {defaultLocale}

    

  );
}

export default MyComponent;

router nesnesi aşağıdaki anahtar özellikleri sunar:

İçerik Çeviri Stratejileri

Next.js uygulamanızı i18n için yapılandırdıktan sonra, içeriğinizi çevirmek için stratejiler uygulamanız gerekecektir. İşte birkaç popüler yaklaşım:

1. Özel Bir Çeviri Yönetim Sistemi (TMS) Kullanma

Birçok dile sahip büyük ölçekli projeler için bir TMS şiddetle tavsiye edilir. Popüler seçenekler şunlardır:

Faydaları:

2. JSON Çeviri Dosyaları Oluşturma

Daha küçük projeler için, çevirileri saklamak üzere JSON dosyaları kullanmak basit ve etkili bir yöntemdir.

Örnek Dizin Yapısı:


/src
├── locales
│   ├── en.json
│   └── es.json
├── components
│   └── MyComponent.js
└── pages
    └── index.js

Örnek en.json:


{
  "greeting": "Hello, world!",
  "welcomeMessage": "Welcome to our website."
}

Örnek es.json:


{
  "greeting": "¡Hola, mundo!",
  "welcomeMessage": "Bienvenido a nuestro sitio web."
}

Örnek MyComponent.js:


import { useRouter } from 'next/router';
import en from '../locales/en.json';
import es from '../locales/es.json';

function MyComponent() {
  const { locale } = useRouter();
  const t = locale === 'es' ? es : en;

  return (
    

      
{t.greeting}

      
{t.welcomeMessage}

    

  );
}

export default MyComponent;

Bu yaklaşım esneklik sağlar ve daha küçük projeler için basittir. Genellikle güncellenmesi ve bakımı kolaydır.

3. Bir Çeviri Kütüphanesi Kullanma

Birkaç JavaScript kütüphanesi, React bileşenlerinizdeki içerik çevirisini kolaylaştırır.

next-i18next ile örnek (Kurulum: npm install next-i18next i18next react-i18next):

Bir i18n yapılandırma dosyası oluşturun (örneğin, kök dizininizde i18n.js):


// i18n.js
import { createServerSideHelpers } from 'next-i18next'
import { i18n } from './next-i18next.config'

export function initI18next(req, res, namespaces = ['common']) {
  const helpers = createServerSideHelpers(
    req, 
    res, 
    i18n, 
    namespaces
  )

  return helpers
}

export { appWithTranslation } from 'next-i18next'
export { i18n }

next-i18next için Next.js yapılandırmanızı oluşturun.


// next-i18next.config.js
const { i18n } = require('./next-i18next.config');

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es', 'fr'],
  },
  // diğer yapılandırmalar
}

module.exports = nextConfig

Yapılandırmayı ve çeviri import'unu _app.js dosyanıza ekleyin:


import { appWithTranslation } from 'next-i18next';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return ;
}

export default appWithTranslation(MyApp);

Bir klasör oluşturun ve çevirileriniz için yerel ayarlarla doldurun.


/public
└── locales
    ├── en
    │   └── common.json
    ├── es
    │   └── common.json
    └── fr
        └── common.json

Örnek en/common.json:


{
  "greeting": "Hello, world!",
  "welcomeMessage": "Welcome to our website."
}

Bir bileşende çeviriyi kullanma:


import { useTranslation } from 'next-i18next';

function MyComponent() {
  const { t } = useTranslation('common');

  return (
    

      
{t('greeting')}

      
{t('welcomeMessage')}

    

  );
}

export default MyComponent;

Bu örnek, mevcut yerel ayara göre çevirileri almak için useTranslation hook'unu kullanır.

Dinamik Rotalar ve Statik Site Oluşturma (SSG) Yönetimi

Dinamik rotalar (örneğin, blog yazıları, ürün sayfaları) ve statik site oluşturma (SSG) ile uğraşırken uluslararasılaştırma daha karmaşık hale gelir.

1. Dinamik Rotalar (ör. /blog/[slug])

Dinamik rotalar için, derleme zamanında her yerel ayar için doğru yolları getStaticPaths kullanarak oluşturmanız gerekir. Bu fonksiyon, Next.js'in önceden render etmesi gereken yolların bir dizisini döndürür.


export async function getStaticPaths() {
  const paths = [];
  const locales = ['en', 'es', 'fr'];
  const posts = await fetchPosts(); // Blog gönderileri verilerini al

  posts.forEach(post => {
    locales.forEach(locale => {
      paths.push({
        params: {
          slug: post.slug,
        },
        locale,
      });
    });
  });

  return {
    paths,
    fallback: false, // veya yükleme durumu göstermek istiyorsanız 'blocking'
  };
}

export async function getStaticProps({ params, locale }) {
  const post = await getPostBySlug(params.slug, locale);

  return {
    props: {
      post,
    },
  };
}

Açıklama:

2. getStaticProps ile Statik Site Oluşturma (SSG)

getStaticProps içinde, locale parametresine göre çevrilmiş içeriği alabilirsiniz.


export async function getStaticProps({ params, locale }) {
  // Yerel ayara ve parametrelere göre içerik al
  const { post } = await getPostBySlug(params.slug, locale);

  return {
    props: {
      post,
    },
  };
}

getPostBySlug fonksiyonu, çeviri dosyalarınızdan, veritabanından veya bir CMS'den alınabilecek olan belirli bir slug ve yerel ayar için çevrilmiş içeriği almalıdır.

3. getServerSideProps ile Sunucu Tarafı Render (SSR)

Talep zamanında alınması gereken içerik için getServerSideProps kullanın. Bu, içeriğin sık sık değiştiği veya her kullanıcı için kişiselleştirildiği durumlarda kullanışlıdır.


export async function getServerSideProps({ params, locale, req, res }) {
  // Yerel ayara ve parametrelere göre veri al (ör. bir veritabanından)
  const data = await fetchData(params.slug, locale);

  return {
    props: {
      data,
    },
  };
}

Next.js Uluslararasılaştırma için En İyi Uygulamalar

Bu en iyi uygulamaları takip etmek, sağlam, sürdürülebilir ve kullanıcı dostu çok dilli uygulamalar oluşturmanıza yardımcı olacaktır:

Uluslararasılaştırılmış Web Siteleri için SEO Hususları

Uluslararasılaştırılmış web sitenizi arama motorları için optimize etmek, dünyanın dört bir yanından organik trafik çekmek için çok önemlidir. İşte bazı önemli SEO en iyi uygulamaları:

Örnek: Basit Bir Çok Dilli Blog Oluşturma

Next.js kullanarak basit bir çok dilli blog örneği oluşturalım. Bu, yukarıda tartışılan kavramların nasıl uygulanacağına dair daha somut bir örnek sunacaktır.

1. Proje Kurulumu

Yeni bir Next.js projesi oluşturun:


npx create-next-app my-multi-lang-blog
cd my-multi-lang-blog

2. i18n'i Yapılandırın (next.config.js)


/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    locales: ['en', 'es', 'fr'],
    defaultLocale: 'en',
  },
}

module.exports = nextConfig

3. Çeviri Dosyaları Oluşturun

Kök dizinde bir locales klasörü oluşturun ve aşağıdaki JSON dosyalarını ekleyin:

locales/en.json:


{
  "title": "Welcome to My Blog",
  "postTitle": "My First Post",
  "postContent": "This is the content of my first blog post."
}

locales/es.json:


{
  "title": "Bienvenido a mi Blog",
  "postTitle": "Mi Primer Post",
  "postContent": "Este es el contenido de mi primer publicación de blog."
}

locales/fr.json:


{
  "title": "Bienvenue sur Mon Blog",
  "postTitle": "Mon Premier Article",
  "postContent": "Ceci est le contenu de mon premier article de blog."
}

4. Blog Gönderi Bileşenini Oluşturun (ör. components/BlogPost.js)


import { useRouter } from 'next/router';
import en from '../locales/en.json';
import es from '../locales/es.json';
import fr from '../locales/fr.json';

function BlogPost() {
  const router = useRouter();
  const { locale } = router;

  let translations;
  switch (locale) {
    case 'es':
      translations = es;
      break;
    case 'fr':
      translations = fr;
      break;
    default:
      translations = en;
  }

  return (
    

      
{translations.postTitle}

      
{translations.postContent}

    

  );
}

export default BlogPost;

5. Ana Sayfayı Oluşturun (pages/index.js)


import { useRouter } from 'next/router';
import BlogPost from '../components/BlogPost';
import en from '../locales/en.json';
import es from '../locales/es.json';
import fr from '../locales/fr.json';

function HomePage() {
  const router = useRouter();
  const { locale, locales } = router;

  let translations;
  switch (locale) {
    case 'es':
      translations = es;
      break;
    case 'fr':
      translations = fr;
      break;
    default:
      translations = en;
  }

  return (
    

      
{translations.title}

      
      

        {locales.map((l) => (
          
            {l.toUpperCase()}
          
        ))}
      

    

  );
}

export default HomePage;

Bu basitleştirilmiş örnek, Next.js uluslararasılaştırmasının temel ilkelerini göstermektedir. Bu temel çerçeveyi, dinamik rotalar ve çeviri yönetim sistemleriyle entegrasyon gibi daha karmaşık özellikleri içerecek şekilde genişletebilirsiniz. Yukarıdaki bağlantıları Link bileşeniyle iyileştirmeyi ve uygun locale niteliğini eklemeyi düşünün.

6. Uygulamayı Çalıştırın

Uygulamayı şu komutla çalıştırın:


npm run dev

Artık blogunuza http://localhost:3000 (İngilizce), http://localhost:3000/es (İspanyolca) ve http://localhost:3000/fr (Fransızca) adreslerinden erişebilirsiniz. Başlığın ve blog gönderi içeriğinin seçilen yerel ayara göre çevrildiğini görmelisiniz.

Sonuç

Next.js, web uygulamalarınızda uluslararasılaştırma uygulamak için kapsamlı bir özellik seti sunar. Bu kılavuzda belirtilen ilke ve teknikleri izleyerek, dünya genelindeki kullanıcılara yerelleştirilmiş deneyimler sunan çok dilli uygulamalar oluşturabilirsiniz. i18n stratejinizi erken planlamayı, ihtiyaçlarınız için doğru çeviri yöntemini seçmeyi ve kullanıcı deneyimine öncelik vermeyi unutmayın. Dikkatli planlama ve uygulama ile, küresel bir kitleyle rezonans kuran ve büyüme için yeni fırsatlar açan uygulamalar oluşturabilirsiniz. Sürekli öğrenme, en son sürümleri ve en iyi uygulamaları takip etme, araçlarınızı ve teknolojilerinizi etkili bir şekilde kullandığınızdan emin olmanızı sağlayacaktır.

Teknoloji ilerledikçe, daha gelişmiş i18n özelliklerinin ortaya çıkmasını bekleyin. Farklı kültürler ve dil gruplarındaki kullanıcılara ulaşma yeteneği, dünya çapındaki uygulama geliştiricileri için önemli bir öncelik olmaya devam edecektir. Bu nedenle, i18n'in temellerinde ustalaşmak, günümüzün küresel geliştirme ortamında değerinizi artıracak değerli bir beceridir.