ปัจจุบันผมเขียน 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 เริ่มต้น อาจจะเลือกเป็น Default starter app ก่อนก็ได้ครับ

หลังจากนั้นมันจะสร้างโฟลเดอร์และไฟล์เริ่มต้นทุกอย่างให้เราทั้งหมด โดยอาจจะลองเข้าไปแก้ไขที่ pages/index.js และดูผลที่ browser อีกที หรือจะติดตั้งแบบ Manual ทำเองทุกอย่างในการสร้างไฟล์ สามารถทำตามในขั้นตอนด้านล่างได้เลยครับ

ติดตั้งแบบ Manual

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

npm init -y

เริ่มการติดตั้ง Next.js ซึ่งถ้าใครเคยใช้ create-react-app มา จะลักษณะคล้ายกัน แต่ Next.js จะเป็น create-next-app ครับ

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

Error ด้านบนเกิดขึ้น เพราะว่าเรายังไม่ได้สร้างไฟล์หน้า page ใดๆเลย ดังนั้นเรามาสร้างไฟล์กันดูขั้นตอนถัดไป

สร้างไฟล์

Next.js นั้นจะทำ Rouing ให้เราอัตโนมัติ โดยเราจะต้องสร้าง 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 นั้นจะทำ Rouing ให้เราอัตโนมัติ เรามาลองสร้างไฟล์เพิ่มกัน โดยให้เพิ่มไฟล์ 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 ทำ Rouing ให้เราอัตโนมัติได้

สร้างลิงค์

มาลองทำลิงค์เชื่อมโยงหน้า 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

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