ตอนที่ 2 - สร้าง Page และการ navigate ระหว่าง Pages

Create Pages & Routing

สำหรับบทเรียนนี้ เรายังคงอ้างอิงจาก โค๊ด จาก create-next-app โดยเราจะทำหน้าเว็บขึ้นมาเพิ่ม 2 หน้าครับ คือ Index (ที่มีอยู่แล้ว) กับหน้า About โดยเนื้อหานี้ครอบคลุม

• การสร้าง Page โดยใช้ File System routing ของ Next.js คือง่ายๆ เพียงแค่เราสร้าง Component ในโฟลเดอร์ /pages/ ตัว Next.js มันก็จะจัดการเป็นหน้าเว็บให้เราเอง
• เรียนรู้การใช้ component ที่ชื่อว่า Link เพื่อเอาไว้กดไปหน้าต่างๆ ของเว็บ (เป็น Client-side)
• ตัว Link จะมี Code spliting และ prefetching มาให้เราอัตโนมัติ เนื่องจาก Next.js จะรู้เองว่าหน้าไหนจะต้อง Prefetching จากการอ่าน href ใน Link component.

สร้างหน้า About ก็คือเพิ่มไฟล์ pages/about.js ขึ้นมา มีหน้าตาโค๊ดแบบนี้:

const AboutPage = () => {
  return (
    <div>
      <h1>About</h1>
    </div>
  )
}

export default AboutPage

ทีนี้เมื่อเรา start server ขึ้นมา (หรือถ้า Server เรายังรันอยู่) และเข้า url เราก็จะมี 2 pages ละครับ คือ

• http://localhost:3000 - หน้าหลัก
• http://localhost:3000/about - หน้า About

ถ้าอยากให้เว็บมีหน้า /projects/my-project ก็แค่สร้าง Component ในโฟลเดอร์ project ข้างในโฟลเดอร์ pages ได้เลย ไฟล์ก็จะเป็น pages/projects/my-project.js

Link Component

โดยปกติเวลาเราเชื่อม link ในเว็บปกติ เราจะใช้แท็ก <a href> ใช่มั้ยครับ ใน Next เราจะใช้ component Link จาก next/link

<h1 className="title">Hello! <a href="http://localhost:3000/about">Go to About</a></h1>

ก็จะเป็น

<h1 className="title">
  Hello!
  <Link href="/about">
    <a>Go to About!</a>
  </Link>
</h1>

ทีนี้ลองแก้ไฟล์ pages/index.js โดยเพิ่ม Link ไปหน้า About ส่วนไฟล์ pages/about.ts ก็ใส่ Link เพื่อ Back กลับมาหน้า Home ครับ

หน้า Index ลองแทรก link ไป ตรงไหนก็ได้ที่เราต้องการ เช่น ผมใส่ไว้ ต่อจาก Welcome to Next.js! เลย จะได้เป็นแบบนี้

import Link from 'next/link'

export default function Home() {
  return (
    <div>
      <Link href="/about">
        <a>Go to About</a>
      </Link>
    </div>
  )
}

และส่วนหน้า About ก็ใส่ link กลับไปหน้า Home

import Link from 'next/link'

const AboutPage = () => {
  return (
    <div>
      <h1>About</h1>

      <Link href="/">
        <a>Back home</a>
      </Link>
    </div>
  )
}

export default AboutPage

ทีนี้เมื่อลองเข้าหน้าเว็บ http://localhost:3000 ก็สามารถกด link เพื่อไปหน้า http://localhost:3000/about และกด กลับไป กลับมาได้แล้วครับ

Client-Side Navigation

ตัว Client-Side Navigation หมายความว่า การ link ไปแต่ละหน้าใน web ของเรา จะทำผ่าน JavaScript

Code spliting

ตัว Next.js จัดการเรื่องพวกนี้ให้เราอยู่แล้ว โดยทุกๆหน้า มันจะโหลดเฉพาะ code ที่จำเป็นของหน้านั้น เช่น เวลาเราเขียน React และต้องการ build เป็น bundle ไฟล์​ มันจะมัดรวมไฟล์ JavaScript ทั้งก้อน มาเลย สมมติ เช่น main.js ทีนี้ เว็บเรามี 10 หน้า เราแค่เข้าหน้า Home แต่โค๊ดทุกๆ หน้ามันก็อยู่ในไฟล์ main.js ก็ถูกโหลดด้วย

แต่พอเป็น Next.js ที่มีเรื่อง code spliting มันก็มาช่วยตรงส่วนนี้ คือมีแค่โค๊ดหน้านั้นๆ ทำให้มันทำงานได้ไวกว่าปกติ เพราะไฟล์เล็กกว่า bundle ทั้งหมดลงไป

Prefetching

ส่วน Prefetching คือตัว Next.js จะดูจาก link ของ component Link เช่น เราจะให้คลิ๊กไปหน้า About ตัว Next.js ก็รู้อยู่แล้ว ว่าเดี๋ยวอาาจะต้องมีการคลิ๊ก มันก็จะไปทำการ load code ของส่วน About เป็น background เอาไว้ ทำให้เวลาเราคล๊ิกไปหน้าที่เราต้องการ มันเร็วมากๆ นั่นเอง

🎉 จบแล้วครับ สำหรับตอนที่ 2

ในตอนต่อไป เราจะมาพูดถึงเรื่องของ Assets และการปรับแต่งหน้าเว็บด้วย CSS หรือ Sass กันครับ

แบบฝึกหัด

• ลองสร้างหน้า Page ขึ้นมาหลายๆ หน้า และทำการ navigate แต่ละหน้าครับ
• ปกติ next/link ตัว <Link> ต้อง wrap ด้วยแท็ก <a> ลองสร้าง custom component ที่ไม่มี <a> และใช้ attribute ชื่อ passHref ดูครับ (Hint)
• Link เราสามารถส่ง Object ไปได้ ไม่ใช่แค่เฉพาะ string url อย่างเดียว เช่น ส่ง pathname และ query
• อ่านเรื่อง next/link เพิ่มเติมครับ ที่ Docs - next/link