ไทย
  • nextjs
  • sdk
  • app-router

การเดินทางของเราในการย้ายตัวอย่าง Logto SDK ไปยัง Next.js 13 App Router

บทความนี้บรรยายกระบวนการย้ายโปรเจกต์ตัวอย่าง Next.js SDK ของ Logto ไปยัง Next.js 13 App Router ใหม่ ซึ่งครอบคลุมถึงขั้นตอนการสร้างหน้าและเลย์เอาต์ใหม่ การย้าย API routes และการใช้ server และ client components

Sijie
Sijie
Developer

แนะนำ

ที่ 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

ลอง Logto Cloud Preview เพื่อรวมกับ Next.js 13

กระบวนการย้าย

เลย์เอาต์หน้า: โครงสร้างใหม่

ในเซ็ตอัพดั้งเดิมของเรา เราใช้ไฟล์ _app.tsx สำหรับเซ็ตอัพ SWR fetcher และไฟล์ index.tsx ทำหน้าที่เป็นหน้าแรก

ด้วย App Router เหล่านี้กลายเป็น layout.tsx และ page.tsx ไฟล์ layout.tsx มีข้อมูลหลัก ส่วน page.tsx สะท้อนถึงฟังก์ชันของไฟล์ index.tsx เก่า

Client component

ความยุ่งยากเกิดขึ้นในขั้นตอนแรก: การตั้งค่า "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

การย้าย API routes นั้นง่ายเท่ากับการย้ายไฟล์เดิมจาก /pages/api ไปยัง /app/api พร้อมปรับบางอย่าง:

  1. index.ts ถูกเปลี่ยนชื่อเป็น route.ts
  2. ฟังก์ชันที่ส่งออกได้ถูกเปลี่ยนชื่อเป็น GET หรือชื่อวิธีการอื่นที่เกี่ยวข้อง

Server component

ภายในโฟลเดอร์ 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

โดยการดูโปรเจกต์เหล่านี้ คุณสามารถได้ความเข้าใจที่ชัดเจนขึ้นถึงการเปลี่ยนแปลงและประโยชน์ที่เกิดจากการย้ายนี้


ลอง Logto Cloud Preview เพื่อรวมกับ Next.js 13