การกำหนดเส้นทางและการนำทางใน Next.js
Dynamic routes, route groups, parallel routes, intercepting routes, useRouter, Link, redirect
1ไวยากรณ์สำหรับสร้าง dynamic route ใน Next.js App Router คืออะไร?
ไวยากรณ์สำหรับสร้าง dynamic route ใน Next.js App Router คืออะไร?
คำตอบ
Dynamic routes ใน Next.js App Router ใช้วงเล็บเหลี่ยมเพื่อกำหนด URL segments ที่เปลี่ยนแปลงได้ ตัวอย่างเช่น [id] สร้าง route ที่จับค่าใดๆ ในตำแหน่งนั้นใน URL ค่านี้สามารถเข้าถึงได้ผ่านพารามิเตอร์ของหน้า ข้อตกลงนี้ช่วยให้สร้างหน้าทั่วไปที่ปรับตัวกับเนื้อหาต่างๆ โดยไม่ต้องสร้างไฟล์แยกสำหรับแต่ละรูปแบบ
2บทบาทหลักของ component Link ใน Next.js คืออะไร?
บทบาทหลักของ component Link ใน Next.js คืออะไร?
คำตอบ
Component Link คือองค์ประกอบการนำทางที่แนะนำใน Next.js มันทำการ prefetch อัตโนมัติสำหรับ route ที่มองเห็นใน viewport และเปิดใช้การนำทางฝั่ง client โดยไม่ต้องโหลดหน้าซ้ำทั้งหมด ต่างจากแท็ก a ทั่วไป Link รักษาสถานะของแอปพลิเคชันและให้การเปลี่ยนหน้าอย่างราบรื่น ซึ่งช่วยปรับปรุงประสบการณ์ผู้ใช้และประสิทธิภาพอย่างมาก
3วิธีเข้าถึงพารามิเตอร์ route แบบไดนามิกใน Server Component คืออะไร?
วิธีเข้าถึงพารามิเตอร์ route แบบไดนามิกใน Server Component คืออะไร?
คำตอบ
ใน Next.js App Router, Server Components จะรับออบเจ็กต์ params ที่มีส่วน URL แบบไดนามิกโดยอัตโนมัติ ออบเจ็กต์นี้ถูกส่งเป็น prop ไปยังฟังก์ชัน component ตัวอย่างเช่น สำหรับ route [id], params.id จะมีค่าที่จับได้ วิธีนี้ช่วยลดความซับซ้อนในการเข้าถึงพารามิเตอร์โดยไม่ต้องใช้ hooks ฝั่ง client
ข้อดีหลักของ route groups ใน Next.js คืออะไร?
ความแตกต่างระหว่าง useRouter และ usePathname คืออะไร?
+19 คำถามสัมภาษณ์
หัวข้อสัมภาษณ์ 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
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
การแปลภาษา Next.js
React ความปลอดภัย & แนวปฏิบัติที่ดีที่สุด
เชี่ยวชาญ React / Next.js สำหรับการสัมภาษณ์ครั้งถัดไป
เข้าถึงคำถามทั้งหมด flashcards แบบทดสอบเทคนิค แบบฝึกหัด code review และตัวจำลองสัมภาษณ์
เริ่มใช้ฟรี