ค้นหาเว็บไซต์

วิธีการตั้งค่าโครงการ Next.js ใน Ubuntu

Next.js เป็นเฟรมเวิร์กที่รู้จักกันดีสำหรับ React ที่ช่วยให้คุณสร้างเว็บไซต์ที่รวดเร็วและทันสมัย ซึ่งใช้งานง่ายและมีคุณสมบัติที่ทรงพลัง เช่น การเรนเดอร์ฝั่งเซิร์ฟเวอร์ การสร้าง หน้าคงที่และการสร้าง API

หากคุณต้องการเริ่มโครงการ Next.js บนระบบที่ใช้ Ubuntu คู่มือนี้จะแนะนำคุณตลอดกระบวนการทีละขั้นตอน

ข้อกำหนดเบื้องต้น

ก่อนที่คุณจะเริ่มตั้งค่าโครงการ Next.js มีบางสิ่งที่คุณจะต้องติดตั้งบนระบบ Linux ของคุณ ซึ่งรวมถึง:

  • Node.js: Next.js สร้างขึ้นจาก Node.js ดังนั้นคุณจึงจำเป็นต้องมี Node.js แข็งแกร่ง> ติดตั้งแล้ว
  • npm: npm (Node Package Manager) ใช้เพื่อจัดการแพ็คเกจและการขึ้นต่อกันสำหรับโปรเจ็กต์ของคุณ

มาดูขั้นตอนการติดตั้งทั้ง Node.js และ npm กัน

ขั้นตอนที่ 1 1: ติดตั้ง Node.js และ NPM ใน Linux

ก่อนที่จะติดตั้งซอฟต์แวร์ใหม่ใดๆ เป็นความคิดที่ดีที่จะอัปเดตรายการแพ็คเกจของคุณเพื่อให้แน่ใจว่าคุณกำลังติดตั้งซอฟต์แวร์เวอร์ชันล่าสุดที่มีอยู่ในที่เก็บข้อมูล

sudo apt update

ถัดไป คุณสามารถติดตั้ง Node.js (ติดตั้ง npm ด้วย) ซึ่งดีที่สุดในการติดตั้งเวอร์ชันของ Node.js ที่ทำเครื่องหมายว่า LTS (การสนับสนุนระยะยาว) เนื่องจากเป็นเวอร์ชันที่เสถียรและใช้กันอย่างแพร่หลายที่สุด

sudo apt install nodejs

หลังจากการติดตั้งเสร็จสมบูรณ์ ให้ตรวจสอบว่าติดตั้ง Node.js อย่างถูกต้องโดยตรวจสอบเวอร์ชัน:

node -v
npm -v

ตอนนี้คุณติดตั้งทั้ง Node.js และ npm บนระบบของคุณแล้ว

ขั้นตอนที่ 2: ติดตั้งและตั้งค่าโครงการ Next.js

เมื่อคุณติดตั้ง Node.js และ npm แล้ว ก็ถึงเวลาสร้างโปรเจ็กต์ Next.js ใหม่ วิธีที่ง่ายที่สุดในการติดตั้ง Next.js คือการใช้ create-next-app ซึ่งเป็นแพ็คเกจอย่างเป็นทางการที่จัดทำโดยทีมงาน Next.js .

sudo npm install -g create-next-app

เมื่อติดตั้ง create-next-app แล้ว คุณสามารถสร้างโครงการ Next.js ใหม่ได้

npx create-next-app@latest my-next-app

ที่นี่ my-next-app คือชื่อโฟลเดอร์โปรเจ็กต์ของคุณ คุณสามารถแทนที่ด้วยชื่อใดก็ได้ที่คุณต้องการ คำสั่ง npx จะดาวน์โหลดและเรียกใช้แพ็คเกจ create-next-app และจะตั้งค่าโปรเจ็กต์ Next.js ใหม่ให้กับคุณ

เมื่อคำสั่งทำงานเสร็จสิ้น คุณจะมีโฟลเดอร์ใหม่ชื่อ my-next-app พร้อมด้วยโครงสร้างพื้นฐานของแอปพลิเคชัน Next.js

ขั้นตอนที่ 3: เรียกใช้โครงการ Next.js ของคุณ

หลังจากสร้างโปรเจ็กต์แล้ว ให้ไปที่โฟลเดอร์โปรเจ็กต์ของคุณและเริ่มเซิร์ฟเวอร์การพัฒนา:

cd my-next-app
npm run dev

คำสั่งนี้จะเริ่มเซิร์ฟเวอร์การพัฒนา Next.js ตามค่าเริ่มต้น เซิร์ฟเวอร์จะทำงานบน http://localhost:3000

เปิดเบราว์เซอร์ของคุณและไปที่ URL นั้น และคุณจะเห็นหน้าต้อนรับเริ่มต้นของ Next.js

คุณสามารถเริ่มสร้างหน้าใหม่ในโฟลเดอร์ app ตัวอย่างเช่น สร้างไฟล์ใหม่ about.js ภายในไดเร็กทอรี app เพื่อสร้างหน้าเกี่ยวกับ

บทสรุป

คุณตั้งค่าโครงการ Next.js ใหม่บนเครื่อง Ubuntu สำเร็จแล้ว! ตอนนี้คุณสามารถเริ่มสร้างเว็บแอปพลิเคชันของคุณได้โดยการเพิ่มเพจ ส่วนประกอบ และคุณสมบัติใหม่

Next.js ทำให้การสร้างเว็บแอปพลิเคชันสมัยใหม่เป็นเรื่องง่าย และด้วยความช่วยเหลือของคู่มือนี้ คุณได้เรียนรู้วิธีติดตั้งและตั้งค่าโครงการ Next.js