การ Deploy & Production ของ Next.js
การ deploy บน Vercel, Docker, environment variables, กลยุทธ์การแคช, การติดตาม, logging
1Vercel Platform คืออะไรในบริบทของการ deploy Next.js?
Vercel Platform คืออะไรในบริบทของการ deploy Next.js?
คำตอบ
Vercel Platform คือแพลตฟอร์ม cloud-native ที่ออกแบบมาเฉพาะสำหรับ Next.js โดยนำเสนอการ deploy แบบ zero-config พร้อมการตรวจจับ framework อัตโนมัติ แพลตฟอร์มนี้ปรับแต่ง build โดยอัตโนมัติ กำหนดค่า Edge Network ทั่วโลก และเปิดใช้งานการแคชอัจฉริยะโดยไม่ต้องตั้งค่าเอง ต่างจากโซลูชันทั่วไปอย่าง AWS หรือ Azure ตรง Vercel ถูกปรับแต่งให้เหมาะกับฟีเจอร์ Next.js เช่น ISR, Middleware และ Server Components เพื่อประสิทธิภาพสูงสุด
2จะเปิดเผย environment variable ให้ browser ใน Next.js ได้อย่างไร?
จะเปิดเผย environment variable ให้ browser ใน Next.js ได้อย่างไร?
คำตอบ
ตัวแปรที่มีคำนำหน้า NEXT_PUBLIC_ จะถูกเปิดเผยให้ client โดยอัตโนมัติและรวมอยู่ใน JavaScript bundle ระหว่างการ build ตัวแปรที่ไม่มีคำนำหน้านี้จะอยู่ที่ฝั่ง server เท่านั้นและไม่ถูกส่งไปยังเบราว์เซอร์ เพื่อรักษาความปลอดภัยของ secret ความแตกต่างนี้ช่วยให้จัดการ API key สาธารณะอย่าง NEXT_PUBLIC_STRIPE_KEY ได้ในขณะที่ปกป้อง secret สำคัญอย่างคีย์ส่วนตัวของ Stripe
3คำสั่งใดใช้สร้าง production build ของ Next.js?
คำสั่งใดใช้สร้าง production build ของ Next.js?
คำตอบ
คำสั่ง next build สร้างเวอร์ชัน production ที่ปรับแต่งแล้วของแอปพลิเคชัน รวมถึงการบีบอัดโค้ด การปรับแต่งรูปภาพ การสร้างหน้าแบบสแตติก และการ bundle assets ขั้นตอนนี้จำเป็นต้องทำก่อน deploy เนื่องจากสร้างโฟลเดอร์ .next ที่มีไฟล์ที่ปรับแต่งแล้วทั้งหมด คำสั่ง next start จะเปิดตัว server production โดยใช้ build ที่ปรับแต่งนี้
ควรใช้ Docker image ใดเป็นฐานสำหรับการสร้าง container ของ Next.js?
จะกำหนดค่า environment variables ใน Vercel ได้ที่ไหน?
+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
Architecture & Design Patterns
React Server Components
การแปลภาษา Next.js
React ความปลอดภัย & แนวปฏิบัติที่ดีที่สุด
เชี่ยวชาญ React / Next.js สำหรับการสัมภาษณ์ครั้งถัดไป
เข้าถึงคำถามทั้งหมด flashcards แบบทดสอบเทคนิค แบบฝึกหัด code review และตัวจำลองสัมภาษณ์
เริ่มใช้ฟรี