Metadata & SEO ใน Next.js
Metadata API, OpenGraph, Twitter cards, sitemap, robots.txt, JSON-LD schema
1วิธีที่แนะนำในการกำหนด metadata ใน Next.js App Router คืออะไร?
วิธีที่แนะนำในการกำหนด metadata ใน Next.js App Router คืออะไร?
คำตอบ
Next.js App Router แนะนำอ็อบเจกต์ `metadata` ที่ export จาก layouts และ pages เพื่อกำหนด metadata อย่าง type-safe และเพิ่มประสิทธิภาพ วิธีนี้แทนที่คอมโพเนนต์ `<Head>` จาก Next.js 12 และเปิดใช้งานการ render metadata ฝั่งเซิร์ฟเวอร์ การ export `metadata` เป็นแบบ static และถูกวิเคราะห์ใน build time เพื่อประสิทธิภาพ SEO ที่ดีขึ้น
2วิธีสร้าง metadata แบบไดนามิกตามพารามิเตอร์ route ใน Next.js ทำอย่างไร?
วิธีสร้าง metadata แบบไดนามิกตามพารามิเตอร์ route ใน Next.js ทำอย่างไร?
คำตอบ
ฟังก์ชัน `generateMetadata` เป็นแบบ async และรับ `params` กับ `searchParams` เป็นอาร์กิวเมนต์ ทำให้สามารถโหลดข้อมูลเพื่อสร้าง metadata แบบไดนามิกได้ ฟังก์ชันนี้ทำงานฝั่งเซิร์ฟเวอร์ในเวลา render และสามารถเรียก API ได้ สิ่งนี้ช่วยให้สร้าง metadata เฉพาะสำหรับแต่ละหน้าแบบไดนามิก ซึ่งจำเป็นสำหรับ SEO ของหน้ารายละเอียด
3Next.js จัดการการรวม metadata ระหว่าง layouts ซ้อนกันและ pages อย่างไร?
Next.js จัดการการรวม metadata ระหว่าง layouts ซ้อนกันและ pages อย่างไร?
คำตอบ
Next.js รวม metadata จาก layouts แม่ไปยัง pages ลูกโดยอัตโนมัติ โดยให้ความสำคัญกับค่าที่ใกล้เคียงกับ page มากที่สุด ฟิลด์จะถูกเขียนทับ (title, description) ยกเว้น `openGraph.images` และ `twitter.images` ที่จะถูกรวมเป็น array กลไก cascade นี้ช่วยให้กำหนด metadata เริ่มต้นที่ระดับ root และเขียนทับที่ระดับ page ได้
ประโยชน์ของการใช้ `title.template` ใน metadata ของ Next.js คืออะไร?
วิธีที่แนะนำในการกำหนด favicon ใน Next.js App Router คืออะไร?
+15 คำถามสัมภาษณ์
หัวข้อสัมภาษณ์ 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
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 สำหรับการสัมภาษณ์ครั้งถัดไป
เข้าถึงคำถามทั้งหมด flashcards แบบทดสอบเทคนิค แบบฝึกหัด code review และตัวจำลองสัมภาษณ์
เริ่มใช้ฟรี