เปิดตัว Next.js 13.3

• เพิ่ม File-Based Metadata API
  • แปลง Metadata ที่ export แบบไดนามิกหรือแบบสแตติกจาก page หรือ layout ไปเป็นค่า title, link, meta tag ของ HTML
  • Config-based Metadata จะอ่านไฟล์ตามกฎการตั้งชื่อไฟล์ แล้วเพิ่มเข้าไปเป็นค่า meta ของหน้านั้น
    • เช่น ถ้ามีไฟล์ชื่อ opengraph-image.jpg => จะถูกแปลงและเพิ่มเป็น <meta property=og:image” .. />
  • Metadata API รองรับตั้งแต่ App Router (app) ในเวอร์ชัน 13.3
• Dynamic Open Graph Image Generation: สามารถสร้างภาพแบบไดนามิกได้ด้วย ImageResponse โดยไม่ต้องใช้แพ็กเกจภายนอกเพิ่มเติม หากใช้ opengraph-image.tsx ใน config-based metadata ที่กล่าวถึงก่อนหน้า ก็จะสามารถสร้างค่า Open Graph และภาพ Twitter ที่เหมาะสมได้ในช่วงเวลาที่มีการร้องขอ
• Static Export for App Router: ตอนนี้ App Router รองรับหน้าเว็บแบบสแตติกเต็มรูปแบบแล้ว
  • เพิ่มตัวเลือก output: ‘export’, ในไฟล์ตั้งค่า แล้วรัน next build ระบบจะสร้างหน้า HTML แยกตามแต่ละ route
  • หากเป็นกรณีที่ดึงข้อมูลแบบไดนามิกมา render แม้จะเป็น Server Components ก็จะดึงข้อมูลระหว่างการ build แล้วสร้างเป็น HTML
  • หากไม่ทราบตั้งแต่ build time ว่าต้องดึงข้อมูลใด ให้ใช้ Client Component
• Parallel Routes and Interception: ใน Next.js 13.3 มีการเพิ่มกฎแบบไดนามิกใหม่ ทำให้สามารถทำเทคนิค routing ขั้นสูงได้
  • Parallel Routes: สามารถ render ได้มากกว่าหนึ่งหน้าพร้อมกันบนหน้าจอเดียวกัน (ตามเงื่อนไข) โดยกำหนด slots หลายตัวที่ขึ้นต้นด้วย @ และ render คนละหน้าในแต่ละ slot ได้
  • Intercepting routes: ใช้กฎที่ขึ้นต้นด้วย (..) เพื่อโหลด route ใหม่ภายใน layout ปัจจุบันได้ มีประโยชน์ในการคงข้อมูล context ของหน้าปัจจุบันไว้

[kdy1234]

น่าเสียดายที่รอบนี้แพตช์ของผมแทบไม่ได้ถูกรวมเข้าไปเลย
ผมแก้ปัญหา Wasm แล้ว แต่ยังไม่ได้ถูกรวมเพราะการรีวิวกับงานที่เกี่ยวข้องกับ CI

[chanhee]

นึกว่ารอบนี้จะถูกรวมเข้ามาเลยคาดหวังไว้ แต่ก็น่าเสียดายครับ/ค่ะ ขอบคุณที่ทุ่มเทนะครับ/คะ~