Uluslararasılaşmanın(i18n) Uygulanması Next.js: Çok Dilli

Bu bölümde, Uluslararasılaştırmayı(i18n) uygulamanıza uygulama sürecinde size rehberlik edeceğiz Next.js. i18n ile kullanıcılara çok dilli bir deneyim yaratabilir ve dile özel içerikler sağlayabilirsiniz.

next-i18next Kütüphaneyi Kullanmak

next-i18next uygulamalarda i18n'yi uygulamak için popüler bir kütüphanedir Next.js. Uygulamanıza i18n'yi şu şekilde ekleyebilirsiniz:

Kurulum next-i18next:

npm install next-i18next

Dosyanızdaki kitaplığı yapılandırın next.config.js:

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

Adlı bir yapılandırma dosyası oluşturun next-i18next.config.js:

module.exports = {  
  i18n: {  
    locales: ['en', 'fr', 'es'],  
    defaultLocale: 'en',  
  },  
};  

Kütüphaneyi uygulamanızda kullanın:

import { useTranslation } from 'next-i18next';  
  
function MyComponent() {  
  const { t } = useTranslation();  
  
  return( 
    <div>  
      <p>{t('welcome')}</p>  
    </div>  
 );  
}  

Çok Dilli İçerik Oluşturma

uygulamasını yükledikten sonra, her dilde içerik sağlamak için, next-i18next gibi dil dosyaları oluşturabilirsiniz: en.json fr.json es.json

// en.json  
{  
  "welcome": "Welcome!"  
}  
  
// fr.json  
{  
  "welcome": "Bienvenue!"  
}  
  
// es.json  
{  
  "welcome": "¡Bienvenido!"  
}  

Dil Değiştirme

Dil değiştirmeye izin vermek için bir dil değiştirme aracı oluşturabilir ve işlevi kullanabilirsiniz i18n.changeLanguage:

import { useTranslation } from 'next-i18next';  
  
function LanguageSwitcher() {  
  const { i18n } = useTranslation();  
  
  const handleChangeLanguage =(newLanguage) => {  
    i18n.changeLanguage(newLanguage);  
  };  
  
  return( 
    <div>  
      <button onClick={() => handleChangeLanguage('en')}>English</button>  
      <button onClick={() => handleChangeLanguage('fr')}>Français</button>  
      <button onClick={() => handleChangeLanguage('es')}>Español</button>  
    </div>  
 );  
}  

Çözüm

Next.js Bu bölüm size kitaplığı kullanarak uygulamanızda Uluslararasılaştırmayı(i18n) uygulama sürecini tanıttı next-i18next. Dile özgü içerik sağlayarak ve kullanıcıların dil değiştirmesine olanak tanıyarak, kullanıcılarınız için ilgi çekici bir çok dilli deneyim oluşturabilirsiniz.