บทความนี้บรรยายกระบวนการย้ายโปรเจกต์ตัวอย่าง Next.js SDK ของ Logto ไปยัง Next.js 13 App Router ใหม่ ซึ่งครอบคลุมถึงขั้นตอนการสร้างหน้าและเลย์เอาต์ใหม่ การย้าย API routes และการใช้ server และ client components
ที่ Logto เรามี Next.js SDK ชื่อ @logto/next พร้อมด้วย โปรเจกต์ตัวอย่าง โปรเจกต์นี้แสดงให้เห็นอย่างมีประสิทธิภาพว่าควรจะรวม Logto กับ Next.js อย่างไร โดยใช้ "pages" โฟลเดอร์แบบดั้งเดิม และมีตัวอย่างของ API routes, getServerSideProps, การดึงข้อมูล Client-side และแม้แต่ edge runtime
Next.js 13 ได้นำ App Router ที่เป็นนวัตกรรมใหม่เข้ามา (เดิมเรียกว่า app directory) ซึ่งแนะนำฟีเจอร์และมาตรฐานใหม่ๆ ที่เร็วๆ นี้ได้รับความนิยมในชุมชนนักพัฒนา เมื่อ Logto’s Next.js SDK สนับสนุนฟีเจอร์ใหม่เหล่านี้อย่างเต็มรูปแบบ เราจึงได้รับแรงบันดาลใจในการสร้างโปรเจกต์ตัวอย่างใหม่โดยใช้ App Router นี้
ในโพสต์นี้ เราจะพาคุณไปดูรายละเอียดของการย้ายโปรเจกต์ตัวอย่างเก่าของเราไปยังโปรเจกต์ใหม่โดยใช้ App Router โปรเจกต์สร้างขึ้นจากโปรเจกต์ตัวอย่างเก่าและตามการแนะนำการย้าย อย่างเป็นทางการ กระบวนการประกอบด้วยหลายขั้นตอน: การสร้างหน้าและเลย์เอาต์, การย้าย API routes และการใช้ server และ client components
ในเซ็ตอัพดั้งเดิมของเรา เราใช้ไฟล์ _app.tsx สำหรับเซ็ตอัพ SWR fetcher และไฟล์ index.tsx ทำหน้าที่เป็นหน้าแรก
ด้วย App Router เหล่านี้กลายเป็น layout.tsx และ page.tsx ไฟล์ layout.tsx มีข้อมูลหลัก ส่วน page.tsx สะท้อนถึงฟังก์ชันของไฟล์ index.tsx เก่า
ความยุ่งยากเกิดขึ้นในขั้นตอนแรก: การตั้งค่า "onClick" handler สำหรับปุ่มไม่สำเร็จ ได้รับข้อความผิดพลาดว่า "Event handlers cannot be passed to Client Component props. If you need interactivity, consider converting part of this to a Client Component."
เพื่อแก้ปัญหานี้เราได้แยกส่วนที่มีปัญหาออกเป็น component แยกไฟล์และเติมด้วย use client:
การย้าย API routes นั้นง่ายเท่ากับการย้ายไฟล์เดิมจาก /pages/api ไปยัง /app/api พร้อมปรับบางอย่าง:
index.ts ถูกเปลี่ยนชื่อเป็น route.tsGET หรือชื่อวิธีการอื่นที่เกี่ยวข้องภายในโฟลเดอร์ api เรามีความสามารถในการเพิ่มฟังก์ชัน server-only ซึ่งอนุญาตให้ React Server Components ดึงข้อมูลได้
ในไดเรกทอรี /app/api/logto/user มีไฟล์ get-user.tsx:
ฟังก์ชันนี้สามารถถูกเรียกใน page.tsx:
เมื่อเสร็จสิ้นการย้าย เราพบว่าซอร์โค้ดและโครงสร้างของเรามีความชัดเจนและเป็นระเบียบมากขึ้น แม้ว่าจะดูท้าทายในตอนแรก กระบวนการนี้ก็ไม่ได้ยุ่งยากขนาดนั้น เราหวังว่าประสบการณ์ของเราสามารถเป็นแนวทางที่มีประโยชน์ ช่วยให้คุณสามารถย้ายโปรเจกต์ของคุณไปยัง App Router ได้อย่างมั่นใจ
สำหรับการเปรียบเทียบ นี่คือลิงก์ไปยังโปรเจกต์ของเราทั้งก่อนและหลังการย้าย:
ก่อน: https://github.com/logto-io/js/tree/master/packages/next-sample
หลังจาก: https://github.com/logto-io/js/tree/master/packages/next-app-dir-sample
โดยการดูโปรเจกต์เหล่านี้ คุณสามารถได้ความเข้าใจที่ชัดเจนขึ้นถึงการเปลี่ยนแปลงและประโยชน์ที่เกิดจากการย้ายนี้