ใช้ Next.js, React.js และ API สร้างหน้าเว็บ pre-render พร้อม deploy ขึ้น Vercel Cloud

บทความนี้จะเป็นพื้นฐานในการสร้างหน้าเว็บแบบ pre-render นะครับ คือเป็นการให้ server ทำการ render สร้างหน้าต่าง ๆ ไว้ก่อน โดยใช้ข้อมูลจาก API

ขอแปะ clip นะครับ ทำตาม clip ได้เช่นเดียวกันครับ

สำหรับการ render หน้าไว้ก่อนนะครับ ตัวอย่างเช่น ถ้าใน API มีข้อมูลแหล่งท่องเที่ยว 7 แห่ง server จะทำการ render หน้าเว็บสำหรับแหล่งท่องเที่ยวทั้ง 7 แห่งเตรียมไว้เลย เราเรียกวิธีนี้ว่า Server-side Rendering ซึ่งวิธีการนี้จะทำให้การทำ SEO การให้ search engine มา crawl หน้าเว็บเรา และการแชร์หน้าเว็บขึ้น social มีประสิทธิภาพมากกว่า Client-side Rendering ครับ

โดยทั่วไป React จะรองรับการทำ Client-side Rendering (ท่าไม่ทำท่ายากนะครับ 555) ส่วน Next.js เป็น React Framework ที่รองรับการทำ Server-side Rendering แนะนำให้ดูเพิ่มเติมที่ https://nextjs.org/learn/basics/data-fetching/two-forms ส่วนในบทความนี้เราจะใช้ Server-side Rendering แบบที่เป็น Static Generation ตามรูปครับ

Server-side Rendering: Static Generation by Next.js

บทความนี้จะสาธิตการใช้ Next.js เรียก API จำลองข้อมูลแหล่งท่องเที่ยวบนเว็บไซต์ MeCallAPI.com

ส่วนผลลัพธ์ของบทความนี้ มีตัวอย่างให้ลองทดสอบได้ที่ https://www.mecallapi.com/attractions_listing/

https://www.mecallapi.com/attractions_listing/

Software Installation

• Node.js https://nodejs.org
• Git https://git-scm.com/downloads

เริ่มต้นสร้างแอป Next.js

สร้างแอป Next.js ด้วยคำสั่ง npx create-next-app แล้วตามด้วยชื่อของแอป (ตั้งชื่อว่า nextjs-basic)

npx create-next-app nextjs-basic

เข้าไปที่โฟล์เดอร์ของแอป และติดตั้ง package เพิ่มเติม Material UI ซึ่งจะมี Component หรือ ส่วนประกอบต่าง ๆ สำหรับการสร้างหน้าจอ UI ให้เลือกใช้ เช่น ปุ่ม กล้องข้อความ เป็นต้น

cd nextjs-basic
npm install @material-ui/core @material-ui/icons clsx prop-types

แก้ไขไฟล์ pages/index.js

รันแอป ด้วยคำสั่งด้านล่าง

npm run dev

ดูผลลัพธ์ได้ที่ http://localhost:3000/

เตรียมแอปให้พร้อมใช้งาน Material UI

สามารถดูวิธีการเตรียมแอปที่ใช้ Next.js เพื่อให้รองรับ Material UI ได้จากที่ link โดยจะเป็นการสร้างและแก้ไขไฟล์ดังต่อไปนี้

สร้างไฟล์ src/theme.js

แก้ไขไฟล์ pages/_app.js

สร้างไฟล์ pages/_document.js

Restart แอป Next.js ซักครั้ง แล้วไปต่อกันเลยครับ

สร้างหน้าจอแสดงรายการแหล่งท่องเที่ยว

สร้างไฟล์ src/Navbar.js สำหรับ Component ที่เป็นแถบบาร์ด้านบนของหน้าเว็บ

สร้างไฟล์ src/AttractionCard.js เพื่อใช้ในการแสดงรายการของแหล่งท่องเที่ยว มีภาพแหล่งท่องเที่ยว ชื่อ รายละเอียด และปุ่มที่กดเข้าไปดูรายละเอียด (ซึ่งหน้ารายละเอียดจะทำถัดจากนี้)

แก้ไขไฟล์ pages/index.js สำหรับเป็นหน้าแสดงข้อมูลรายการแหล่งท่องเที่ยว (Attractions) โดยฟังก์ชัน getStaticProps จะถูกเรียกตอน build แอป (ไม่ใช่ตอนที่เรียกหน้าเว็บผ่าน browser) จะเป็นการ render หน้าเว็บขึ้นมาโดยใช้ข้อมูลจาก API
API URL: https://www.mecallapi.com/api/attractions
Method: GET

ดูผลลัพธ์หน้าแสดงรายการแหล่งท่องเที่ยวได้ที่ http://localhost:3000/

สร้างหน้าจอแสดงรายละเอียดแหล่งท่องเที่ยว

สร้างไฟล์ src/Attraction.js สำหรับ Component ที่แสดงรายละเอียดของแหล่งท่องเที่ยว

สร้างไฟล์ pages/[id].js เพื่อเป็นหน้าแสดงรายละเอียดของแหล่งท่องเที่ยว โดยชื่อไฟล์ [id] คือการนำ path ของ url มาใช้อ้างอิงเป็น id เช่น ถ้ามีการเรียก http://localhost:3000/1 ท้ายสุดที่เป็นตัวเลข 1 จะสามารถใช้ params.id เพื่อได้ค่า 1 ใน code ได้

ฟังก์ชัน getStaticPaths เป็นการเรียก API เพื่อให้ทราบว่าจะต้อง render หน้าเว็บจำนวนกี่หน้า และมีหน้าอะไรบ้างโดยใช้ id เป็นตัวอ้างอิง

ส่วนฟังก์ชัน getStaticProps เป็นการเรียก API เพื่อ render หน้าแต่ละหน้า โดยการเรียก API ของแต่ละหน้าจะมีการส่งค่า id เพื่อให้ได้ผลลัพธ์ที่ต่างไปของแต่ละหน้า

API URL: https://www.mecallapi.com/api/attractions/{id}
Method: GET

เสริม ที่บรรทัดที่ 8–12 มีใส่ tag og ไว้เพื่อสำหรับให้ facebook สามารถนำ title, description และ image มาใช้ในการสร้าง social card ตอน share ได้นะครับ ซึ่งถ้าเราทำแบบ Client-side rendering จะทำแบบนี้ไม่ได้นะครับ (ลองแล้ว 555)

ดูผลลัพธ์หน้าแสดงรายละเอียดแหล่งท่องเที่ยวได้ที่ http://localhost:3000/2

นำ Code ขึ้น GitHub

เข้าไปที่เว็บของ GitHub https://github.com/ สมัคร account (ถ้ายังไม่มี) login ไปที่หน้าของเรา แล้วเลือก New repository ตามรูป

ใส่ชื่อ Repository name แล้วกด Create repository

จากนั้นให้ copy url ของ repository ตามรูปนะครับ จะใช้ใน step ถัดไป

รันคำสั่ง git ดังต่อไปนี้ เพื่อ push code ของเราขึ้น repository ที่ได้สร้างไว้ โดยเปลี่ยน <<repository url>> ให้เป็น url ที่ copy มาจาก step ที่แล้ว

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin <<repository url>>
git push -u origin main

refresh หน้าเว็บอีกครั้งจะเห็นได้ว่าตอนนี้ code เรามาอยู่บน repository แล้ว

Deploy Code จาก GitHub ขึ้น Vercel Cloud

เข็าไปที่ https://vercel.com/ สมัคร account (ถ้ายังไม่มี) login ไปที่หน้าของเรา แล้วเลือก New Project ตามรูป

เลือก Add GitHub Org or Account ตามรูป

จากนั้นจะมีหน้าต่างขึ้นมา เพื่อให้ติดตั้ง Vercel ไปที่ account GitHub ของเรา ให้ทำการกดเลือกที่ account GitHub ของเราตามภาพ

ยอมรับให้ Vercel เข้าถึง repository ตามรูป (จะเลือกบาง repository ก็ได้) กดปุ่ม Install แล้วหน้าต่างจะปิดไป

กลับมาที่หน้า Vercel ให้เลือก Import ที่อยู่หลังชื่อของ repository ที่เราสร้างไว้

เลือก Account Vercel ของเราอีกครั้ง

กดปุ่ม Deploy

รอจนกว่าจะ deploy เสร็จ ถ้าไม่มี error ก็จะมีผลลัพธ์ดังภาพครับ กด Visit เพื่อเข้าสู่หน้าเว็บของเราเลย

ตัวอย่างของผมเองนะครับ https://nextjs-basic-coral.vercel.app/

ตอนนี้เว็บของเรา deploy อยู่บน cloud แล้วครับ และเนื่องจากเรามี meta tag ที่ใส่ไว้ในหน้ารายละเอียดของแหล่งท่องเที่ยว ทำให้เราสามารถสร้าง social card ของการ share ผ่าน facebook ได้ดังรูปนะครับ ลองแชร์ได้เลยครับ ตัวอย่างของผมนะครับ
https://nextjs-basic-coral.vercel.app/1

จบไปแล้วนะครับกับเนื้อหาการใช้ ใช้ Next.js, React.js และ API สร้างหน้าเว็บ pre-render พร้อม deploy ขึ้น Vercel Cloud ไว้บทความถัด ๆ ไปจะมาแนะนำความสามารถเพิ่มเติมของ Next.js นะครับ

บทความโดย อ.ดร.กานต์ ยงศิริวิทย์
วิทยาลัยนวัตกรรมดิจิทัลเทคโนโลยี มหาวิทยาลัยรังสิต