วิธีติดตั้ง Next.js (React Framework) ง่ายๆ

บทความนี้สอนวิธีติดตั้ง Next.js ซึ่งเป็น React Framework สำหรับพัฒนาเว็บไซต์แบบโอเพ่นซอร์ส การติดตั้ง Next.js จำเป็นต้องมีการติดตั้ง Node.js 18.17 หรือเวอร์ชันใหม่กว่านั้น โดยสอนด้วยวิธีการ และขั้นตอนง่ายๆ มีรายละเอียดดังนี้

 

ตัวอย่าง วิธีติดตั้ง Next.js (React Framework)

1. ในเครื่องที่จะติดตั้ง Next.js ต้องติดตั้งโปรแกรม Node.js รุ่น 18.17 หรือใหม่กว่านั้น วิธีการเช็ตใช้คำสั่ง node --version ใน terminal (เช่น command line)

C:\Users\admin>node --version
v18.18.0

หากยังไม่ได้ติดตั้งโปรแกรม Node.js ให้ดำเนินการติดตั้งให้เรียบร้อย เพื่อติดตั้ง Next.js ในขั้นตอนต่อไป

 

2. ใน terminal ใช้คำสั่ง npx create-next-app@latest เพื่อติดตั้ง Next.js รุ่นล่าสุด

npx create-next-app@latest

หลังจากใช้คำสั่งจะมี prompt ขึ้นมาให้กรอก/เลือก (และกด enter) โดยมีรายละเอียดดังนี้

2.1 What is your project named? คือให้ใส่ชื่อ project ของ Next.js ที่ต้องการ (ชื่อ project เว็บไซต์ที่เราจะสร้าง)

2.2 Would you like to use TypeScript? » No / Yes คือต้องการใช้ TypeScript ไหม ใช้ = Yes, ไม่ใช้ = No

2.3 Would you like to use ESLint? » No / Yes คือต้องการใช้ ESLint ไหม เป็นเครื่องมือตรวจสอบ และแก้ไขปัญหาโค้ด JavaScript

2.4 Would you like to use Tailwind CSS? » No / Yes คือต้องการใช้ Tailwind ไหม เป็น utility สำหรับ CSS

2.5 Would you like to use `src/` directory? » No / Yes คือต้องการสร้าง folder ชื่อ src ไหม

2.6 Would you like to use App Router? (recommended) » No / Yes คือต้องการใช้ระบบเส้นทางของ Next.js (Router) ไหม

2.7 Would you like to customize the default import alias (@/*)? » No / Yes คือการปรับแต่ง import alias ไหม ถ้าตอบ No จะใช้ Default ของ Next.js

 

3. รอติดตั้งสักครู่ หากสำเร็จจะขึ้นหน้าจอประมาณดังนี้

Success! Created example-next-js at D:\example-next-js

 

4. เข้าไปใน folder project ของ Next.js ที่สร้างขึ้น และรัน project ด้วยคำสั่ง npm run dev

npm run dev

> example-next-js@0.1.0 dev
> next dev

   ▲ Next.js 14.1.0
   - Local:        http://localhost:3000

 ✓ Ready in 2.7s

กรณีสำเร็จจะขึ้น URL สำหรับเข้าใช้งานคือ http://localhost:3000

 

5. เปิดโปรแกรมเล่นอินเทอร์เน็ต และเข้าด้วย URL http://localhost:3000 จะขึ้นหน้าแรกของ Next.js เป็นอันเสร็จสิ้นการติดตั้ง

 

สรุป ในบทความนี้เราได้เรียนรู้วิธีการติดตั้ง และรัน Next.js ซึ่งเป็น React Framework ที่ได้รับความนิยมสำหรับพัฒนาเว็บไซต์อย่างมากในปัจจุบัน โดยการติดตั้ง Next.js นั้นจำเป็นต้องติดตั้ง Node.js ก่อน จึงจะสามารถติดตั้งได้