Next.js คืออะไร
Next.js คือ JavaScript webapps framework ถูกสร้างขึ้น on top จาก library ดัง ๆ อย่าง React, Webpack, และ Babel ขึ้นมาอีกที
ถ้าจะให้เข้าใจง่าย ๆ ก็คงเหมือนกับเป็น creat-react-app อีก version แหละครับ
มีจุดเด่นคือ มันเป็น SSR (server-side rendering) ตั้งแต่ต้น!!
(พอกันทีกับการเสียเวลามานั่ง setup หาวิธีทำ SSR ทีหลัง เพราะ Next.js จัดมาให้เลย ตั้งแต่ต้น!) ถูกพัฒนาขึ้นโดยทีม zeit ซึ่งเป็นหนึ่งในทีมที่สร้างเครื่องเจ๋งๆ ออกมามากมาย เช่น hyper, now เป็นต้น
ทีนี้ความเจ๋งของเจ้า Next.js มีอะไรบ้าง?
ความเจ๋งของเจ้า Next.js เนี่ย มันมีหลากหลายสิ่งมากมาย ส่วนตัวผมเองก็ยังพึ่งเริ่มเล่นกับมันไปได้ไม่นาน แต่เอาเป็นว่าวันนี้จะขอแชร์เท่าที่ผมชอบละกันครับ
โดยจะประกอบไปด้วย list ดังต่อไปนี้
- SSR (server-side rendering)
- Hot reload
- Static HTML file exportable
- Project Structure
- Routing
- Easy setting up & installation
- Learning curve & Document
SSR (server-side rendering)
อย่างที่กล่าวไปในตอนแรกเลยครับ ตัว Next.js นั้นจะมีลักษณะการทำงานเป็น SSR โดยตัวมันเองอยู่แล้ว ฉะนั้นเลิกกังวลเรื่องข้อจำกัดการทำ SEO ไปได้เลย
Hot reload มาพร้อม
สำหรับคนที่ไม่รู้ว่า hot reload คืออะไร มันก็คือเวลาเราแก้ไขไฟล์ หน้าเว็บของเราจะถูก refresh โดยอัตโนมัติ เพื่อให้เราเห็นผลที่แก้ได้ทันที!!
สามารถ Export เป็น static HTML file ได้
อาจนำไปประยุกต์ใช้ได้กับการเขียน webapp ขึ้นมา และนำไปแสดงผลบนเซิฟเวอร์ที่รองรับแค่การอัพโหลด static file, หรือสามารถนำไปอัพโหลดใน github.io เป็นต้น
เลิกปวดหัวกับ Project Structure เพราะ Next.js คิดมาให้แล้ว!!
Next.js มี project structure ที่ถูกออกแบบมาให้เรียบร้อยแล้ว หลัก ๆ จะถูกแบ่งออกเป็น
/pages /components
โดย /pages จะทำหน้าที่ในการเก็บไฟล์ของหน้าเว็บแต่ละหน้าของเรา
ส่วน /components ก็ทำการเก็บ component ที่เราเขียนขึ้นมา เพื่อนำไปใช้ในหน้าต่าง ๆ ตามสไตล์การเขียนแบบ react
Routing พร้อม
ด้วยความที่ project structure ของมันถูกวางเอาไว้โดยแบ่งแยกออกเป็น /pages และ /components เรียบร้อย
เรื่องการทำ routing จึงถูกออกแบบมาให้สามารถ auto routing ไปได้เลย
โดยมันจะทำการอ่านจากไฟล์ที่เราใส่ลงไปใน /page ของเรา และ routing ให้เราโดยอัตโนมัติ
เช่นหากเรามีไฟล์ดังต่อไปนี้
/pages | — index.js | — article.js
เมื่อเรารันโปรเจ็คของเราขึ้นมา เราก็สามารถไปที่หน้า www.เว็บไซต์ของเรา หรือ www.เว็บไซต์ของเรา/article ได้ทันที!!
มันขึ้นโปรเจ็คได้ง่ายและเร็วมากกกกก!!
เพื่อให้สามารถเห็นภาพได้ชัดเจน ผมขอยกตัวอย่างคำสั่งทั้งหมดสำหรับการ setup ให้ดูละกันนะครับ
ตัวอย่างคำสั่งที่ต้องใช้สำหรับการขึ้นโปรเช็ค
$ mkdir hello-next $ cd hello-next $ npm init -y $ npm install — save react react-dom next $ mkdir pages
สร้างหน้าแรกของเว็บไซต์เราโดยการสร้างไฟล์ index.js ภายใน /pages ขึ้นมา
ภายใน /pages/index.js เพิ่มโค้ด (โค้ดเหล่านี้จะถูกแสดงผลในหน้าแรกของเว็บไซต์)
const Index = () => ( <div> <p>Hello Next.js</p> </div> ) export default Index
เปิด package.json และเพิ่ม
"scripts": {
"dev": "next"
}
ใน terminal ทำการ run โดย
$ yarn dev // หรือ $ npm run dev
และนี่คือผลลัพธ์ที่ได้
แท่นแท้น~ เสร็จเรียบร้อย! ง่ายดายกว่านี้มีอีกไหม?!!
Learning Curve ที่ต่ำ และ Document ที่ดี
อีกหนึ่งข้อดีที่ขาดไม่ได้เลยสำหรับ library ต่าง ๆ ก่อนที่ผมจะนำมาใช้คือการมี document ที่ดี เพื่อให้ง่ายต่อการเรียนรู้
ทีม zeit ผู้สร้างเอง ก็ไม่ทำให้ผิดหวังอีกเช่นเคย เขาได้ทำการสร้างเตรียมไว้ให้เรียบร้อย โดยมีเว็บไซต์ที่ชื่อว่า learnnextjs.com ให้เราไปศึกษาเริ่มต้นได้เลย
ซึ่งภายในเว็บไซต์นั้น ก็จะค่อยๆ ทำการสอน และอธิบายถึงวิธีการใช้งานได้อย่างครบถ้วนและดีมาก!! (แนะนำเลยสำหรับใครก็ตามที่ต้องการจะศึกษา ให้เข้าไปที่นี่ก่อนเลย)
หากเราลองเข้าไปดูภายใน github ของ Next.js เราจะเห็นชื่อโฟลเดอร์หนึ่งซึ่งเขียนว่า examples
หากเราตามเข้าไปดู โฟลเดอร์นั่นจะประกอบไปด้วยตัวอย่างการ setup หรือใช้งาน library ต่าง ๆ ร่วมกันกับ Next.js ให้ดูอย่างเสร็จสรรพ
และต้องบอกเลยว่า examples ที่มีไว้ให้นั้นครอบคลุมกับที่ต้องการใช้งานสุดๆ!
ตัวอย่าง examples ที่น่าสนใจ
สรุปส่งท้าย
จากการทดลองใช้งาน Next.js มาได้ซักระยะ ผมชอบในความง่ายในการ setup และความพร้อมในเครื่องมือต่าง ๆ สำหรับการใช้งาน (อารมณ์ประมาณมาม่าแบบฉีกซองต้มน้ำร้อนกินได้เลย)
ประกอบกันกับ documents หรือ tutorial website ต่าง ๆ ที่มีมาให้อย่างครบถ้วน examples ที่หลากหลาย ไม่ต้องมานั่งงมเองว่า หากจะใช้คู่กับ library ตัวนี้ ๆ ต้องทำยังไงบ้าง
ด้วยเหตุผลข้างต้นที่กล่าวมาจึงขอสรุปว่าประสบการณ์โดยรวมที่มีต่อ Next.js นั้น มัน ช่างน่าประทับใจ และมิตรกับ developer ซึ่งหลงใหลในความเรียบง่ายเสียเหลือเกิน