Next.js project structure

---

เมื่อคุณสร้างโปรเจค Next.js ใหม่ที่ใช้ App Router และไฟล์ .tsx คุณจะได้โครงสร้างไฟล์และโฟลเดอร์ดังต่อไปนี้:

ชื่อโปรเจคของคุณ/
├── app/
│   ├── api/
│   │   └── hello.ts
│   ├── blog/
│   │   ├── [slug]/
│   │   │   └── page.tsx
│   │   └── page.tsx
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── public/
│   ├── favicon.ico
│   └── vercel.svg
├── node_modules/
├── .gitignore
├── package.json
├── README.md
├── next.config.js
└── tsconfig.json

ต่อไปนี้เป็นคำอธิบายสำหรับไฟล์และโฟลเดอร์ที่สำคัญ:

• app/: โฟลเดอร์หลักสำหรับ App Router ซึ่งประกอบด้วยไฟล์และโฟลเดอร์ที่เกี่ยวข้องกับการจัดโครงสร้างและการกำหนด routes ของแอปพลิเคชัน

  • app/api/: โฟลเดอร์ย่อยนี้ใช้สำหรับสร้าง API routes โดยแต่ละไฟล์จะถูกแปลงเป็น route โดยอัตโนมัติ

  • app/blog/: โฟลเดอร์ย่อยนี้ใช้สำหรับสร้างหน้าบล็อกและโพสต์

    • app/blog/[slug]/page.tsx: ไฟล์นี้ใช้สำหรับสร้างหน้ารายละเอียดของแต่ละโพสต์ในบล็อก โดยใช้ไดนามิก route parameter [slug]

    • app/blog/page.tsx: ไฟล์นี้ใช้สำหรับสร้างหน้ารายการบล็อกโพสต์

  • app/globals.css: ไฟล์นี้ใช้สำหรับกำหนดสไตล์ CSS ระดับโกลบอลของแอปพลิเคชัน

  • app/layout.tsx: ไฟล์นี้ใช้สำหรับกำหนดเลย์เอาต์หลักของแอปพลิเคชัน เช่น ส่วนหัว ส่วนท้าย และการจัดวางองค์ประกอบที่ใช้ร่วมกันในทุกหน้า

  • app/page.tsx: ไฟล์นี้เป็นหน้าหลักของแอปพลิเคชัน ซึ่งจะถูกเรนเดอร์เมื่อผู้ใช้เข้าถึง root URL ของเว็บไซต์

พิจารณาโครงสร้างไฟล์และโฟลเดอร์ข้างต้น เมื่อคุณรัน development server ของ Next.js โดยใช้คำสั่ง npm run dev หรือ yarn dev และเปิดเว็บเบราว์เซอร์ไปที่ http://localhost:3000 คุณจะเห็น routes ต่างๆ ของแอปพลิเคชัน ดังนี้:

• http://localhost:3000: หน้าหลักของแอปพลิเคชัน ซึ่งเรนเดอร์มาจากไฟล์ app/page.tsx

• http://localhost:3000/blog: หน้ารายการบล็อกโพสต์ ซึ่งเรนเดอร์มาจากไฟล์ app/blog/page.tsx

• http://localhost:3000/blog/first-post: หน้ารายละเอียดของบล็อกโพสต์ที่มี slug เป็น "first-post" ซึ่งเรนเดอร์มาจากไฟล์ app/blog/[slug]/page.tsx

• http://localhost:3000/api/hello: API endpoint ที่เรนเดอร์มาจากไฟล์ app/api/hello.ts

ด้วยโครงสร้างนี้ คุณสามารถสร้าง routes ใหม่ได้อย่างง่ายดายโดยการเพิ่มไฟล์และโฟลเดอร์ภายใต้โฟลเดอร์ app/ Next.js จะจัดการแมป routes ให้โดยอัตโนมัติตามโครงสร้างไฟล์และโฟลเดอร์ที่คุณกำหนด ทำให้การพัฒนาแอปพลิเคชันเป็นไปได้อย่างรวดเร็วและมีประสิทธิภาพ

นอกจากนี้ การใช้ TypeScript (ไฟล์ .tsx และ .ts) ยังช่วยเพิ่มความน่าเชื่อถือและความสะดวกในการพัฒนา โดยการตรวจสอบชนิดข้อมูลและให้การเสนอแนะโค้ดที่ชาญฉลาดขึ้น

การทำความเข้าใจโครงสร้างโปรเจค Next.js ที่ใช้ App Router และ TypeScript จะช่วยให้คุณสามารถจัดระเบียบและพัฒนาแอปพลิเคชันได้อย่างมีประสิทธิภาพ โดยใช้ประโยชน์จากคุณสมบัติและข้อกำหนดต่างๆ ของ Next.js และ TypeScript