{"id":3858,"date":"2024-11-14T05:00:18","date_gmt":"2024-11-14T02:00:18","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/%e9%b8%bf%e8%92%99next-uygulamalari-icin-uluslararasilastirma-dil-ve-bolge-ayarlari\/"},"modified":"2024-11-14T05:00:18","modified_gmt":"2024-11-14T02:00:18","slug":"%e9%b8%bf%e8%92%99next-uygulamalari-icin-uluslararasilastirma-dil-ve-bolge-ayarlari","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/%e9%b8%bf%e8%92%99next-uygulamalari-icin-uluslararasilastirma-dil-ve-bolge-ayarlari\/","title":{"rendered":"\u9e3f\u8499Next Uygulamalar\u0131 \u0130\u00e7in Uluslararas\u0131la\u015ft\u0131rma: Dil ve B\u00f6lge Ayarlar\u0131"},"content":{"rendered":"

\u9e3f\u8499Next Uygulamalar\u0131 \u0130\u00e7in Uluslararas\u0131la\u015ft\u0131rma: Dil ve B\u00f6lge Ayarlar\u0131<\/p>\n

\u9e3f\u8499Next uygulamalar\u0131 geli\u015ftirmek i\u00e7in, uygulaman\u0131z\u0131n k\u00fcresel kullan\u0131c\u0131 taban\u0131na ula\u015fmas\u0131n\u0131 sa\u011flamak amac\u0131yla uluslararas\u0131la\u015ft\u0131rma (i18n) hayati \u00f6nem ta\u015f\u0131r. Uluslararas\u0131la\u015ft\u0131rma, uygulaman\u0131z\u0131 farkl\u0131 dilleri ve b\u00f6lgeleri destekleyecek \u015fekilde uyarlamay\u0131 i\u00e7erir. Bu makale, \u9e3f\u8499Next uygulamalar\u0131n\u0131zda dil ve b\u00f6lge ayarlar\u0131n\u0131n nas\u0131l yap\u0131land\u0131r\u0131laca\u011f\u0131n\u0131 ad\u0131m ad\u0131m anlatacak.<\/p>\n

\u9e3f\u8499Next’te Dil ve B\u00f6lge Deste\u011fi<\/h2>\n

\u9d3b\u8499Next, uygulama geli\u015ftirme s\u00fcrecini basitle\u015ftiren ve farkl\u0131 dilleri ve b\u00f6lgeleri desteklemeyi kolayla\u015ft\u0131ran yerle\u015fik uluslararas\u0131la\u015ft\u0131rma \u00f6zellikleri sunar. Bu \u00f6zellikler, uygulaman\u0131z\u0131n, kullan\u0131c\u0131n\u0131n cihaz\u0131ndaki dil ve b\u00f6lge ayarlar\u0131na g\u00f6re i\u00e7eri\u011fi dinamik olarak uyarlamas\u0131n\u0131 sa\u011flar.<\/p>\n

Uygulamam\u0131z\u0131 Uluslararas\u0131la\u015ft\u0131rma<\/h2>\n

\u0130lk olarak, uygulamam\u0131z\u0131 uluslararas\u0131la\u015ft\u0131rmak i\u00e7in gerekli dosya yap\u0131land\u0131rmas\u0131n\u0131 yapaca\u011f\u0131z. Uygulamam\u0131z\u0131n k\u00f6k dizininde “i18n” ad\u0131nda bir klas\u00f6r olu\u015ftural\u0131m. Bu klas\u00f6r, farkl\u0131 diller i\u00e7in kaynak dosyalar\u0131n\u0131 i\u00e7erecektir.<\/p>\n

“`html
\n\u251c\u2500\u2500 i18n
\n\u2502 \u251c\u2500\u2500 en
\n\u2502 \u2502 \u2514\u2500\u2500 strings.json
\n\u2502 \u251c\u2500\u2500 tr
\n\u2502 \u2502 \u2514\u2500\u2500 strings.json
\n\u2502 \u2514\u2500\u2500 de
\n\u2502 \u2514\u2500\u2500 strings.json
\n\u251c\u2500\u2500 main.js
\n\u251c\u2500\u2500 pages
\n\u2502 \u2514\u2500\u2500 index
\n\u2502 \u2514\u2500\u2500 index.js
\n\u2514\u2500\u2500 app.json
\n“`<\/p>\n

Yukar\u0131daki \u00f6rnekte, “en” (\u0130ngilizce), “tr” (T\u00fcrk\u00e7e) ve “de” (Almanca) dilleri i\u00e7in kaynak dosyalar\u0131 bulunmaktad\u0131r. Her dil i\u00e7in “strings.json” ad\u0131nda bir dosya olu\u015fturaca\u011f\u0131z. Bu dosyalar, uygulamam\u0131zdaki metinleri i\u00e7erecektir.<\/p>\n

Diller i\u00e7in Kaynak Dosyalar\u0131 Olu\u015fturma<\/h2>\n

\u00d6rne\u011fin, “strings.json” dosyas\u0131n\u0131n \u0130ngilizce versiyonu (en\/strings.json) \u015fu \u015fekilde olacakt\u0131r:<\/p>\n

“`json
\n{
\n “welcome”: “Welcome to our app!”,
\n “language”: “Language”
\n}
\n“`<\/p>\n

Ayn\u0131 \u015fekilde, T\u00fcrk\u00e7e versiyonu (tr\/strings.json) da benzer \u015fekilde olu\u015fturulacakt\u0131r:<\/p>\n

“`json
\n{
\n “welcome”: “Uygulamam\u0131za ho\u015f geldiniz!”,
\n “language”: “Dil”
\n}
\n“`<\/p>\n

Burada, “welcome” ve “language” gibi anahtarlar\u0131 kullanarak, uygulamadaki metinleri tan\u0131mlayabiliriz. Uygulaman\u0131n dil ayarlar\u0131na g\u00f6re, do\u011fru kaynak dosyas\u0131ndan ilgili metinler al\u0131nacakt\u0131r.<\/p>\n

\u9e3f\u8499Next’te Dil ve B\u00f6lge De\u011fi\u015ftirme<\/h2>\n

Uygulamam\u0131zda dil ve b\u00f6lge de\u011fi\u015fikliklerini y\u00f6netmek i\u00e7in “i18n” k\u00fct\u00fcphanesini kullanaca\u011f\u0131z. “i18n” k\u00fct\u00fcphanesi, \u9e3f\u8499Next’te dil ve b\u00f6lge ayarlar\u0131n\u0131 kolayca y\u00f6netmemizi sa\u011flayan g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r.<\/p>\n

\u00d6ncelikle, “i18n” k\u00fct\u00fcphanesini uygulamam\u0131za eklememiz gerekiyor. Bunu “app.json” dosyas\u0131nda yapaca\u011f\u0131z:<\/p>\n

“`json
\n{
\n “pages”: [
\n {
\n “path”: “pages\/index\/index”,
\n “style”: {
\n “navigationBarTitleText”: “\u9e3f\u8499Next Uygulamam\u0131z”
\n }
\n }
\n ],
\n “usingComponents”: {
\n “i18n”: “\/i18n\/index”
\n }
\n}
\n“`<\/p>\n

Daha sonra, “pages\/index\/index.js” dosyas\u0131na gerekli kodu ekleyerek dil ve b\u00f6lge ayarlar\u0131n\u0131 y\u00f6netece\u011fiz:<\/p>\n

“`javascript
\nimport i18n from ‘..\/..\/i18n\/index’;<\/p>\n

Page({
\n data: {
\n welcomeMessage: ”
\n },<\/p>\n

onLoad: function() {
\n \/\/ Cihaz\u0131n dilini al
\n const language = wx.getSystemInfoSync().language;<\/p>\n

\/\/ Dili ve b\u00f6lge ayarlar\u0131n\u0131 y\u00fckleyin
\n i18n.init({
\n locale: language
\n });<\/p>\n

\/\/ Ho\u015f geldiniz mesaj\u0131n\u0131 y\u00fckleyin
\n this.setData({
\n welcomeMessage: i18n.t(‘welcome’)
\n });
\n }
\n});
\n“`<\/p>\n

Bu kod par\u00e7as\u0131, kullan\u0131c\u0131n\u0131n cihaz\u0131n\u0131n dilini belirler ve “i18n” k\u00fct\u00fcphanesini kullanarak do\u011fru kaynak dosyas\u0131ndan metinleri y\u00fckler. “t” fonksiyonu, anahtara kar\u015f\u0131l\u0131k gelen metni d\u00f6nd\u00fcrmek i\u00e7in kullan\u0131l\u0131r. \u00d6rne\u011fin, “i18n.t(‘welcome’)” fonksiyonu, “welcome” anahtas\u0131na kar\u015f\u0131l\u0131k gelen metni d\u00f6nd\u00fcrecektir.<\/p>\n

Uluslararas\u0131la\u015ft\u0131rma Uygulamas\u0131n\u0131n Faydalar\u0131<\/h2>\n

Uygulaman\u0131z\u0131 uluslararas\u0131la\u015ft\u0131rmak, a\u015fa\u011f\u0131daki faydalar\u0131 sa\u011flayacakt\u0131r:<\/p>\n