วิธีติดตั้งและใช้งาน Next.js เบื้องต้น

ปัจจุบันผมเขียน React อยู่แต่มีข้อเสียอยู่จุดนึง คือมันไม่สนับสนุน SEO มากนัก ซึ่งมันจะต้องใช้การทำ Server-side rendering (SSR) คือไปพ่น HTML ฝั่ง Server เพื่อให้ Bot มันไต่เว็บเพื่อเก็บมา Index นั่นเอง ซึ่งถ้าเป็น React คงต้อง config ต่างๆมากมายกว่าจะได้ออกมา

และนั่นเป็นเหตุผลที่ให้ต้องหาเครื่องมือช่วย ซึ่งผมเขียน React มาก่อนจึงมองมาที่ Next.js เพราะใช้ React พื้นฐานในการโค้ดครับ

Next.js คืออะไร?

Next.js เหมาะสำหรับเว็บไซต์ทั่วไปที่ต้องการให้สนับสนุน SEO เพราะมีความสามารถทำ Server-side rendering (SSR) และตั้งแต่ Next.js 9.3 ขึ้นไป ยังสามารถทำ Static site generator คือ Export เว็บทั้งเว็บเป็น Static site ได้ด้วย ซึ่งตัว Static site จะเอาไปวางไว้ที่ไหนก็ได้ เพราะมันเป็นเพียงไฟล์ HTML+CSS+Javascript ทำงานฝั่ง Client เท่านั้น

ใครสนใจ Next.js สามารถอ่านเพิ่มเติมได้ที่ https://nextjs.org/ ครับ

ความต้องการระบบ

Node.js 10.13 หรือเวอร์ชั่นสูงกว่านั้น
MacOS, Windows (including WSL), และ Linux ที่สนับสนุน

ติดตั้ง Next.js

ติดตั้งแบบอัตโนมัติ

การติดตั้งทาง Next.js แนะนำให้ใช้ create-next-app ซึ่งมันจะติดตั้งทุกอย่างให้อัตโนมัติ โดยคำสั่งดังนี้

npx create-next-app
# หรือ
yarn create next-app

ถ้าต้องการเริ่มต้นโปรเจ็คร่วมกับ TypeScript ให้ใช้ --typescript flag ดังนี้

npx create-next-app --typescript
# หรือ
yarn create next-app --typescript

หลังจากทำการติดตั้งสำเร็จให้ทำตามคำแนะนำ เช่น ตั้งชื่อ App และเลือก Template เริ่มต้น หลังจากนั้นมันจะสร้างโฟลเดอร์และไฟล์เริ่มต้นทุกอย่างให้เราทั้งหมด

ติดตั้งแบบ Manual

ก่อนอื่นให้เราสร้างโฟลเดอร์สำหรับเก็บโปรเจ็ค จากนั้นเปิด Terminal แล้วเข้าไปในโฟลเดอร์ที่สร้างขึ้นมา โดยจะใช้ npm init เริ่มต้นสร้างโปรเจ็ค ซึ่งมันจะสร้างไฟล์ package.json ให้เองโดยอัตโนมัติ

npm init -y

เริ่มการติดตั้ง Next.js

npm install react react-dom next  # ถ้าติด permission ให้ sudo นำหน้า

เพิ่ม script ส่วนนี้ลงไปใน package.json

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

ลองสั่ง run โปรเจ็คด้วยคำสั่งนี้

npm run dev

มันจะ Error: Couldn't find a 'pages' directory. Please create one under the project root เพราะว่าเรายังไม่ได้สร้างไฟล์หน้า page ใดๆเลย ดังนั้นเรามาสร้างไฟล์กันขั้นตอนถัดไป

สร้างไฟล์

Next.js นั้นจะทำ Routing ให้เราอัตโนมัติ โดยเราจะต้องสร้าง React Component ไว้ในโฟลเดอร์ pages เริ่มทดลองสร้างไฟล์หน้าแรก (Index)

// pages/index.js
export default () => {
  return (
    <div>
      <h1>Hello! Next.js</h1>
    </div>
  )
}

เมื่อสร้างไฟล์เสร็จลองสั่งรันด้วย npm run dev อีกครั้ง ให้ลองเข้า URL http://localhost:3000/ จะแสดงข้อความ Hello! Next.js ซึ่งถ้าลอง View page source ดู ก็จะแสดง "Hello! Next.js" ให้ Bot มาเก็บข้อมูลสนับสนุน SEO — นี่คือข้อดีของ Server-side rendering (SSR)

กรณีต้องการเปลี่ยน port เช่น จาก 3000 ไปเป็น 8080 ให้เข้าไปที่ไฟล์ package.json ไปเพิ่ม -p ตามด้วยเลข port

"scripts": {
  "dev": "next -p 8080"
}

ทำ Routing

อย่างที่เกริ่นไปแล้วว่า Next.js นั้นจะทำ Routing ให้เราอัตโนมัติ เรามาลองสร้างไฟล์เพิ่มกัน โดยให้เพิ่มไฟล์ About และ Contact ดังนี้

// pages/about.js
export default () => {
  return (
    <div>
      <h1>About page</h1>
    </div>
  )
}

// pages/contact.js
export default () => {
  return (
    <div>
      <h1>Contact page</h1>
    </div>
  )
}

เมื่อสร้างเสร็จแล้วเราสามารถลองเข้า URL http://localhost:3000/about หรือ http://localhost:3000/contact เพื่อดูผลลัพธ์ที่ Next.js ทำ Routing ให้เราอัตโนมัติได้

สร้างลิงค์

มาลองทำลิงค์เชื่อมโยงหน้า page กัน ซึ่งทุกหน้าจะมีการแสดงลิงค์ชุดเดียวกัน ดังนั้นเราจะใช้วิธีแชร์ Component แล้วให้แต่ละ page นำไปใช้ เวลาแก้ลิงค์จะได้แก้ที่เดียว ให้สร้างโฟลเดอร์ components โครงสร้างประมาณนี้

├── components
│   └── Menu.js
└── pages
    ├── about.js
    ├── contact.js
    └── index.js

สร้าง Component ไฟล์ชื่อ Menu.js ภายใต้โฟลเดอร์ components

import Link from 'next/link'

export default () => {
    return (
      <div>
        <ul>
          <li><Link href="/"><a>Home</a></Link></li>
          <li><Link href="/about"><a>About</a></Link></li>
          <li><Link href="/contact"><a>Contact</a></Link></li>
        </ul>
      </div>
    )
  }

สังเกตเราจะใช้ Link ครอบแท็ก a เพื่อให้เมื่อคลิกแล้วจะไม่มีการ refresh ระหว่างหน้า

หลังจากสร้างนั้นให้เพิ่ม Component Menu ในทุกหน้า

// pages/index.js
import Menu from '../components/Menu'

export default () => {
  return (
    <div>
      <h1>Hello! Next.js</h1>
      <Menu />
    </div>
  )
}

// pages/about.js
import Menu from '../components/Menu'

export default () => {
  return (
    <div>
      <h1>About page</h1>
      <Menu />
    </div>
  )
}

// pages/contact.js
import Menu from '../components/Menu'

export default () => {
  return (
    <div>
      <h1>Contact page</h1>
      <Menu />
    </div>
  )
}

เสร็จเรียบร้อยจะแสดงลิงค์ทุกหน้า ซึ่งเราสามารถลองคลิกลิงค์ไปมาระหว่างหน้าได้

Deploy Production

โดยเราจะต้อง Build โปรเจ็คก่อน ซึ่ง Next.js จะสร้าง production อยู่ในโฟลเดอร์ .next

npm run build

จากนั้นสั่ง start เพื่อ Node.js server ของโปรเจ็คขึ้นมา โดยสามารถดูได้ที่ URL http://localhost:3000/

npm start

ก็ขอจบบล็อกนี้ไว้เพียงเท่านี้ครับ