Küreselleşen dünyada yazılım uygulamaları yalnızca tek bir dile hitap etmiyor. Kullanıcı deneyimini geliştirmek, uluslararası pazarda yer edinmek ve SEO başarısını artırmak isteyen her yazılım projesi için çok dilli destek (i18n – Internationalization) artık vazgeçilmez bir özellik.
Bu rehberde, Next.js kullanarak çok dilli web uygulamaları nasıl geliştirilir sorusuna adım adım yanıt vereceğiz.
📌 Neden Çok Dilli Uygulama?
- 🌐 Uluslararası hedef kitleye hitap etmek
- 📈 Arama motorlarında farklı dillerde sıralama almak (i18n SEO)
- 🧑💼 B2B uygulamalarda farklı bölgelere hizmet sunmak
- 🧩 Daha iyi kullanıcı deneyimi ile dönüşüm oranını artırmak
🚀 Next.js i18n Özellikleri
Next.js, dahili olarak Internationalized Routing desteği sunar. Bu özellik sayesinde çok dilli URL yapıları, otomatik yönlendirmeler ve yerel ayar kontrolü gibi konular kolayca yönetilir.
next.config.js Ayarları
jsCopyEdit// next.config.js
module.exports = {
i18n: {
locales: ['tr', 'en', 'de'],
defaultLocale: 'tr',
localeDetection: true,
},
};
🌐 Yukarıdaki yapı ile
/en,/degibi URL’ler otomatik olarak çalışır.
🧰 Dil Dosyalarıyla Çalışmak (next-i18next)
Next.js projelerinde en yaygın kullanılan i18n kütüphanesi: next-i18next
1. Kurulum
bashCopyEditnpm install next-i18next i18next react-i18next
2. Yapılandırma Dosyası Oluştur
next-i18next.config.js:
jsCopyEditmodule.exports = {
i18n: {
defaultLocale: 'tr',
locales: ['tr', 'en', 'de'],
},
};
3. Uygulamanı Sarmalla
_app.tsx:
tsxCopyEditimport { appWithTranslation } from 'next-i18next';
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default appWithTranslation(MyApp);
4. Dil Dosyaları (public/locales)
pgsqlCopyEditpublic/
locales/
tr/
common.json
en/
common.json
de/
common.json
common.json (örnek):
jsonCopyEdit{
"welcome": "Hoş geldiniz",
"about": "Hakkımızda"
}
5. Bileşende Kullanımı
tsxCopyEditimport { useTranslation } from 'next-i18next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
export default function Home() {
const { t } = useTranslation('common');
return <h1>{t('welcome')}</h1>;
}
export async function getStaticProps({ locale }) {
return {
props: {
...(await serverSideTranslations(locale, ['common'])),
},
};
}
🌐 SEO için Çok Dilli Uyum
Next.js + i18n ile her dil için ayrı URL üretildiğinden, dil bazlı SEO avantajı sağlar. Ayrıca her sayfa için <html lang="xx">, <meta> ve <link rel="alternate" hreflang="xx" /> etiketlerini doğru yönetmek önemlidir.
tsxCopyEdit<Head>
<html lang="en" />
<link rel="alternate" href="https://site.com/tr" hrefLang="tr" />
<link rel="alternate" href="https://site.com/en" hrefLang="en" />
</Head>
DinamikUp olarak geliştirdiğimiz birçok SaaS ve kurumsal uygulamada çoklu dil desteğini başarıyla entegre ettik. Özellikle:
- Avrupa’ya açılan e-ihracat projelerinde,
- Almanca ve İngilizce dil destekli müşteri portallarında,
- Birden fazla ülkede hizmet sunan markaların kurumsal sitelerinde,
…Next.js + i18n altyapısını kullanarak hem kullanıcı deneyimini iyileştirdik, hem de uluslararası görünürlüğü artırdık.
