เริ่มต้นใหม่ด้วย Next.js บทที่ 4 Dynamic Pages

เดิมเนี่ยที่เราเขียนอยู่เรียกได้ว่าเป็น Static Pages เอาหละเราจะมาทำให้มัน Dynamic หรือเรียกได้ว่า มีการเปลี่ยนแปลงตามสิ่งที่เราส่งไปกัน

Dynamic แปลว่า “พลวัต” เอิ่ม…ไม่คุ้นเลย งั้นผมขอใช้คำว่า Dynamic ต่อละกัน

งง หละสิ มันคืออะไร?

สิ่งที่จะทำก็คือจากเดิมเนี่ยเรามี Sawatdee Next.js ในหน้า index แล้ว สิ่งที่ผมอยากได้มันไม่ใช่แค่ Next.js อะดิ อยากให้มัน สวัสดี ใครก็ได้ที่เข้ามาหรือเรียกได้ว่าอยากเปลี่ยนคำว่า Next.js ที่เรียกว่าเป็น “Static text” เป็น “Dynamic text” นั่นเอง

งั้นเรามาลองทำโดยส่งผ่าน URL กันดีกว่า เช่น

• http://localhost:3000/hello?name=Aod

เอาหละ เริ่มได้

เริ่มจากสร้าง Page ใหม่ชื่อว่า hello

├── /components
│ ├── Header.js
├── /pages
│ ├── index.js
│ └── about.js
│ └── hello.js <<< ตรงนี้

เจอสิ่งใหม่อีกแล้ว props.url.query.name

props.url คืออะไร

props.url คือ url ที่ถูกส่งมาในรูปแบบของ object
props.url.query คือ ค่าที่ถูกส่งมาทาง url
props.url.query.name ก็คือ ค่าที่อยู่ในตัวแปร name ที่ส่งมาทาง url นั่นเอง
เช่น http://localhost:3000/hello?name=Aod
ค่าที่ได้ก็จาก props.url.query.name ก็คือ “Aod” ในรูปของ String

ยังไม่พอเรามาลองใช้ React Developer Tools ดูกัน

อืมหืมมใน props.url ไม่ได้มีแต่ query แต่มีอีกเพียบเลยแถมมี function ให้ใช้อีก

• pathname คือ pathname แน่ๆเลย !! ตรงตัวครับ
• query คือ ค่าที่ถูกส่งมาทาง url

ส่วน Function ที่ส่งมาให้ใช้นั้นพบ Warning ทุกอันเลย (แล้วจะส่งมาทำไมหว่า)

ผมใช้ next 3.0.6 คิดว่าใน version ถัดๆไปคงแก้ไขเรื่องนี้

เช่น ผมลอง <button onClick={() => props.url.push(‘/’)}>push</button>

เขาบอกว่า “มันเลิกใช้แล้วนะ ไปใช้ next/router แทนใช้ได้เหมือนกัน”

ส่วน pushTo, replace, replaceTo ก็เป็นเช่นเดียวกับ push

งั้นเราก็จะไม่ดื้อครับ ถ้ามีโอกาสก็จงใช้ next/router แทน

ส่วน props.url.back() คือย้อนกลับแนะนำให้ใช้ window.history.back() แทน

เราทำ hello page เสร็จแล้วเป็น Dynamic แล้วด้วยจากการส่ง ?name=… เข้าไป

ยังไม่จบ

แต่เรายังไม่มี Link ที่จะไปหน้า hello เลย ไปที่หน้า index.js เลยละกัน

เพิ่ม Form กรอกชื่อเข้าไปซักหน่อย ใส่ function ไปอีกนิด

เสร็จมาดูผลลัพธ์กัน

จบแล้วกับบทที่ 4

อ้างอิง

https://learnnextjs.com
https://github.com/doctoraod/sawatdee-next/tree/lesson4

doctoraod/sawatdee-next

สารบัญ

• บทที่ 1 Setup
• บทที่ 2 Routing
• บทที่ 3 Shared Components
• บทที่ 4 Dynamic Pages
• บทที่ 5 Route Masking (Coming soon…)