<!-- wp:image {"id":61,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://trendsenfoni.com/wp-content/uploads/trendsenfoni-nextjs-i18n-alitek.png" alt="" class="wp-image-61"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"className":""} -->
<p>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 <strong>çok dilli destek (i18n - Internationalization)</strong> artık vazgeçilmez bir özellik.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":""} -->
<p>Bu rehberde, <strong>Next.js kullanarak çok dilli web uygulamaları nasıl geliştirilir</strong> sorusuna adım adım yanıt vereceğiz.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"className":""} -->
<h3 class="wp-block-heading">📌 Neden Çok Dilli Uygulama?</h3>
<!-- /wp:heading -->

<!-- wp:list -->
<ul class="wp-block-list"><!-- wp:list-item -->
<li>🌐 Uluslararası hedef kitleye hitap etmek</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>📈 Arama motorlarında farklı dillerde sıralama almak (i18n SEO)</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>🧑‍💼 B2B uygulamalarda farklı bölgelere hizmet sunmak</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>🧩 Daha iyi kullanıcı deneyimi ile dönüşüm oranını artırmak</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading {"level":3,"className":""} -->
<h3 class="wp-block-heading">🚀 Next.js i18n Özellikleri</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":""} -->
<p>Next.js, dahili olarak <a class="">Internationalized Routing</a> desteği sunar. Bu özellik sayesinde çok dilli URL yapıları, otomatik yönlendirmeler ve yerel ayar kontrolü gibi konular kolayca yönetilir.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4,"className":""} -->
<h4 class="wp-block-heading"><code>next.config.js</code> Ayarları</h4>
<!-- /wp:heading -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">jsCopyEdit<code>// next.config.js
module.exports = {
  i18n: {
    locales: ['tr', 'en', 'de'],
    defaultLocale: 'tr',
    localeDetection: true,
  },
};
</code></pre>
<!-- /wp:preformatted -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><!-- wp:paragraph {"className":""} -->
<p>🌐 Yukarıdaki yapı ile <code>/en</code>, <code>/de</code> gibi URL’ler otomatik olarak çalışır.</p>
<!-- /wp:paragraph --></blockquote>
<!-- /wp:quote -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading {"level":3,"className":""} -->
<h3 class="wp-block-heading">🧰 Dil Dosyalarıyla Çalışmak (next-i18next)</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":""} -->
<p>Next.js projelerinde en yaygın kullanılan i18n kütüphanesi: <a class="" href="https://github.com/i18next/next-i18next"><code>next-i18next</code></a></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4,"className":""} -->
<h4 class="wp-block-heading">1. Kurulum</h4>
<!-- /wp:heading -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">bashCopyEdit<code>npm install next-i18next i18next react-i18next
</code></pre>
<!-- /wp:preformatted -->

<!-- wp:heading {"level":4,"className":""} -->
<h4 class="wp-block-heading">2. Yapılandırma Dosyası Oluştur</h4>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":""} -->
<p><code>next-i18next.config.js</code>:</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">jsCopyEdit<code>module.exports = {
  i18n: {
    defaultLocale: 'tr',
    locales: ['tr', 'en', 'de'],
  },
};
</code></pre>
<!-- /wp:preformatted -->

<!-- wp:heading {"level":4,"className":""} -->
<h4 class="wp-block-heading">3. Uygulamanı Sarmalla</h4>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":""} -->
<p><code>_app.tsx</code>:</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">tsxCopyEdit<code>import { appWithTranslation } from 'next-i18next';

function MyApp({ Component, pageProps }) {
  return &lt;Component {...pageProps} /&gt;;
}

export default appWithTranslation(MyApp);
</code></pre>
<!-- /wp:preformatted -->

<!-- wp:heading {"level":4,"className":""} -->
<h4 class="wp-block-heading">4. Dil Dosyaları (public/locales)</h4>
<!-- /wp:heading -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">pgsqlCopyEdit<code>public/
  locales/
    tr/
      common.json
    en/
      common.json
    de/
      common.json
</code></pre>
<!-- /wp:preformatted -->

<!-- wp:paragraph {"className":""} -->
<p><code>common.json</code> (örnek):</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">jsonCopyEdit<code>{
  "welcome": "Hoş geldiniz",
  "about": "Hakkımızda"
}
</code></pre>
<!-- /wp:preformatted -->

<!-- wp:heading {"level":4,"className":""} -->
<h4 class="wp-block-heading">5. Bileşende Kullanımı</h4>
<!-- /wp:heading -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">tsxCopyEdit<code>import { useTranslation } from 'next-i18next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

export default function Home() {
  const { t } = useTranslation('common');

  return &lt;h1&gt;{t('welcome')}&lt;/h1&gt;;
}

export async function getStaticProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ['common'])),
    },
  };
}
</code></pre>
<!-- /wp:preformatted -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading {"level":3,"className":""} -->
<h3 class="wp-block-heading">🌐 SEO için Çok Dilli Uyum</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":""} -->
<p>Next.js + i18n ile her dil için ayrı URL üretildiğinden, <strong>dil bazlı SEO avantajı</strong> sağlar. Ayrıca her sayfa için <code>&lt;html lang="xx"&gt;</code>, <code>&lt;meta&gt;</code> ve <code>&lt;link rel="alternate" hreflang="xx" /&gt;</code> etiketlerini doğru yönetmek önemlidir.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>tsxCopyEdit<code>&lt;Head&gt;
  &lt;html lang="en" /&gt;
  &lt;link rel="alternate" href="https://site.com/tr" hrefLang="tr" /&gt;
  &lt;link rel="alternate" href="https://site.com/en" hrefLang="en" /&gt;
&lt;/Head&gt;
</code></code></pre>
<!-- /wp:code -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:paragraph {"className":""} -->
<p><strong>TrendSenfoni</strong> olarak geliştirdiğimiz birçok SaaS ve kurumsal uygulamada çoklu dil desteğini başarıyla entegre ettik. Özellikle:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul class="wp-block-list"><!-- wp:list-item -->
<li>Avrupa’ya açılan e-ihracat projelerinde,</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Almanca ve İngilizce dil destekli müşteri portallarında,</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Birden fazla ülkede hizmet sunan markaların kurumsal sitelerinde,</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:paragraph {"className":""} -->
<p>...Next.js + i18n altyapısını kullanarak <strong>hem kullanıcı deneyimini iyileştirdik, hem de uluslararası görünürlüğü artırdık.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->