# Internasionalisasi Next.js (React / Next.js)

> next-intl, locale routing, terjemahan, pemformatan tanggal/waktu, dukungan RTL, pergantian locale dinamis

- 20 pertanyaan wawancara
- Senior
- [Pertanyaan Wawancara: React / Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara.md)

## 1. Apa peran utama file middleware.ts dalam aplikasi Next.js dengan next-intl?

**Jawaban**

Middleware next-intl secara otomatis mendeteksi locale pengguna (via header Accept-Language, cookies, atau URL) dan mengarahkan ke URL yang sesuai dengan prefiks locale. Ini berjalan sebelum setiap permintaan dan menangani negosiasi locale tanpa kode tambahan di komponen. Ini adalah titik masuk yang diperlukan untuk mengaktifkan routing i18n di Next.js App Router.

## 2. Di next-intl, di mana file terjemahan harus ditempatkan untuk struktur proyek yang optimal?

**Jawaban**

File terjemahan ditempatkan di messages/[locale].json di root proyek (contoh: messages/fr.json, messages/en.json). Konvensi ini memudahkan penemuan terjemahan dan memungkinkan next-intl memuatnya secara otomatis melalui konfigurasi i18n. Beberapa proyek juga menggunakan messages/[locale]/ dengan file terpisah per namespace untuk organisasi yang lebih baik.

## 3. Apa perbedaan utama antara useTranslations dan getTranslations di next-intl?

**Jawaban**

useTranslations adalah hook React sinkron untuk Client Components, sedangkan getTranslations adalah fungsi async untuk Server Components. getTranslations memungkinkan pengambilan terjemahan di sisi server tanpa mengirim JavaScript ke klien, meningkatkan performa. useTranslations diperlukan untuk komponen interaktif yang membutuhkan direktif use client.

## 17 pertanyaan lagi tersedia

- Bagaimana cara mengkonfigurasi locale yang didukung di next-intl?
- Apa sintaks untuk menggunakan variabel dalam terjemahan next-intl?

Daftar gratis: https://sharpskill.dev/id/login

## Topik wawancara React / Next.js lainnya

- [Dasar-Dasar JavaScript](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/javascript-essentials.md): 25 pertanyaan, Junior
- [Dasar-Dasar React](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-fundamentals.md): 20 pertanyaan, Junior
- [React Hooks](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-hooks.md): 22 pertanyaan, Junior
- [Siklus hidup komponen](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/component-lifecycle.md): 18 pertanyaan, Junior
- [React Router](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-router.md): 20 pertanyaan, Junior
- [Manajemen state dengan Context](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/state-management-context.md): 18 pertanyaan, Junior
- [Form & Controlled Components](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/forms-controlled-components.md): 20 pertanyaan, Mid-Level
- [Pengambilan Data & API](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/fetching-data-api.md): 20 pertanyaan, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-query-tanstack.md): 20 pertanyaan, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/styling-css-in-js.md): 18 pertanyaan, Mid-Level
- [Dasar-dasar Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-fundamentals.md): 25 pertanyaan, Mid-Level
- [TypeScript dengan React](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/typescript-react.md): 20 pertanyaan, Mid-Level
- [Data Fetching Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-data-fetching.md): 24 pertanyaan, Mid-Level
- [Server Actions Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-server-actions.md): 20 pertanyaan, Mid-Level
- [Routing & Navigasi Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-routing-navigation.md): 22 pertanyaan, Mid-Level
- [API Routes Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-api-routes.md): 20 pertanyaan, Mid-Level
- [Metadata & SEO di Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-metadata-seo.md): 18 pertanyaan, Mid-Level
- [Middleware & Auth di Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-middleware-auth.md): 22 pertanyaan, Mid-Level
- [Pengujian React](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-testing.md): 20 pertanyaan, Mid-Level
- [Zustand State Management](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/zustand-state-management.md): 18 pertanyaan, Mid-Level
- [Optimasi Performa React](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-performance-optimization.md): 22 pertanyaan, Senior
- [Error Boundaries & Error Handling](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-error-boundaries.md): 18 pertanyaan, Senior
- [Advanced React Patterns](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/advanced-react-patterns.md): 20 pertanyaan, Senior
- [Fitur Lanjutan Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-advanced-features.md): 24 pertanyaan, Senior
- [Deployment & Produksi Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-deployment-production.md): 20 pertanyaan, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-architecture-patterns.md): 22 pertanyaan, Senior
- [React Server Components](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-server-components.md): 26 pertanyaan, Senior
- [Keamanan React & Praktik Terbaik](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-security-best-practices.md): 22 pertanyaan, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-internationalization