Question 1

ไวยากรณ์สำหรับสร้าง dynamic route ใน Next.js App Router คืออะไร?

Accepted Answer

Dynamic routes ใน Next.js App Router ใช้วงเล็บเหลี่ยมเพื่อกำหนด URL segments ที่เปลี่ยนแปลงได้ ตัวอย่างเช่น [id] สร้าง route ที่จับค่าใดๆ ในตำแหน่งนั้นใน URL ค่านี้สามารถเข้าถึงได้ผ่านพารามิเตอร์ของหน้า ข้อตกลงนี้ช่วยให้สร้างหน้าทั่วไปที่ปรับตัวกับเนื้อหาต่างๆ โดยไม่ต้องสร้างไฟล์แยกสำหรับแต่ละรูปแบบ

Question 2

บทบาทหลักของ component Link ใน Next.js คืออะไร?

Accepted Answer

Component Link คือองค์ประกอบการนำทางที่แนะนำใน Next.js มันทำการ prefetch อัตโนมัติสำหรับ route ที่มองเห็นใน viewport และเปิดใช้การนำทางฝั่ง client โดยไม่ต้องโหลดหน้าซ้ำทั้งหมด ต่างจากแท็ก a ทั่วไป Link รักษาสถานะของแอปพลิเคชันและให้การเปลี่ยนหน้าอย่างราบรื่น ซึ่งช่วยปรับปรุงประสบการณ์ผู้ใช้และประสิทธิภาพอย่างมาก

Question 3

วิธีเข้าถึงพารามิเตอร์ route แบบไดนามิกใน Server Component คืออะไร?

Accepted Answer

ใน Next.js App Router, Server Components จะรับออบเจ็กต์ params ที่มีส่วน URL แบบไดนามิกโดยอัตโนมัติ ออบเจ็กต์นี้ถูกส่งเป็น prop ไปยังฟังก์ชัน component ตัวอย่างเช่น สำหรับ route [id], params.id จะมีค่าที่จับได้ วิธีนี้ช่วยลดความซับซ้อนในการเข้าถึงพารามิเตอร์โดยไม่ต้องใช้ hooks ฝั่ง client

การกำหนดเส้นทางและการนำทางใน Next.js

ไวยากรณ์สำหรับสร้าง dynamic route ใน Next.js App Router คืออะไร?

คำตอบ

บทบาทหลักของ component Link ใน Next.js คืออะไร?

คำตอบ

วิธีเข้าถึงพารามิเตอร์ route แบบไดนามิกใน Server Component คืออะไร?

คำตอบ

ข้อดีหลักของ route groups ใน Next.js คืออะไร?

ความแตกต่างระหว่าง useRouter และ usePathname คืออะไร?

หัวข้อสัมภาษณ์ 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 สำหรับการสัมภาษณ์ครั้งถัดไป