เริ่ม React โปรเจ็คอย่างรวดเร็วด้วย Next.js

Nextjs เป็นอีกขั้นของการสร้าง ReactJS เนื่องจากมันสร้างโปรเจ็คได้เร็วมาก แถม Component ที่ให้มาก็มีครบถ้วน ที่เด็ดกว่านั้นคือมันทำ SSR (Server Side Rendering) มาให้ตั้งแต่แรกด้วยนะ ไม่ต้องมาเสียเวลา Setup ให้ยุ่งยาก

มาดูกันดีกว่า ว่ามันเริ่มโปรเจ็คง่ายขนาดไหน

mkdir my_project_name
cd mm_project_name
npm init -y
npm install --save next react react-dom

บรรทัดแรกเป็นการสั่งให้มันสร้าง Folder ด้วยชื่ออะไรก็ได้ตามที่เราต้องการ

บรรทัดที่ 2 คือการสั่งเข้าไปใน folder ที่เราพึ่งสร้างมา

คำสั่ง npm init -y จะเป็นการสร้าง package.json ขึ้นมาก่อน จากนั้นเราจึงพิมพ์คำสั่งในการ Add Next เข้าไปใน Folder Project ของเรา

ในไฟล์ package.json เพิ่ม script นี้ลงไปครับ

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

หลังจากนั้นเราจะสร้าง Folder ชื่อ pages ใน root directory นะครับ ใน pages ให้สร้าง index.js ขึ้นมา

ในไฟล์ index.js เพิ่มโค้ดที่จะให้มัน hello world สักหน่อยครับ คำยอดนิยม ฮ่า ๆ

export default () => <div> Hello world </div>

WARNING: ต้องเป็น folder ชื่อ pages เท่านั้นนะครับ เพราะ Next.js เค้ากำหนดมาครับ ใน folder นี้ ถ้าไม่มี folder pages มันจะ error นะะะะะะ ทุกไฟล์ที่สร้างจะเป็นหน้าที่ route ผ่าน url ได้หมดเลยนะครับ เช่น ไฟล์ index.js เราก็จะเข้าถึงได้โดย localhost:3000/ , ไฟล์ชื่อ about.js เราก็จะเข้าผ่าน localhost:3000/about

ลองสั่ง

npm run dev

เราก็จะได้ Hello world แล้วจ้า

ต่อไปสร้างไฟล์ ชื่อ about.js ในไฟล์ มีหน้าตาแบบนี้

export default () => <div> About Page </div>

ลองเข้าหน้า about ง่าย ๆ แค่เปลี่ยน url เป็น localhost:3000/about

เห็นไหมครับ มันทำ Route ให้เลย สบาย ๆ อิอิ ทีนี้กลับมาที่ index.js ครับ เราจะทำให้มันกดอะไรสักอย่างแล้ว ไปหาหน้า about

import Link from 'next/link'

export default () => (
<div>
   Hellow world
   <Link href="/about">
       Go to about Page
   </Link>
</div>
)

เราจะได้หน้าตาแบบนี้จ้าาา

กดตรง Go to about page มันก็จะพาเราไปสู่หน้า about page

ต่อไปเราจะพูดถึง function ที่ Next.js ทำมาเพื่อ serverSide Render กัน นั้นก็คือ

getInitialProps()

ในไฟล์ index.js เปลี่ยนโค้ดเป็นแบบนี้ครับบบบ (ลองหา api อื่นๆ ที่ต้องการมาเล่นดูนะ)

import 'isomorphic-fetch'
const Index = (props) => (
     <div> 
         Title is : {props.videoTitle}
     </div>
)
Index.getInitialProps = async () => {
    const res = await fetch('https://api.avgle.com/v1/video/5824')
    const json = await res.json()
    return { videoTitle: json.response.video.title }
}
export default Index

ถ้าเราทำการคลิกขวาแล้วกด View Source ดู จะต้องพบกับข้อมูลที่ server ส่งมาให้ จะไม่เจอกับ html เปล่า ๆ

จะเห็นได้ว่า Next.js เหมาะกับการขึ้นโปรเจ็คจริง ๆ ไหนจะเรื่องการทำ SEO ที่ง่าย การ setup โปรเจ็คที่ง่ายเริ่มได้เร็ว และ ยังเขียนแบบ React ใช้ component เสริมต่าง ๆ ก็ได้ตามปกติเหมือน ReactJS ทั่วไป Learning Curve ไม่สูงมาก และ ง่ายต่อการเขียนจริง ๆ ครับ สำหรับ NextJS