ตอนที่ 1 - Hello Next.js เริ่มสร้างโปรเจ็ค

สวัสดีครับ มาเริ่มตอนแรกกันด้วย Next.js คืออะไร และการขึ้นโปรเจ็ค Next.js กันครับ

Next.js คืออะไร?

Next.js เป็น React Framework ที่ช่วยให้เราทำงานสะดวกขึ้น เขียนเว็บได้ง่ายขึ้น พร้อมสำหรับการใช้งานจริงๆ โดยที่ไม่ต้อง config อะไรมากมาย เช่น

• Pre-rendering - โดยปกติแล้วตัว Next.js จะมี pre-renders มาทุกๆหน้าอยู่แล้ว คือตัว Next.js จะ generate HTML มาให้ส่วนนึง
• Image Optimization - ช่วยเรื่องจัดการ Performance รูปเราได้
• i18n - หรือ Internationalization รองรับหลายภาษา เป็น Built-in โดยไม่ต้องติดตั้ง library อื่นๆเพิ่ม (หรือสามารถใช้ 3rd Party อื่นๆ ก็ได้เช่นกัน)
• Zero Config - ข้อดีคือ ไม่ต้องทำอะไรตัว Next.js จัดการให้หมด ทั้ง auto compile, bundle, optimized พร้อมขึ้น Production ได้เลย
• SSG และ SSR - สามารถ Pre-render ตอน Built time (SSG) หรือจะ Server Side Rendering ก็ได้
• File-system Routing - สามารถจัดการ Routing ง่ายๆ ด้วยการสร้าง components ในโฟลเดอร์ pages
• TypeScript - รองรับ Typescript
• API Routs - รองรับการทำ API Endpoint และ Middlewares

คือถ้าคุณเขียน React.js เป็นปกติอยู่แล้ว และไม่เคยเขียน Next.js มาก่อน ก็ไม่ใช่เรื่องยากครับ ยังคงมองทุกอย่างเป็น Component ส่วน Routing ปกติถ้า React ก็จะเป็น Client-Side ใช้ React Router แต่พอเป็น Next.js ก็จะเป็น File-System Base ครับ ส่วน Features อื่นๆ ก็ค่อยๆเรียนรู้ อ่าน Document เพิ่ม ก็สามารถใช้งาน Next.js ได้แล้วครับ

คุณสามารถเรียนจากเว็บของ Next.js โดยตรงได้เลยครับ Next.js - Learn มีคำอธิบายและมี Quiz เล็กๆน้อยๆ ให้เราตอบคำถามครับ

Step 1 - Getting Started

ก่อนเริ่มเขียน Next.js สิ่งที่ทุกคนควรจะมีหรือรู้มาก่อน ก็คือ

• พื้นฐาน HTML & CSS & JS เบื้องต้น เคยเขียนเว็บมาบ้าง
• พื้นฐาน React.js หรือเคยเขียน React.js มาก่อน
• มีความรู้ JavaScript หรือ TypeScript
• มี Node.js บนเครื่องแล้ว จริงๆ ถ้าเขียน React.js ก็น่าจะมีมาแล้ว :)

ถ้าพร้อมแล้ว ก็ไปลุยกันเลยครับ

การสร้างโปรเจ็คด้วย Next.js ทำได้ 2 แบบคือ Install ด้วย NPM ปกติ หรือใช้ create-next-app ครับ สำหรับบทความนี้เราจะใช้ create-next-app กันครับ

npx create-next-app

หรือหากใช้ Yarn หรือ pnpm ก็ใช้คำสั่งนี้

yarn create next-app

# PNPM
pnpm create next-app

ตัว Project จะเป็นเวอร์ชั่น JavaScript นะครับ หากเราอยากให้ Next.js ของเรา เป็นแบบ TypeScript เราสามารถใส่ option --ts หรือ `--typescript`` ให้มันได้ เช่น

npx create-next-app@latest --ts

สร้างโปรเจ็ค Next โดยตั้งชื่อโปรเจ็คว่า hello-next

npx create-next-app@latest hello-next

หากตัว create-next-app มีเวอร์ชั่นใหม่กว่า ที่เราไม่ได้ติดตั้งในเครื่อง มันจะมี Prompt ขึ้นมาถามเราว่า Process หรือไม่ ก็ตอบ Yes (y) ครับ

Need to install the following packages:
  create-next-app@12.1.6
Ok to proceed? (y)

จากนั้น รอ create-next-app ทำการติดตั้ง Dependencies เมื่อเสร็จแล้ว เราจะเห็นข้อความ Success! และก็มี Guide แนะนำครับ

Success! Created hello-next at /hello-next
Inside that directory, you can run several commands:

  yarn dev
    Starts the development server.

  yarn build
    Builds the app for production.

  yarn start
    Runs the built app in production mode.

We suggest that you begin by typing:

  cd hello-next
  yarn dev

เราจะได้ folder hello-next ข้างในมีไฟล์ตามด้านล่างครับ

├── README.md
├── next.config.js
├── package.json
├── pages
│   ├── _app.js
│   ├── api
│   │   └── hello.js
│   └── index.js
├── public
│   ├── favicon.ico
│   └── vercel.svg
├── styles
│   ├── Home.module.css
│   └── globals.css
└── yarn.lock

Change directory เข้าไปที่ folder hello-next แล้วลอง start server ขึ้นมา ด้วยคำสั่ง

cd hello-next

yarn dev
# หรือ npm run dev

โดย Default ตัว create-next-app จะใช้ Yarn แต่หากเราต้องการให้ใช้ npm เราสามารถกำหนด option --use-npm ได้ครับ เช่น npx create-next-app hello-next --use-npm

ตัว server เรา จะ start ที่ port 3000 ครับ ทดลองเปิด Browser http://localhost:3000

yarn run v1.22.18
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000

จะได้หน้าตาเริ่มต้นของ Next.js แบบนี้

ทดลองแก้ไขข้อความหน้า Starter Page ซักหน่อย (โดย Next.js ยังรันอยู่นะครับ yarn dev)

แก้ไขไฟล์ pages/index.js เปลี่ยนคำ หรือเพิ่ม content Ahoy! ลงไป หรือใส่อะไรก็ได้ แล้วแต่เราเลย

<h2>Ahoy!</h2>

จะเห็นว่าหน้าเว็บเราเปลี่ยน โดยที่ไม่ต้อง Refresh เลย (เป็นข้อดีของ Next.js เรื่องของ Fast Refresh นั่นเอง)

🎉 จบแล้วครับ สำหรับตอนที่ 1

ในตอนต่อไป เราจะมาพูดถึง Routing การสร้าง Page และการ navigate ระหว่าง Page กันนะครับ ซึ่งตัวโค๊ดที่ถูก generate จาก create-next-app เราจะได้ code นี้ในตอนที่ 1-3 ครับ

แบบฝึกหัด

• ลองปรับแก้ไข HTML หรือปรับแต่ง CSS
• แม้ว่าจะยังไม่ได้เรียนเรื่อง CSS แต่ถ้าดูโค๊ดตัว starter เราจะสามารถปรับแต่ง CSS ได้มั้ย? ลองทำดูครับ
• ลองสร้าง Component ขึ้นมา และทำการ import Component มาใช้ในหน้า index