เริ่มต้นใหม่ด้วย Next.js บทที่ 1 Setup
แต่ก่อนเคยเขียน React ต้อง config webpack มากมายกว่าจะได้ พอมี “create-react-app” ชีวิตก็ง่ายขึ้น ทีนี้เราอยากทำ Server-side rendering เอาหละสิ ลำบากละ ต้องมา Config อะไรมากมายมหาศาล
แต่นแต๊นนนน ขอเสนอ Next.js (link : https://github.com/zeit/next.js/)
เหนือกว่า React ยังไง?
- ช่วยทำเรื่อง Server-side rendering
- ช่วยเขียน Routing ให้บางส่วน
Server-side rendering คืออะไร?
- การประมวลผล Website พร้อมข้อมูลด้วย Javascript บน Server โดยไม่ต้องรอ Javascript ฝั่ง Client ทำงาน
- การทำ Website ของเราให้น่ารักกับ SEO (Search Engine Optimization)
- เสริฟข้อมูลให้ Bot Google ผู้น่ารักรู้ว่าเรามี Content อะไรจะได้ติดเวลา Search นั่นเอง
- ตายหละ !! เขียน React เอาขึ้น Production แล้วทำไม Search แล้วหาไม่เจอ…นี่แหละคือคำตอบ Server-side rendering เพราะถ้าไม่ทำเวลาเปิด Web จะได้หน้าเปล่าๆ โบ๋แบ๋ แล้วข้อมูลค่อยตามมาอีกทีนึงผ่าน Ajax request
มาลอง Next.js กันเถอะ !!
ผมเริ่มด้วยการศึกษาสดๆร้อนๆมะกี้นี้ด้วย https://learnnextjs.com/
แต่เดี๋ยวก่อนมาตรวจพื้นฐานกันหน่อย
- ✓ HTML / CSS
- ✓ JavaScript ES2015 (ES6) เป็นอย่างน้อย
- ✓ React พื้นฐาน
โอเคได้ จัดไป !!
บทที่ 1 Setup
เขาว่าให้เริ่มต้นด้วยการสร้าง Project และลง Package พื้นฐานเรามาเริ่มไปด้วยกัน
mkdir sawatdee-next
cd sawatdee-next
yarn init -y
yarn add react react-dom next
mkdir pagesหรือใครจะได้ npm ก็ได้ตามสะดวก
mkdir sawatdee-next
cd sawatdee-next
npm init -y
npm install --save react react-dom next
mkdir pagesจากนั้นเปิด Project นั้นขึ้นมาเปิดไฟล์ /package.json และเพิ่ม code นี้เข้าไป
"scripts": { "dev": "next"}
จะได้เป็นดังนี้
เสร็จแล้วก็ Run ครับจัดไป
npm run dev
เอื้ออ…โดนด่าไปก่อนเลยหนึ่งรอบด้วยการบอกว่า “หาของใน page ไม่เจอโว้ย…สร้างมาเดี๋ยวนี้”
จัดไปสร้างไฟล์ /pages/index.js ขึ้นมา และใส่ Code ดังนี้
เสร็จปุ๊ป เอาวะ Run ใหม่ npm run dev
สวยงามครับ ขึ้นแล้วโว้ยยยย…จบไป 1 บท ไว้มาต่อครั้งต่อไปบทที่ 2 ละกันนะ
อ้างอิง
https://learnnextjs.com
https://github.com/doctoraod/sawatdee-next/tree/lesson1
สารบัญ
- บทที่ 1 Setup
- บทที่ 2 Routing
- บทที่ 3 Shared Components
- บทที่ 4 Dynamic Pages
- บทที่ 5 Route Masking (Coming soon…)
