ถ้าพูดถึง 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 ที่จัดโครงสร้างไฟล์ให้เป็นระบบระเบียบ ถ้าเราเข้าใจว่าแต่ละโฟลเดอร์และไฟล์ทำหน้าที่อะไร เราจะพัฒนาเว็บได้เร็วขึ้น และเขียนโค้ดได้สะอาดขึ้น
ไม่มีความคิดเห็น:
แสดงความคิดเห็น