React / Next.js

ฟีเจอร์ขั้นสูงของ Next.js

การเพิ่มประสิทธิภาพรูปภาพ, การเพิ่มประสิทธิภาพฟอนต์, การเพิ่มประสิทธิภาพสคริปต์, analytics, edge runtime, คุณสมบัติทดลอง

24 คำถามสัมภาษณ์·
Senior
1

ข้อดีหลักของการใช้ next/image เมื่อเทียบกับแท็ก img มาตรฐานคืออะไร?

คำตอบ

next/image เพิ่มประสิทธิภาพรูปภาพโดยอัตโนมัติด้วยการสร้างหลายขนาดและรูปแบบสมัยใหม่ (WebP, AVIF) ใช้ lazy loading โดยค่าเริ่มต้น และปรับปรุง Web Vitals โดยป้องกัน Cumulative Layout Shift ผ่านการคำนวณขนาดอัตโนมัติ ต่างจากแท็ก img มาตรฐานที่โหลดรูปภาพต้นฉบับ next/image จะแสดงขนาดที่เหมาะสมตาม viewport และอัตราส่วนพิกเซลของอุปกรณ์ วิธีนี้ช่วยลดเวลาโหลดและการใช้แบนด์วิดท์อย่างมาก

2

เมื่อใดควรใช้คุณสมบัติ priority บน component next/image?

คำตอบ

คุณสมบัติ priority จะปิดการใช้งาน lazy loading และโหลดรูปภาพล่วงหน้าทันที ซึ่งสำคัญมากสำหรับรูปภาพ above-the-fold ที่ส่งผลต่อ Largest Contentful Paint (LCP) หากไม่มี priority รูปภาพสำคัญเหล่านี้จะถูก lazy load ทำให้ LCP ล่าช้าและ Core Web Vitals ลดลง ใช้ priority เฉพาะกับรูปภาพ 1-2 รูปที่มองเห็นได้เมื่อโหลดหน้าครั้งแรก โดยทั่วไปคือ hero images หรือ banner หลัก

3

การกำหนดค่า next/image ใดที่อนุญาตให้แสดงรูปภาพจากโดเมนภายนอก?

คำตอบ

คุณสมบัติ remotePatterns ใน next.config.js ช่วยให้กำหนดโดเมนภายนอกที่ได้รับอนุญาตสำหรับการแสดงรูปภาพได้ โดยมีการควบคุมแบบละเอียดสำหรับ protocol, hostname, port และ pathname วิธีนี้แทนที่คุณสมบัติ domains ที่เลิกใช้แล้วและมอบความปลอดภัยที่เพิ่มขึ้นด้วยการจำกัดแหล่งที่ได้รับอนุญาตอย่างแม่นยำ การกำหนดค่า remotePatterns ช่วยป้องกันข้อผิดพลาด 400 เมื่อโหลดรูปภาพที่โฮสต์บน CDN หรือบริการของบุคคลที่สาม เช่น Cloudinary หรือ AWS S3

4

ความแตกต่างระหว่าง fill และ responsive สำหรับการจัดขนาด next/image คืออะไร?

5

วิธีเพิ่มประสิทธิภาพรูปภาพสถิตที่ import ในเครื่องด้วย next/image?

+21 คำถามสัมภาษณ์

หัวข้อสัมภาษณ์ React / Next.js อื่นๆ

พื้นฐาน JavaScript

Junior
25 คำถาม

พื้นฐาน React

Junior
20 คำถาม

React Hooks

Junior
22 คำถาม

วงจรชีวิตของ component

Junior
18 คำถาม

React Router

Junior
20 คำถาม

การจัดการ state ด้วย Context

Junior
18 คำถาม

ฟอร์มและ Controlled Components

Mid-Level
20 คำถาม

การดึงข้อมูลและ API

Mid-Level
20 คำถาม

React Query (TanStack Query)

Mid-Level
20 คำถาม

Styling & CSS-in-JS

Mid-Level
18 คำถาม

พื้นฐาน Next.js

Mid-Level
25 คำถาม

TypeScript กับ React

Mid-Level
20 คำถาม

การดึงข้อมูล Next.js

Mid-Level
24 คำถาม

Server Actions ของ Next.js

Mid-Level
20 คำถาม

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

Mid-Level
22 คำถาม

API Routes ใน Next.js

Mid-Level
20 คำถาม

Metadata & SEO ใน Next.js

Mid-Level
18 คำถาม

Middleware และ Auth ใน Next.js

Mid-Level
22 คำถาม

การทดสอบ React

Mid-Level
20 คำถาม

Zustand State Management

Mid-Level
18 คำถาม

การเพิ่มประสิทธิภาพ React

Senior
22 คำถาม

Error Boundaries & การจัดการข้อผิดพลาด

Senior
18 คำถาม

Advanced React Patterns

Senior
20 คำถาม

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

Senior
20 คำถาม

Architecture & Design Patterns

Senior
22 คำถาม

React Server Components

Senior
26 คำถาม

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

Senior
20 คำถาม

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

Senior
22 คำถาม

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

เข้าถึงคำถามทั้งหมด flashcards แบบทดสอบเทคนิค แบบฝึกหัด code review และตัวจำลองสัมภาษณ์

เริ่มใช้ฟรี