โครงสร้างไฟล์พื้นฐานของ Next.js

ถ้าพูดถึง Next.js หลายคนอาจจะคิดว่ามันเป็น React Framework ที่ใช้ทำ SSR (Server-side Rendering) หรือ SSG (Static Site Generation) ซึ่งก็ถูกแล้ว! แต่ก่อนจะเริ่มใช้งาน Next.js เราต้องมาทำความเข้าใจกับโครงสร้างไฟล์ของมันก่อน เพราะถ้ารู้ว่ามีไฟล์อะไร อยู่ตรงไหน ใช้ทำอะไร ชีวิตจะง่ายขึ้นเยอะ

โครงสร้างไฟล์หลักใน Next.js  

เมื่อเราสร้างโปรเจกต์ Next.js ใหม่ ๆ ด้วยคำสั่ง  

npx create-next-app@latest my-app

หรือ

yarn create next-app my-app
 

เราจะได้โฟลเดอร์ที่มีโครงสร้างพื้นฐานหน้าตาประมาณนี้ 

my-app/
│-- .next/
│-- node_modules/
│-- public/
│-- src/ (บางโปรเจกต์อาจไม่มี)
│-- pages/
│-- components/
│-- styles/
│-- package.json
│-- next.config.js
│-- .gitignore
│-- README.md

1. โฟลเดอร์ .next/

อันนี้เป็นโฟลเดอร์ที่ Next.js ใช้เก็บไฟล์ที่คอมไพล์แล้ว ไม่ต้องไปยุ่งกับมัน เราแค่รู้ว่ามันเป็นไฟล์ที่ Next.js ใช้ตอนรันโปรเจกต์พอ

 

2. โฟลเดอร์ node_modules/

อันนี้คือที่อยู่ของ dependency ต่าง ๆ ที่ถูกติดตั้งผ่าน npm หรือ yarn อย่าไปแก้ไขอะไรในนี้ เพราะมันสร้างขึ้นโดยอัตโนมัติ 

3. โฟลเดอร์ public/

โฟลเดอร์นี้เอาไว้เก็บไฟล์ static เช่น รูปภาพ ไอคอน หรือไฟล์อื่น ๆ ที่ต้องการเข้าถึงโดยตรงผ่าน URL เช่น ถ้ามีไฟล์ logo.png อยู่ใน public/ เราจะเข้าถึงมันได้ที่

http://localhost:3000/logo.png 

ไม่ต้อง import รูปจาก public ในโค้ด แค่ใช้ path ตรง ๆ ได้เลย

 

4. โฟลเดอร์ pages/

นี่คือหัวใจของ Next.js ทุกไฟล์ในโฟลเดอร์นี้จะกลายเป็นหน้าเว็บอัตโนมัติ เช่น 

pages/
│-- index.js  (แสดงที่ /)
│-- about.js  (แสดงที่ /about)
│-- contact.js (แสดงที่ /contact)
│-- blog/
│   ├── index.js   (แสดงที่ /blog)
│   ├── [id].js    (Dynamic Route เช่น /blog/1, /blog/2)
│   ├── new.js     (แสดงที่ /blog/new)

• Static Route → about.js จะกลายเป็น /about
• Dynamic Route → [id].js จะกลายเป็น /blog/:id
• Nested Route → ใช้โฟลเดอร์ย่อย เช่น /blog/new มาจาก pages/blog/new.js

ถ้าใน pages/ มี \_app.js และ \_document.js

• _app.js → ใช้กำหนด Layout หลักของเว็บ
• _document.js → ใช้แก้ไขโครงสร้าง HTML พื้นฐานของ Next.js

 

5. โฟลเดอร์ components/

Next.js ไม่มีบังคับให้ต้องมีโฟลเดอร์นี้ แต่ส่วนใหญ่เราจะสร้างขึ้นมาเพื่อแยก UI ออกเป็น Component เช่น

• Navbar.js
• Footer.js
• Button.js

จากนั้นก็ import ไปใช้ใน pages/ ได้เลย 

 

6. โฟลเดอร์ styles/

เป็นที่เก็บไฟล์ CSS หรือ SCSS เช่น

• globals.css → ใช้กำหนดสไตล์ทั่วทั้งเว็บ
• Home.module.css → เป็น CSS Module ใช้เฉพาะ Component นั้น ๆ

Next.js รองรับ CSS หลายรูปแบบ เช่น

• CSS ปกติ
• SCSS/SASS
• Tailwind CSS (ต้องติดตั้งเพิ่ม)
• CSS-in-JS (เช่น styled-components)

 

7. ไฟล์ package.json

ไฟล์นี้สำคัญมาก! มันบอกว่าโปรเจกต์นี้ใช้ package อะไรบ้าง รวมถึงสคริปต์ที่ใช้รันคำสั่ง เช่น 

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

• next dev → รันโหมดพัฒนา
• next build → สร้างไฟล์สำหรับ production
• next start → รันเซิร์ฟเวอร์ production

 

8. ไฟล์ next.config.js

ไฟล์นี้ใช้ตั้งค่าต่าง ๆ ของ Next.js เช่น

• ปรับแต่ง Webpack
• ตั้งค่า Redirect
• กำหนด Environment Variables

ตัวอย่าง 

module.exports = {
  images: {
    domains: ['example.com'],
  },
  reactStrictMode: true,
}

9. ไฟล์ .gitignore

ใช้กำหนดว่าไฟล์ไหนบ้างที่ไม่ต้องการให้ Git ติดตาม เช่น

node_modules/
.next/
.env 

 

10. ไฟล์ README.md

ไฟล์นี้ใช้สำหรับให้ข้อมูลเกี่ยวกับโปรเจกต์ เช่น วิธีติดตั้ง วิธีใช้งาน ฯลฯ 

Next.js เป็น Framework ที่จัดโครงสร้างไฟล์ให้เป็นระบบระเบียบ ถ้าเราเข้าใจว่าแต่ละโฟลเดอร์และไฟล์ทำหน้าที่อะไร เราจะพัฒนาเว็บได้เร็วขึ้น และเขียนโค้ดได้สะอาดขึ้น