รู้จัก Nextjs (open-source React framework)

Next js เป็น open-source React framework nextjs มีความสามารถในการทำ server side rendering (ssr) รวมถึง built in dep อย่าง route, image

Next.js by Vercel - The React Framework

Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build static and dynamic websites and web applications.

The React Framework

• Client Side Rendering (CSR)
• Server Side Rendering (SSR)
• Static Site Generation (SSG)

server side rendering (ssr) คือ ช่วยในเรื่อง SEO หรือ search engine optimization เพราะมีการประมวลผลฝั่ง server ให้การส่ง website กลับมายัง client ทำให้ส่งผลดีกับพวก bot อย่าง google

Static Site Generation (ssg) คล้ายกับ server side rendering ต่างกันที่ระหว่างการ build NextJS จะเรียกใช้ฟังก์ชั่นคือ

• getStaticPaths เพื่อสร้าง dynamic route
• getStaticProps เพื่อดึงข้อมูล จากนั้นจะสร้าง HTML File

เมื่อ build เสร็จเรียบร้อยเราก็จะได้ชุดของไฟล์ HTM File

Client Side Rendering (CSR) เวลาเราเปิด website ข้อมูลแรกที่บราวเซอร์ได้รับจะมีเพียง HTML Template Layout , Js  จะยังไม่มีการแสดงผลข้อมูล จากนั้นเจ้าตัว  Framework/Library ที่เราเลือกใช้อาจจะเป็น nextjs จะมีการ request (REST JSON หรือ GraphQL ) เพื่อขอข้อมูลสำหรับแสดงผลหน้า website ของเรา

มาดูวิธี setup project nextjs คร่าวๆกัน

Getting Started: Installation

Create a new Next.js application with `create-next-app`. Set up TypeScript, styles, and configure your `next.config.js` file.

Next.js

ก่อนอื่น ติดตั้ง package

แบบแรกติดตั้งผ่าน create-next-app

npx create-next-app@latest

เราสามารถติดตั้งผ่าน create-next-app

แบบที่สองติดตั้งแบบ install เอง

ก่อนอื่นสร้าง folder สำหรับ project

mkdir first-app
cd first-app

ติดตั้ง package ที่จำเป็นของ NextJs

init -y

npm install next@latest react@latest react-dom@latest

เปิดไฟล์ package.json เพิ่ม command ในส่วนของ scripts

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

• dev: runs next dev to start Next.js in development mode.
• build: runs next build to build the application for production usage.
• start: runs next start to start a Next.js production server.
• lint: runs next lint to set up Next.js' built-in ESLint configuration.

จากนั้นให้เราสร้าง folder ชื่อ pages

mkdir pages

สร้างไฟล์ index.js ใน folder ชื่อ pages

export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

เพียงเท่านี้ project ของเราก็พร้อม run แล้ว

npm run dev

เปิด localhost:3000 แล้วจะเจอหน้า web ประมาณนี้

ฟรีเจอร์อื่นๆ สามารถดูเพิ่มได้ที่ document NextJs

Docs

Welcome to the Next.js Documentation.

Next.js