การแปลภาษา Next.js
next-intl, locale routing, การแปล, การจัดรูปแบบวันที่/เวลา, รองรับ RTL, การสลับ locale แบบไดนามิก
1บทบาทหลักของไฟล์ middleware.ts ในแอปพลิเคชัน Next.js ที่ใช้ next-intl คืออะไร?
บทบาทหลักของไฟล์ middleware.ts ในแอปพลิเคชัน Next.js ที่ใช้ next-intl คืออะไร?
คำตอบ
middleware ของ next-intl ตรวจจับ locale ของผู้ใช้โดยอัตโนมัติ (ผ่าน Accept-Language header, cookie หรือ URL) และเปลี่ยนเส้นทางไปยัง URL ที่เหมาะสมพร้อม locale prefix โดยทำงานก่อนทุกคำร้องขอและจัดการการเจรจา locale โดยไม่ต้องเพิ่มโค้ดในคอมโพเนนต์ นี่คือจุดเข้าถึงที่จำเป็นสำหรับการเปิดใช้งาน i18n routing ใน Next.js App Router
2ใน next-intl ควรวางไฟล์แปลภาษาไว้ที่ไหนเพื่อโครงสร้างโปรเจกต์ที่ดีที่สุด?
ใน next-intl ควรวางไฟล์แปลภาษาไว้ที่ไหนเพื่อโครงสร้างโปรเจกต์ที่ดีที่สุด?
คำตอบ
ไฟล์แปลภาษาจะวางไว้ที่ messages/[locale].json ในรูท (เช่น messages/fr.json, messages/en.json) การจัดการนี้ช่วยให้ค้นหาการแปลได้ง่ายและให้ next-intl โหลดอัตโนมัติผ่านการตั้งค่า i18n บางโปรเจกต์ยังใช้ messages/[locale]/ พร้อมไฟล์แยกตาม namespace เพื่อการจัดระเบียบที่ดีขึ้น
3ความแตกต่างหลักระหว่าง useTranslations และ getTranslations ใน next-intl คืออะไร?
ความแตกต่างหลักระหว่าง useTranslations และ getTranslations ใน next-intl คืออะไร?
คำตอบ
useTranslations คือ React hook แบบ synchronous สำหรับ Client Components ส่วน getTranslations คือฟังก์ชัน async สำหรับ Server Components getTranslations ช่วยให้ดึงการแปลฝั่ง server โดยไม่ต้องส่ง JavaScript ไปยัง client ช่วยเพิ่มประสิทธิภาพ useTranslations จำเป็นสำหรับคอมโพเนนต์แบบโต้ตอบที่ต้องใช้ directive use client
วิธีกำหนดค่า locale ที่รองรับใน next-intl คืออะไร?
ไวยากรณ์สำหรับใช้ตัวแปรในการแปล next-intl คืออะไร?
+17 คำถามสัมภาษณ์
หัวข้อสัมภาษณ์ React / Next.js อื่นๆ
พื้นฐาน JavaScript
พื้นฐาน React
React Hooks
วงจรชีวิตของ component
React Router
การจัดการ state ด้วย Context
ฟอร์มและ Controlled Components
การดึงข้อมูลและ API
React Query (TanStack Query)
Styling & CSS-in-JS
พื้นฐาน Next.js
TypeScript กับ React
การดึงข้อมูล Next.js
Server Actions ของ Next.js
การกำหนดเส้นทางและการนำทางใน Next.js
API Routes ใน Next.js
Metadata & SEO ใน Next.js
Middleware และ Auth ใน Next.js
การทดสอบ React
Zustand State Management
การเพิ่มประสิทธิภาพ React
Error Boundaries & การจัดการข้อผิดพลาด
Advanced React Patterns
ฟีเจอร์ขั้นสูงของ Next.js
การ Deploy & Production ของ Next.js
Architecture & Design Patterns
React Server Components
React ความปลอดภัย & แนวปฏิบัติที่ดีที่สุด
เชี่ยวชาญ React / Next.js สำหรับการสัมภาษณ์ครั้งถัดไป
เข้าถึงคำถามทั้งหมด flashcards แบบทดสอบเทคนิค แบบฝึกหัด code review และตัวจำลองสัมภาษณ์
เริ่มใช้ฟรี