- Next.js คืออะไร? + มาหัดเขียนเว็บด้วย Next.js กันดีกว่า
- ตอนที่ 1 - Hello Next.js เริ่มสร้างโปรเจ็ค
- ตอนที่ 2 - สร้าง Page และการ navigate ระหว่าง Pages
- ตอนที่ 3 - การจัดการ Assets, Metadata และ CSS
- ตอนที่ 4 - เรื่องของ Pre Rendering
- ตอนที่ 5 - Data Fetching และการดึงข้อมูลจาก API
- ตอนที่ 6 - การทำ Dynamic Routes
- ตอนที่ 7 - API Routes การทำ API ด้วย Next.js
ตอนที่ 2 - สร้าง Page และการ navigate ระหว่าง Pages
เขียนวันที่ : Jun 15, 2022
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