การติดตั้ง Next.js สามารถทำได้สองวิธี:
- ใช้ create-next-app: วิธีนี้ง่ายที่สุด เพียงเปิดเทอร์มินัลหรือคอนโซลและเรียกใช้คำสั่งต่อไปนี้:
1 | npx create-next-app |
คำสั่งนี้จะสร้างโปรเจ็กต์ Next.js ใหม่ในโฟลเดอร์ปัจจุบัน
- ติดตั้ง Next.js ด้วยตนเอง: วิธีนี้เหมาะสำหรับหากคุณต้องการควบคุมการกำหนดค่าของโปรเจ็กต์ Next.js ของคุณเอง ขั้นแรก ติดตั้ง Next.js ด้วยคำสั่งต่อไปนี้:
1 | npm install next |
จากนั้น คุณสามารถสร้างโปรเจ็กต์ Next.js ใหม่ด้วยคำสั่งต่อไปนี้:
1 | npx create-next-app my-app |
คำสั่งนี้จะสร้างโปรเจ็กต์ Next.js ใหม่ในโฟลเดอร์ชื่อ my-app
ไม่ว่าคุณจะเลือกวิธีใด คุณจะพบกับไฟล์ต่อไปนี้ในโปรเจ็กต์ Next.js ของคุณ:
- package.json: ไฟล์นี้ระบุแพ็คเกจที่ติดตั้งในโปรเจ็กต์ของคุณ
- next.config.js: ไฟล์นี้กำหนดการกำหนดค่าของโปรเจ็กต์ Next.js ของคุณ
- pages/index.js: ไฟล์นี้แสดงหน้าแรกของโปรเจ็กต์ของคุณ
- public/index.html: ไฟล์นี้แสดงหน้าแรกเมื่อคุณเรียกใช้โปรเจ็กต์ของคุณด้วยวิธีแบบสแตนด์อโลน
เมื่อคุณติดตั้ง Next.js แล้ว คุณสามารถเรียกใช้โปรเจ็กต์ของคุณด้วยคำสั่งต่อไปนี้:
1 | npm run dev |
คำสั่งนี้จะเปิดเบราว์เซอร์ของคุณไปที่ http://localhost:3000 ซึ่งคุณจะพบหน้าแรกของโปรเจ็กต์ Next.js ของคุณ