Question 1

Vercel Platform คืออะไรในบริบทของการ deploy Next.js?

Accepted Answer

Vercel Platform คือแพลตฟอร์ม cloud-native ที่ออกแบบมาเฉพาะสำหรับ Next.js โดยนำเสนอการ deploy แบบ zero-config พร้อมการตรวจจับ framework อัตโนมัติ แพลตฟอร์มนี้ปรับแต่ง build โดยอัตโนมัติ กำหนดค่า Edge Network ทั่วโลก และเปิดใช้งานการแคชอัจฉริยะโดยไม่ต้องตั้งค่าเอง ต่างจากโซลูชันทั่วไปอย่าง AWS หรือ Azure ตรง Vercel ถูกปรับแต่งให้เหมาะกับฟีเจอร์ Next.js เช่น ISR, Middleware และ Server Components เพื่อประสิทธิภาพสูงสุด

Question 2

จะเปิดเผย environment variable ให้ browser ใน Next.js ได้อย่างไร?

Accepted Answer

ตัวแปรที่มีคำนำหน้า NEXT_PUBLIC_ จะถูกเปิดเผยให้ client โดยอัตโนมัติและรวมอยู่ใน JavaScript bundle ระหว่างการ build ตัวแปรที่ไม่มีคำนำหน้านี้จะอยู่ที่ฝั่ง server เท่านั้นและไม่ถูกส่งไปยังเบราว์เซอร์ เพื่อรักษาความปลอดภัยของ secret ความแตกต่างนี้ช่วยให้จัดการ API key สาธารณะอย่าง NEXT_PUBLIC_STRIPE_KEY ได้ในขณะที่ปกป้อง secret สำคัญอย่างคีย์ส่วนตัวของ Stripe

Question 3

คำสั่งใดใช้สร้าง production build ของ Next.js?

Accepted Answer

คำสั่ง next build สร้างเวอร์ชัน production ที่ปรับแต่งแล้วของแอปพลิเคชัน รวมถึงการบีบอัดโค้ด การปรับแต่งรูปภาพ การสร้างหน้าแบบสแตติก และการ bundle assets ขั้นตอนนี้จำเป็นต้องทำก่อน deploy เนื่องจากสร้างโฟลเดอร์ .next ที่มีไฟล์ที่ปรับแต่งแล้วทั้งหมด คำสั่ง next start จะเปิดตัว server production โดยใช้ build ที่ปรับแต่งนี้

การ Deploy & Production ของ Next.js

Vercel Platform คืออะไรในบริบทของการ deploy Next.js?

คำตอบ

จะเปิดเผย environment variable ให้ browser ใน Next.js ได้อย่างไร?

คำตอบ

คำสั่งใดใช้สร้าง production build ของ Next.js?

คำตอบ

ควรใช้ Docker image ใดเป็นฐานสำหรับการสร้าง container ของ Next.js?

จะกำหนดค่า environment variables ใน Vercel ได้ที่ไหน?

หัวข้อสัมภาษณ์ 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

Architecture & Design Patterns

React Server Components

การแปลภาษา Next.js

React ความปลอดภัย & แนวปฏิบัติที่ดีที่สุด

เชี่ยวชาญ React / Next.js สำหรับการสัมภาษณ์ครั้งถัดไป