การสร้างและรันโปรเจกต์ Next.js ใน ServBay

ภาพรวม

Next.js คือเฟรมเวิร์ก React ที่ทรงพลัง ได้รับการพัฒนาและดูแลโดย Vercel ซึ่งได้รับความนิยมอย่างกว้างขวางสำหรับการสร้างเว็บแอปยุคใหม่ที่มีประสิทธิภาพสูง มันขยายความสามารถของ React อย่างสมบูรณ์แบบด้วยฟีเจอร์ต่างๆ ที่พร้อมใช้งานแบบ out-of-the-box ช่วยให้นักพัฒนาสร้างแอปพลิเคชันที่ซับซ้อนได้ง่ายขึ้นอย่างมาก

Next.js คืออะไร?

Next.js คือเฟรมเวิร์ก React แบบโอเพ่นซอร์สยอดนิยมที่รองรับหลายกลยุทธ์เรนเดอร์ เช่น Server-Side Rendering (SSR) และ Static Site Generation (SSG) ฟีเจอร์เหล่านี้ช่วยเพิ่มประสิทธิภาพแอปพลิเคชัน เสริมประสบการณ์ผู้ใช้ และปรับปรุง SEO Next.js มีระบบ router แบบไฟล์ซิสเต็ม, API routes, การแบ่งโค้ดอัตโนมัติ, รองรับ CSS Modules ฯลฯ เพื่อประสบการณ์การพัฒนาแบบครบวงจร

จุดเด่นและข้อได้เปรียบหลักของ Next.js

• รองรับหลายกลยุทธ์เรนเดอร์ : รองรับ SSR, SSG, CSR และแบบไฮบริด นักพัฒนาสามารถเลือกโหมดที่เหมาะสมที่สุดสำหรับแต่ละ use case
• File-System Routing : ระบบ routing สร้างอัตโนมัติจากโครงสร้างโฟลเดอร์ pages หรือ app ใช้งานง่ายและเข้าใจได้ทันที
• API Routes : สร้าง endpoint API ของคุณเองได้ง่ายในโปรเจกต์ Next.js สะดวกสำหรับการพัฒนา front-end และ back-end ในที่เดียว
• Automatic Code Splitting : แบ่งโค้ดในระดับเพจ โหลดเฉพาะ JavaScript ที่จำเป็นในแต่ละหน้า ช่วยเพิ่มความเร็วการโหลดเพจ
• **Image Component (next/image) ที่ปรับแต่งประสิทธิภาพ: ** ปรับแต่งขนาด รูปแบบ และกลยุทธ์การโหลดภาพอัตโนมัติ ช่วยให้หน้าเว็บโหลดเร็วขึ้น
• รองรับ CSS และ Sass ในตัว : จัดการและเขียนสไตล์ได้อย่างสะดวก
• Fast Refresh : อัปเดตโค้ดแบบเกือบเรียลไทม์ในช่วงพัฒนา

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

การใช้งาน Next.js บน ServBay

ServBay มอบสภาพแวดล้อมพัฒนาเว็บแบบโลคัลแบบครบวงจร รวมถึง Node.js และเครื่องมือสำคัญอื่นๆ ด้วยฟีเจอร์ Node.js และการจัดการ เว็บไซต์ (รวมทั้ง Reverse Proxy และ Static File Service) คุณสามารถสร้างและจัดการโปรเจกต์ Next.js ได้อย่างง่ายดายทั้งการพัฒนาและดีพลอย

คู่มือนี้จะสอนคุณตั้งแต่การสร้างโปรเจกต์ Next.js, การรันในโหมดพัฒนา (ใช้ Reverse Proxy) จนถึงการดีพลอยในโหมดโปรดักชัน (ใช้ Static File Service) บน ServBay

สิ่งที่ต้องเตรียม

ก่อนเริ่มต้น โปรดตรวจสอบให้แน่ใจว่า

1. ติดตั้ง ServBay บน macOS เรียบร้อยแล้ว
2. ติดตั้งและเปิดใช้งาน Node.js ผ่านหน้าจัดการ แพ็คเกจ ของ ServBay หากยังไม่ได้ติดตั้ง โปรดดูคู่มือ การใช้งาน Node.js บน ServBay

ขั้นตอนการดำเนินการ

1. สร้างโปรเจกต์ Next.js

เราต้องเริ่มจากการสร้างโปรเจกต์ใหม่

1. เปิดเทอร์มินัล แล้วเข้าไปที่โฟลเดอร์เว็บไซต์หลักของ ServBay

   cd /Applications/ServBay/www

2. ใช้ create-next-app สำหรับสร้างโปรเจกต์: รันคำสั่งด้านล่างเพื่อสร้างโปรเจกต์ใหม่ ขอแนะนำให้ตั้งชื่อว่า servbay-next-app ซึ่งจะสร้างโฟลเดอร์ตามชื่อใน /Applications/ServBay/www

   npx create-next-app@latest servbay-next-app

   npx คือเครื่องมือสำหรับรันแพ็คเกจ Node.js ส่วน create-next-app@latest จะใช้เวอร์ชันล่าสุดของ Next.js เพื่อตั้งค่าโปรเจกต์ใหม่ ทำตามคำแนะนำในเทอร์มินัล (เช่น เลือก TypeScript, ESLint, Tailwind CSS, App Router ฯลฯ ตามต้องการ)

3. เข้าโฟลเดอร์โปรเจกต์และติดตั้ง dependency ที่ต้องใช้

   cd servbay-next-app
   npm install

   คำสั่ง npm install จะติดตั้ง dependency ทั้งหมดที่ระบุใน package.json ของโปรเจกต์

2. ปรับแต่งเนื้อหาเว็บไซต์ (ไม่บังคับ)

เพื่อทดสอบการรันโปรเจกต์ เราจะปรับแต่งหน้าแรกด้วยข้อความเล็กน้อย

1. เปิดไฟล์ pages/index.js (หากเลือก Pages Router) หากใช้ App Router ให้แก้ที่ app/page.js ตัวอย่างนี้ใช้ Pages Router:

   # เปิดไฟล์นี้ด้วย editor ที่คุณชื่นชอบ เช่น VS Code
   code pages/index.js

2. แก้ไขเนื้อหาไฟล์ ให้หน้าเว็บแสดง "Hello ServBay!" สามารถแทนที่หรือปรับแต่งตามตัวอย่างนี้:

   // pages/index.js (Pages Router)
   export default function Home() {
     return (
       <div>
         <h1>Hello ServBay!</h1>
         <p>เพจนี้ทำงานอยู่ผ่าน ServBay.</p>
       </div>
     );
   }

   ถ้าใช้ App Router (app/page.js) โครงสร้างจะต่างกันเล็กน้อย แต่การเปลี่ยน <h1> เหมือนกัน

3. เข้าโหมดพัฒนา

การพัฒนา Next.js ปกติจะใช้ dev server ซึ่งรองรับ Hot Module Replacement (HMR) และ Fast Refresh ช่วยให้อัปเดตโค้ดแล้วเห็นผลได้ทันที ระบบ Reverse Proxy ของ ServBay สะดวกในการเชื่อมต่อ domain ภายนอกเข้ากับ dev server บนพอร์ตโลคัล

1. รัน Next.js dev server: ที่โฟลเดอร์รากโปรเจกต์ (/Applications/ServBay/www/servbay-next-app)

   npm run dev -- -p 8585

   คำสั่งนี้จะสั่งให้เซิร์ฟเวอร์ Next.js รับฟังพอร์ต 8585 คุณสามารถเปลี่ยนเป็นพอร์ตอื่นได้ที่ว่างอยู่

2. ตั้งค่าเว็บไซต์บน ServBay (Reverse Proxy): เปิดแอป ServBay ไปที่การจัดการ เว็บไซต์ แล้วกดเพิ่มเว็บใหม่ ตั้งค่าดังนี้:

   • Name : My first Next.js dev site (หรือชื่ออื่นที่ต้องการ)
   • Domain : servbay-next-dev.servbay.demo (แนะนำลงท้ายด้วย .servbay.demo เพื่อใช้เป็น local domain)
   • Website Type : เลือก Reverse Proxy
   • Proxy IP : 127.0.0.1 (loopback address)
   • Proxy Port : 8585 (พอร์ต dev server)

   หลังตั้งค่าให้บันทึกและ Apply การเปลี่ยนแปลง ServBay จะตั้งค่า Caddy หรือ Nginx ให้อัตโนมัติ (ขึ้นกับ Config ที่เลือก) เพื่อส่งต่อคำขอไปยัง 127.0.0.1:8585

   สามารถดูรายละเอียดขั้นตอนใน การเพิ่มเว็บไซต์ Node.js ในโหมดพัฒนาโดยใช้ ServBay

3. เข้าเว็บไซต์โหมดพัฒนา: ไปที่เบราว์เซอร์แล้วเปิด https://servbay-next-dev.servbay.demo

   ServBay รองรับและตั้งค่า SSL certificate อัตโนมัติผ่าน ServBay User CA ให้สำหรับ domain ที่เพิ่มใหม่ คุณจึงสามารถใช้งานผ่าน HTTPS ได้อย่างปลอดภัยโดยไม่เจอคำเตือน SSL และยังสามารถ ปรับแต่ง domain และ SSL ฟรี ได้อีกด้วย

4. Build โปรดักชันและดีพลอยเป็น Static Website

เมื่อโปรเจกต์ Next.js สร้างเสร็จและพร้อมดีพลอย คุณสามารถ cofigure โปรเจกต์สำหรับ static export ได้ (ตั้งค่า output: 'export' หรือใช้ next export) ServBay สามารถใช้ Static Site Service สำหรับเว็บไซต์ static ได้อย่างดี

1. Build โปรดักชันและ Export Static File: ที่โฟลเดอร์โปรเจกต์ (/Applications/ServBay/www/servbay-next-app)

   npm run build
   npm run export

   • npm run build จะคอมไพล์โค้ดและสร้างเวอร์ชันโปรดักชัน ผลลัพธ์ปกติจะอยู่ที่โฟลเดอร์ .next
   • npm run export (ต้องตั้งค่ารองรับหรือใช้เวอร์ชัน Next.js ที่เหมาะสม) หรือการตั้งค่า output: 'export' จะ export แอปเป็น HTML, CSS, JavaScript แบบ static ทั้งหมด โดยไฟล์จะอยู่ในโฟลเดอร์ out

2. ตั้งค่าเว็บไซต์บน ServBay (Static File Service): เปิดแอป ServBay ไปที่การจัดการ เว็บไซต์ แล้วเพิ่มเว็บใหม่โดยตั้งค่าต่อไปนี้:

   • Name : My first Next.js production site (หรือชื่อที่ต้องการ)
   • Domain : servbay-next-prod.servbay.demo (แนะนำลงท้าย .servbay.demo)
   • Website Type : เลือก Static
   • Website Root : ใส่ path เต็มของโฟลเดอร์ out ที่เพิ่ง export เช่น /Applications/ServBay/www/servbay-next-app/out

   เมื่อบันทึกและ Apply ServBay จะตั้งค่า Web Server ให้ให้บริการไฟล์จาก /Applications/ServBay/www/servbay-next-app/out ทันที

3. เข้าดูเว็บไซต์ในโหมดโปรดักชัน: เปิดเบราว์เซอร์และไปยัง https://servbay-next-prod.servbay.demo คุณจะเห็นคอนเทนต์เว็บไซต์ static ที่ Next.js สร้างและ export ออกมา

   การตั้งค่า domain และ SSL ของ ServBay ทำให้เว็บไซต์ production โลคัลของคุณรองรับ HTTPS โดยอัตโนมัติ

สรุป

เพียงไม่กี่ขั้นตอน คุณก็สามารถสร้างและใช้งานโปรเจกต์ Next.js บนสภาพแวดล้อมโลคัล ServBay ได้สำเร็จ ทั้งในโหมดพัฒนา (real-time preview ผ่าน Reverse Proxy) และโหมดโปรดักชัน (ดีพลอยเป็น Static Web) ความครบเครื่องและสะดวกของการจัดการเว็บไซต์ใน ServBay ช่วยให้กระบวนการพัฒนาและทดสอบโปรเจกต์ Next.js ง่ายขึ้นอย่างมาก