# ฟีเจอร์ขั้นสูงของ Next.js (React / Next.js)

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

- 24 คำถามสัมภาษณ์
- Senior
- [คำถามสัมภาษณ์: React / Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions.md)

## 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

## มีอีก 21 คำถาม

- ความแตกต่างระหว่าง fill และ responsive สำหรับการจัดขนาด next/image คืออะไร?
- วิธีเพิ่มประสิทธิภาพรูปภาพสถิตที่ import ในเครื่องด้วย next/image?

สมัครฟรี: https://sharpskill.dev/th/login

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

- [พื้นฐาน JavaScript](https://sharpskill.dev/th/technologies/react-next/interview-questions/javascript-essentials.md): 25 คำถาม, Junior
- [พื้นฐาน React](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-fundamentals.md): 20 คำถาม, Junior
- [React Hooks](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-hooks.md): 22 คำถาม, Junior
- [วงจรชีวิตของ component](https://sharpskill.dev/th/technologies/react-next/interview-questions/component-lifecycle.md): 18 คำถาม, Junior
- [React Router](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-router.md): 20 คำถาม, Junior
- [การจัดการ state ด้วย Context](https://sharpskill.dev/th/technologies/react-next/interview-questions/state-management-context.md): 18 คำถาม, Junior
- [ฟอร์มและ Controlled Components](https://sharpskill.dev/th/technologies/react-next/interview-questions/forms-controlled-components.md): 20 คำถาม, Mid-Level
- [การดึงข้อมูลและ API](https://sharpskill.dev/th/technologies/react-next/interview-questions/fetching-data-api.md): 20 คำถาม, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-query-tanstack.md): 20 คำถาม, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/th/technologies/react-next/interview-questions/styling-css-in-js.md): 18 คำถาม, Mid-Level
- [พื้นฐาน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-fundamentals.md): 25 คำถาม, Mid-Level
- [TypeScript กับ React](https://sharpskill.dev/th/technologies/react-next/interview-questions/typescript-react.md): 20 คำถาม, Mid-Level
- [การดึงข้อมูล Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-data-fetching.md): 24 คำถาม, Mid-Level
- [Server Actions ของ Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-server-actions.md): 20 คำถาม, Mid-Level
- [การกำหนดเส้นทางและการนำทางใน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-routing-navigation.md): 22 คำถาม, Mid-Level
- [API Routes ใน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-api-routes.md): 20 คำถาม, Mid-Level
- [Metadata & SEO ใน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-metadata-seo.md): 18 คำถาม, Mid-Level
- [Middleware และ Auth ใน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-middleware-auth.md): 22 คำถาม, Mid-Level
- [การทดสอบ React](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-testing.md): 20 คำถาม, Mid-Level
- [Zustand State Management](https://sharpskill.dev/th/technologies/react-next/interview-questions/zustand-state-management.md): 18 คำถาม, Mid-Level
- [การเพิ่มประสิทธิภาพ React](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-performance-optimization.md): 22 คำถาม, Senior
- [Error Boundaries & การจัดการข้อผิดพลาด](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-error-boundaries.md): 18 คำถาม, Senior
- [Advanced React Patterns](https://sharpskill.dev/th/technologies/react-next/interview-questions/advanced-react-patterns.md): 20 คำถาม, Senior
- [การ Deploy & Production ของ Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-deployment-production.md): 20 คำถาม, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-architecture-patterns.md): 22 คำถาม, Senior
- [React Server Components](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-server-components.md): 26 คำถาม, Senior
- [การแปลภาษา Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-internationalization.md): 20 คำถาม, Senior
- [React ความปลอดภัย & แนวปฏิบัติที่ดีที่สุด](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-security-best-practices.md): 22 คำถาม, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-advanced-features