Axon Template Gallery

เจ้าของผลงานเล่าไว้แบบนี้

https://microtronic-gallery.vercel.app/ # แกลเลอรีเทมเพลต Axon เว็บไซต์ Next.js App Router สำหรับเรียกดูตัวอย่างเทมเพลต ดูรายละเอียดของแต่ละเทมเพลต และตรวจสอบราคา ## เทคโนโลยีและข้อกำหนด ให้ยึดไฟล์ package manifest และ lockfile เป็นแหล่งข้อมูลอ้างอิงสำหรับเวอร์ชันที่ติดตั้งและเวอร์ชันที่ resolve แล้ว ใช้ `pnpm` จัดการ dependencies ปัจจุบันแอปใช้ Next.js 16, React 19, TypeScript และ Tailwind CSS 4 โปรดตรวจสอบ `package.json` ก่อนเปลี่ยนเวอร์ชัน โดยให้ `next` และ `eslint-config-next` ใช้เวอร์ชันที่สอดคล้องกัน และตรวจสอบการอัปเกรด major ด้วยคำสั่งด้านล่าง ปัจจุบันแอปไม่มีระบบยืนยันตัวตน ฐานข้อมูล หรือเนื้อหาที่ดึงจาก API ข้อมูลเทมเพลตและไฟล์รูปภาพจัดเก็บอยู่ภายใน repository ## เส้นทางและการแสดงผล - `/` แสดงแกลเลอรี พร้อมตัวควบคุมการค้นหาและการแบ่งหน้า - `/pricing` แสดงแพ็กเกจราคาและลิงก์ติดต่อ - `/template/[slug]` แสดงหน้ารายละเอียดเทมเพลต โดย `generateStaticParams()` ใช้รายการเทมเพลตที่รวมแล้วเพื่อ pre-render หน้ารายละเอียด `app/page.tsx` รวมถึงหน้ารายละเอียดและหน้าราคาเป็น Server Components ส่วน `app/TemplateGallery.tsx` เป็น Client Component เนื่องจากการค้นหาและการแบ่งหน้าใช้ local state ## การทำงานของข้อมูลเทมเพลตและรูปภาพ `data/templates.json` เป็นแหล่งข้อมูลรายการเทมเพลตเพียงแห่งเดียว โดย `data/templates.ts` จัดรูปแบบ metadata ที่กำหนดไว้เท่านั้น ไฟล์รูปใน `public/` จะไม่เพิ่มรายการเข้าแกลเลอรีโดยอัตโนมัติ เพิ่มเทมเพลตแต่ละรายการพร้อม path รูปภาพ ชื่อที่ใช้แสดง URL ตัวอย่าง และ metadata ที่ตรวจสอบแล้วใน `data/templates.json` โดยรูปภาพที่อ้างอิงต้องมีอยู่ใน `public/` ด้วย Badge ของ framework ภาษาโปรแกรม

โดย Ex2-Axon · ดูโพสต์ต้นทาง