24:["$","code","code-0",{"className":"hljs language-json","children":[["$","span","span-0",{"className":"hljs-punctuation","children":"{"}],"\n ",["$","span","span-1",{"className":"hljs-attr","children":"\"NAV\""}],["$","span","span-2",{"className":"hljs-punctuation","children":":"}]," ",["$","span","span-3",{"className":"hljs-punctuation","children":"{"}],"\n ",["$","span","span-4",{"className":"hljs-attr","children":"\"home\""}],["$","span","span-5",{"className":"hljs-punctuation","children":":"}]," ",["$","span","span-6",{"className":"hljs-string","children":"\"Home\""}],"\n ",["$","span","span-7",{"className":"hljs-punctuation","children":"}"}],"\n",["$","span","span-8",{"className":"hljs-punctuation","children":"}"}],"\n"]}] 25:["$","h2","h2-1",{"children":"2. Baca cookie di server"}] 26:["$","p","p-5",{"children":[["$","a","a-0",{"href":"i18n/request.ts","children":"i18n/request.ts"}]," menentukan bahasa dan memuat JSON yang sesuai. Berikut versi ringkasnya:"]}] 27:["$","pre","pre-2",{"children":["$","code","code-0",{"className":"hljs language-ts","children":[["$","span","span-0",{"className":"hljs-keyword","children":"import"}]," { cookies } ",["$","span","span-1",{"className":"hljs-keyword","children":"from"}]," ",["$","span","span-2",{"className":"hljs-string","children":"'next/headers'"}],";\n",["$","span","span-3",{"className":"hljs-keyword","children":"import"}]," { getRequestConfig } ",["$","span","span-4",{"className":"hljs-keyword","children":"from"}]," ",["$","span","span-5",{"className":"hljs-string","children":"'next-intl/server'"}],";\n\n",["$","span","span-6",{"className":"hljs-keyword","children":"export"}]," ",["$","span","span-7",{"className":"hljs-keyword","children":"default"}]," ",["$","span","span-8",{"className":"hljs-title function_","children":"getRequestConfig"}],"(",["$","span","span-9",{"className":"hljs-title function_","children":"async"}]," () => {\n ",["$","span","span-10",{"className":"hljs-keyword","children":"const"}]," cookieStore = ",["$","span","span-11",{"className":"hljs-keyword","children":"await"}]," ",["$","span","span-12",{"className":"hljs-title function_","children":"cookies"}],"();\n ",["$","span","span-13",{"className":"hljs-keyword","children":"const"}]," locale = cookieStore.",["$","span","span-14",{"className":"hljs-title function_","children":"get"}],"(",["$","span","span-15",{"className":"hljs-string","children":"'NEXT_LOCALE'"}],")?.",["$","span","span-16",{"className":"hljs-property","children":"value"}]," === ",["$","span","span-17",{"className":"hljs-string","children":"'en'"}]," ? ",["$","span","span-18",{"className":"hljs-string","children":"'en'"}]," : ",["$","span","span-19",{"className":"hljs-string","children":"'id'"}],";\n\n ",["$","span","span-20",{"className":"hljs-keyword","children":"return"}]," {\n locale,\n ",["$","span","span-21",{"className":"hljs-attr","children":"messages"}],": (",["$","span","span-22",{"className":"hljs-keyword","children":"await"}]," ",["$","span","span-23",{"className":"hljs-keyword","children":"import"}],"(",["$","span","span-24",{"className":"hljs-string","children":["`@/i18n/",["$","span","span-0",{"className":"hljs-subst","children":"$${locale}"}],".json`"]}],")).",["$","span","span-25",{"className":"hljs-property","children":"default"}],",\n };\n});\n"]}]}] 28:["$","p","p-6",{"children":"Jika cookie belum ada atau nilainya tidak valid, bahasa kembali ke Indonesia."}] 29:["$","p","p-7",{"children":["Hubungkan konfigurasi ini melalui plugin di ",["$","a","a-0",{"href":"next.config.ts","children":"next.config.ts"}],":"]}] 2a:["$","pre","pre-3",{"children":["$","code","code-0",{"className":"hljs language-ts","children":[["$","span","span-0",{"className":"hljs-keyword","children":"import"}]," ",["$","span","span-1",{"className":"hljs-keyword","children":"type"}]," { ",["$","span","span-2",{"className":"hljs-title class_","children":"NextConfig"}]," } ",["$","span","span-3",{"className":"hljs-keyword","children":"from"}]," ",["$","span","span-4",{"className":"hljs-string","children":"'next'"}],";\n",["$","span","span-5",{"className":"hljs-keyword","children":"import"}]," createNextIntlPlugin ",["$","span","span-6",{"className":"hljs-keyword","children":"from"}]," ",["$","span","span-7",{"className":"hljs-string","children":"'next-intl/plugin'"}],";\n\n",["$","span","span-8",{"className":"hljs-keyword","children":"const"}]," ",["$","span","span-9",{"className":"hljs-attr","children":"nextConfig"}],": ",["$","span","span-10",{"className":"hljs-title class_","children":"NextConfig"}]," = {...}; \n\n",["$","span","span-11",{"className":"hljs-keyword","children":"const"}]," withNextIntl = ",["$","span","span-12",{"className":"hljs-title function_","children":"createNextIntlPlugin"}],"(",["$","span","span-13",{"className":"hljs-string","children":"'./i18n/request.ts'"}],");\n\n",["$","span","span-14",{"className":"hljs-keyword","children":"export"}]," ",["$","span","span-15",{"className":"hljs-keyword","children":"default"}]," ",["$","span","span-16",{"className":"hljs-title function_","children":"withNextIntl"}],"(nextConfig);\n\n"]}]}] 2b:["$","h2","h2-2",{"children":"3. Sediakan terjemahan lewat provider"}] 2c:["$","p","p-8",{"children":["Di ",["$","a","a-0",{"href":"app/layout.tsx","children":"app/layout.tsx"}],", ambil locale dan pesan menggunakan ",["$","code","code-0",{"children":"getLocale()"}]," serta ",["$","code","code-1",{"children":"getMessages()"}]," dari ",["$","code","code-2",{"children":"next-intl/server"}],"."]}] 2d:["$","p","p-9",{"children":"Bagian inti dalam fungsi layout async:"}] 2e:["$","pre","pre-4",{"children":["$","code","code-0",{"className":"hljs language-tsx","children":[["$","span","span-0",{"className":"hljs-keyword","children":"import"}]," { ",["$","span","span-1",{"className":"hljs-title class_","children":"NextIntlClientProvider"}]," } ",["$","span","span-2",{"className":"hljs-keyword","children":"from"}]," ",["$","span","span-3",{"className":"hljs-string","children":"'next-intl'"}],";\n",["$","span","span-4",{"className":"hljs-keyword","children":"import"}]," { getLocale, getMessages } ",["$","span","span-5",{"className":"hljs-keyword","children":"from"}]," ",["$","span","span-6",{"className":"hljs-string","children":"\"next-intl/server\""}],";\n\n\n",["$","span","span-7",{"className":"hljs-keyword","children":"const"}]," locale = ",["$","span","span-8",{"className":"hljs-keyword","children":"await"}]," ",["$","span","span-9",{"className":"hljs-title function_","children":"getLocale"}],"();\n",["$","span","span-10",{"className":"hljs-keyword","children":"const"}]," messages = ",["$","span","span-11",{"className":"hljs-keyword","children":"await"}]," ",["$","span","span-12",{"className":"hljs-title function_","children":"getMessages"}],"();\n\n",["$","span","span-13",{"className":"hljs-keyword","children":"return"}]," (\n ",["$","span","span-14",{"className":"xml","children":[["$","span","span-0",{"className":"hljs-tag","children":["<",["$","span","span-0",{"className":"hljs-name","children":"html"}]," ",["$","span","span-1",{"className":"hljs-attr","children":"lang"}],"=",["$","span","span-2",{"className":"hljs-string","children":"{locale}"}],">"]}],"\n ",["$","span","span-1",{"className":"hljs-tag","children":["<",["$","span","span-0",{"className":"hljs-name","children":"body"}],">"]}],"\n ",["$","span","span-2",{"className":"hljs-tag","children":["<",["$","span","span-0",{"className":"hljs-name","children":"NextIntlClientProvider"}]," ",["$","span","span-1",{"className":"hljs-attr","children":"messages"}],"=",["$","span","span-2",{"className":"hljs-string","children":"{messages}"}],">"]}],"\n {children}\n ",["$","span","span-3",{"className":"hljs-tag","children":[""]}],"\n ",["$","span","span-4",{"className":"hljs-tag","children":[""]}],"\n ",["$","span","span-5",{"className":"hljs-tag","children":[""]}]]}],"\n);\n"]}]}] 2f:["$","p","p-10",{"children":["Import ",["$","code","code-0",{"children":"NextIntlClientProvider"}]," dari ",["$","code","code-1",{"children":"next-intl"}],". Provider menyediakan pesan untuk komponen client dan mewarisi locale dari konfigurasi server."]}] 30:["$","h2","h2-3",{"children":"4. Gunakan teks terjemahan"}] 31:["$","pre","pre-5",{"children":["$","code","code-0",{"className":"hljs language-tsx","children":[["$","span","span-0",{"className":"hljs-keyword","children":"import"}]," { useTranslations } ",["$","span","span-1",{"className":"hljs-keyword","children":"from"}]," ",["$","span","span-2",{"className":"hljs-string","children":"'next-intl'"}],";\n\n",["$","span","span-3",{"className":"hljs-keyword","children":"export"}]," ",["$","span","span-4",{"className":"hljs-keyword","children":"default"}]," ",["$","span","span-5",{"className":"hljs-keyword","children":"function"}]," ",["$","span","span-6",{"className":"hljs-title function_","children":"HomeLabel"}],"(",["$","span","span-7",{"className":"hljs-params"}],") {\n ",["$","span","span-8",{"className":"hljs-keyword","children":"const"}]," t = ",["$","span","span-9",{"className":"hljs-title function_","children":"useTranslations"}],"(",["$","span","span-10",{"className":"hljs-string","children":"'NAV'"}],");\n\n ",["$","span","span-11",{"className":"hljs-keyword","children":"return"}]," ",["$","span","span-12",{"className":"xml","children":[["$","span","span-0",{"className":"hljs-tag","children":["<",["$","span","span-0",{"className":"hljs-name","children":"span"}],">"]}],"{t('home')}",["$","span","span-1",{"className":"hljs-tag","children":[""]}]]}],";\n}\n"]}]}] 32:["$","p","p-11",{"children":[["$","code","code-0",{"children":"NAV"}]," adalah kelompok pesan, sedangkan ",["$","code","code-1",{"children":"home"}]," adalah key-nya. Untuk Server Component async, gunakan ",["$","code","code-2",{"children":"await getTranslations('NAV')"}]," dari ",["$","code","code-3",{"children":"next-intl/server"}],"."]}] 33:["$","h2","h2-4",{"children":"5. Ganti bahasa tanpa reload halaman"}] 34:["$","pre","pre-6",{"children":["$","code","code-0",{"className":"hljs language-tsx","children":[["$","span","span-0",{"className":"hljs-keyword","children":"const"}]," router = ",["$","span","span-1",{"className":"hljs-title function_","children":"useRouter"}],"(); ",["$","span","span-2",{"className":"hljs-comment","children":"// next/navigation"}],"\n",["$","span","span-3",{"className":"hljs-keyword","children":"const"}]," locale = ",["$","span","span-4",{"className":"hljs-title function_","children":"useLocale"}],"(); ",["$","span","span-5",{"className":"hljs-comment","children":"// next-intl"}],"\n",["$","span","span-6",{"className":"hljs-keyword","children":"const"}]," [isPending, startTransition] = ",["$","span","span-7",{"className":"hljs-title function_","children":"useTransition"}],"(); ",["$","span","span-8",{"className":"hljs-comment","children":"// react"}],"\n\n",["$","span","span-9",{"className":"hljs-keyword","children":"const"}]," ",["$","span","span-10",{"className":"hljs-title function_","children":"changeLanguage"}]," = (",["$","span","span-11",{"className":"hljs-params","children":[["$","span","span-0",{"className":"hljs-attr","children":"lang"}],": ",["$","span","span-1",{"className":"hljs-string","children":"'id'"}]," | ",["$","span","span-2",{"className":"hljs-string","children":"'en'"}]]}],") => {\n ",["$","span","span-12",{"className":"hljs-keyword","children":"if"}]," (lang === locale || isPending) ",["$","span","span-13",{"className":"hljs-keyword","children":"return"}],";\n\n ",["$","span","span-14",{"className":"hljs-comment","children":"// eslint-disable-next-line react-hooks/immutability"}],"\n ",["$","span","span-15",{"className":"hljs-variable language_","children":"document"}],".",["$","span","span-16",{"className":"hljs-property","children":"cookie"}]," = ",["$","span","span-17",{"className":"hljs-string","children":["`NEXT_LOCALE=",["$","span","span-0",{"className":"hljs-subst","children":"$${lang}"}],"; path=/; max-age=31536000; SameSite=Lax`"]}],";\n ",["$","span","span-18",{"className":"hljs-title function_","children":"startTransition"}],"(",["$","span","span-19",{"className":"hljs-function","children":"() =>"}]," router.",["$","span","span-20",{"className":"hljs-title function_","children":"refresh"}],"());\n};\n"]}]}] 35:["$","p","p-12",{"children":"Panggil lewat tombol:"}] 36:["$","pre","pre-7",{"children":["$","code","code-0",{"className":"hljs language-tsx","children":[""}]," ",["$","span","span-3",{"className":"hljs-title function_","children":"changeLanguage"}],"(",["$","span","span-4",{"className":"hljs-string","children":"'en'"}],")}\n>\n ",["$","span","span-5",{"className":"hljs-title class_","children":"English"}],"\n\n"]}]}] 37:["$","p","p-13",{"children":["Cookie menyimpan pilihan, lalu ",["$","code","code-0",{"children":"router.refresh()"}]," meminta hasil render terbaru ke server ",["$","strong","strong-0",{"children":"tanpa memuat ulang seluruh dokumen"}],". Request jaringan tetap terjadi. ",["$","code","code-1",{"children":"useTransition()"}]," menyediakan status ",["$","code","code-2",{"children":"isPending"}]," untuk indikator proses dan menonaktifkan tombol sementara."]}] 38:["$","h2","h2-5",{"children":"Catatan singkat"}] 39:["$","ul","ul-0",{"children":["\n",["$","li","li-0",{"children":"Tambahkan key yang sama di kedua JSON saat membuat terjemahan baru."}],"\n",["$","li","li-1",{"children":["Cookie harus ditulis sebelum ",["$","code","code-0",{"children":"router.refresh()"}],"."]}],"\n",["$","li","li-2",{"children":"Isi artikel dari database tidak otomatis diterjemahkan."}],"\n",["$","li","li-3",{"children":"Uji dengan mengganti bahasa, lalu refresh browser manual untuk memastikan pilihan tersimpan."}],"\n"]}] 3a:["$","p","p-14",{"children":["Referensi: ",["$","a","a-0",{"href":"https://next-intl.dev/docs/getting-started/app-router","children":"next-intl"}]," · ",["$","a","a-1",{"href":"https://nextjs.org/docs/app/api-reference/functions/use-router","children":"Next.js router.refresh"}],"."]}] 3b:["$","div",null,{"className":"mt-10 flex flex-wrap gap-2 border-t border-neutral-200 pt-6 dark:border-[#303030]","children":[["$","span","0",{"className":"text-xs font-medium text-neutral-500 dark:text-neutral-400","children":["#","NextJs"]}],["$","span","1",{"className":"text-xs font-medium text-neutral-500 dark:text-neutral-400","children":["#","NextIntl"]}]]}] 3c:["$","div",null,{"className":"lg:col-span-4 lg:pl-8","children":["$","div",null,{"className":"sticky top-28 flex flex-col space-y-3 text-xs text-neutral-500 dark:text-neutral-400","children":[["$","div",null,{"children":"7 Sept 2026"}],["$","div",null,{"children":"3 min read"}]]}]}]