Next.js Setup

Day 2 - ชั่วโมงที่ 1: สร้าง Next.js Project

เป้าหมายของชั่วโมงนี้

หลังจบชั่วโมงแรกของ Day 2 ผู้เรียนควรสามารถ:

อธิบายได้ว่าทำไม Project ต้องขยับจาก Static HTML/CSS ไปเป็น Next.js
สร้าง Next.js Project ที่ใช้ TypeScript และ App Router ได้
เปิด Development Server และดูหน้าเว็บใน Browser ได้
เข้าใจหน้าที่ของ app/page.tsx, app/layout.tsx และ app/globals.css
แก้หน้าแรกของ Project และเห็นผลลัพธ์ได้

ไฟล์ที่ใช้ในชั่วโมงนี้

app/page.tsx
app/layout.tsx
app/globals.css
package.json

โครงสร้างเวลา 60 นาที

เวลา	หัวข้อ	รูปแบบ
0-10 นาที	เชื่อม Static Prototype เข้ากับ Next.js	อธิบาย
10-25 นาที	ตรวจเครื่องมือและสร้าง Project	ทำทีละขั้นตอน
25-40 นาที	เปิด Dev Server และอ่านโครงสร้างไฟล์	ทำทีละขั้นตอน
40-55 นาที	แก้หน้าแรกและตรวจผลลัพธ์	ทำทีละขั้นตอน
55-60 นาที	เตรียมย้ายงาน Day 1	ตรวจความพร้อม

Slide 1: จาก Static Prototype สู่ Web Application

Day 1 เราสร้างหน้า Static ที่มี:

Form แจ้งปัญหา
Issue List และ Status Badge
Responsive CSS
Source Code บน GitHub

แต่ข้อมูลยังเขียนอยู่ใน HTML โดยตรง และเมื่อ Submit แล้วรายการยังไม่เปลี่ยน

Day 2 เราจะเริ่มย้ายหน้าเดิมเข้า Next.js เพื่อเตรียมเพิ่ม TypeScript, Component, หลาย Route และข้อมูลที่เปลี่ยนแปลงได้

Slide 2: ทำไมไม่ใช้ `index.html` ต่อไป

Static HTML/CSS เหมาะกับหน้าที่เนื้อหาเปลี่ยนไม่บ่อย แต่ระบบแจ้งปัญหาของเราต้องเพิ่มความสามารถอีกหลายส่วน:

สิ่งที่จะเพิ่ม	ตัวอย่างใน Project
หลายหน้า	รายการปัญหา, สร้างปัญหา, รายละเอียด
Component	Form, Table, Status Badge
TypeScript	กำหนดรูปแบบข้อมูล Issue
Logic	ตรวจ Form และเปลี่ยนสถานะ
Server และ Database	บันทึกและอ่านข้อมูลจริง

Next.js ช่วยวางโครงให้ความสามารถเหล่านี้ทำงานร่วมกันเป็น Application เดียว

Slide 3: Next.js คืออะไร

Next.js คือ Framework ที่สร้างอยู่บน React สำหรับพัฒนา Web Application

สิ่งที่ Next.js เตรียมให้เรา เช่น:

สร้างหน้าจาก Folder และ File
ใช้ Component ร่วมกันหลายหน้า
เขียน UI ด้วย React และ TypeScript
ทำงานฝั่ง Server ได้
เตรียม Project สำหรับ Build และ Deploy

Next.js ไม่ได้ทำให้ HTML และ CSS หายไป แต่เปลี่ยนวิธีจัดวาง Code ให้รองรับ Application ที่ใหญ่ขึ้น

Slide 4: ไฟล์จาก Day 1 จะย้ายไปที่ไหน

Day 1	Day 2	หน้าที่
`index.html`	`app/page.tsx`	เนื้อหาหน้าแรก
`<html>` และ `<body>`	`app/layout.tsx`	กรอบหลักของ Application
`style.css`	`app/globals.css`	Style ที่ใช้ร่วมกัน

Hour นี้เราจะสร้าง Project และทำความรู้จักไฟล์ก่อน ส่วน Hour ถัดไปจึงค่อยย้าย Form, Issue List และ CSS เดิมเข้ามา

Slide 5: ตรวจ Node.js และ npm

เปิด Terminal แล้วรัน:

node -v
npm -v

Node.js คือ Runtime ที่ใช้รันเครื่องมือและ Server ของ Next.js
npm ใช้ติดตั้ง Package และเรียกคำสั่งของ Project

Next.js เวอร์ชันที่ใช้ในคอร์สต้องการ Node.js อย่างน้อย 20.9 หากคำสั่งไม่แสดง Version หรือ Version ต่ำกว่านี้ ให้ติดตั้ง Node.js LTS ก่อนสร้าง Project

Slide 6: สร้าง Next.js Project ใหม่

สร้าง Folder ว่างชื่อ it-issue-nextjs แยกจาก Static Project ของ Day 1 แล้วเปิด Folder ใหม่นี้ใน VS Code

เมื่อ Terminal อยู่ภายใน Folder it-issue-nextjs ให้รัน:

npx create-next-app@latest .

. หมายถึงให้สร้าง Project ลงใน Folder ปัจจุบัน จึงไม่สร้าง Folder ซ้อนเพิ่มอีกชั้น

เมื่อมีคำถาม ให้เลือก Yes, use recommended defaults เพื่อสร้าง Project พร้อม:

TypeScript
ESLint
Tailwind CSS
App Router
โครงสร้าง app/ ที่อยู่ระดับ Root โดยไม่มี src/

ระหว่างทำงาน npm จะดาวน์โหลด Package จึงต้องเชื่อมต่อ Internet

Slide 7: เปิด Dev Server

เราอยู่ใน Folder Project แล้ว จึงเปิด Development Server ได้ทันที:

npm run dev

เปิด URL ที่ Terminal แสดง โดยปกติคือ:

http://localhost:3000

เมื่อ Dev Server ทำงาน Terminal จะยังไม่กลับมาเป็นช่องรับคำสั่ง หากต้องการหยุด Server ให้กด Ctrl + C

หาก Port 3000 ถูกใช้งานอยู่ ให้เปิด Port อื่นที่ Next.js แสดงใน Terminal

Slide 8: โครงสร้างที่ต้องรู้ในวันนี้

หลังสร้าง Project จะเห็นไฟล์และ Folder ประมาณนี้:

it-issue-nextjs/
  app/
    globals.css
    layout.tsx
    page.tsx
  public/
  package.json
  tsconfig.json
  next.config.ts

วันนี้เราจะอ่านเฉพาะ page.tsx, layout.tsx, globals.css และ package.json ส่วน Folder และ Config อื่นเก็บไว้ใช้เมื่อ Project ต้องการ

Slide 9: `app/page.tsx` คือหน้า `/`

ใน App Router ไฟล์ page.tsx ใช้สร้างหน้าที่ผู้ใช้เปิดดูได้

app/page.tsx  →  http://localhost:3000/

Code ในไฟล์นี้เป็น React Component ที่ return UI ของหน้าแรก

export default function Home() {
  return <h1>ระบบแจ้งปัญหา IT</h1>;
}

Folder จะเป็นตัวกำหนดส่วนของ URL ส่วนไฟล์ชื่อ page.tsx ทำให้ URL นั้นเปิดเป็นหน้าเว็บได้

Slide 10: `app/layout.tsx` คือกรอบที่ครอบทุกหน้า

Root Layout เป็นไฟล์ที่ Next.js ต้องมี และต้องประกอบด้วย <html> กับ <body>

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

children คือตำแหน่งที่ Next.js นำเนื้อหาจาก page.tsx มาแสดง

ตอนนี้ให้ทำความเข้าใจโครงสร้างก่อน ยังไม่ต้องแทน Code ทั้งไฟล์ เพราะไฟล์ที่สร้างมามีการตั้งค่า Font และ Import CSS อยู่แล้ว

Slide 11: `app/globals.css` คือ Style ที่ใช้ร่วมกัน

globals.css ถูก Import จาก app/layout.tsx ทำให้ Style ภายในไฟล์มีผลกับทุกหน้าที่ Layout ครอบอยู่

import "./globals.css";

Project ที่สร้างพร้อม Tailwind จะมีบรรทัดนี้ใน app/globals.css:

@import "tailwindcss";

Hour ถัดไปเราจะลบบรรทัดนี้ออกชั่วคราว แล้วใช้ Custom CSS จาก Day 1 เพียงชุดเดียวก่อน ส่วน Tailwind Package ยังเก็บอยู่ใน Project และจะเริ่มใช้งานใน Day 3

Slide 12: `package.json` เก็บคำสั่งของ Project

เปิด package.json แล้วมองหาส่วน scripts:

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

เมื่อรัน npm run dev npm จะค้นชื่อ dev ในไฟล์นี้ แล้วเรียก next dev เพื่อเปิด Development Server

dependencies และ devDependencies ในไฟล์เดียวกันเก็บรายชื่อ Package ที่ Project ต้องใช้ จึงไม่ควรแก้ Version แบบสุ่ม

Slide 13: เปลี่ยนหน้าเริ่มต้นของ Next.js

แก้ทั้งไฟล์: app/page.tsx

export default function Home() {
  return (
    <main>
      <h1>ระบบแจ้งปัญหา IT</h1>
      <p>Next.js Project พร้อมใช้งานแล้ว</p>
    </main>
  );
}

หลังบันทึกไฟล์ Browser ควรแสดงเนื้อหาใหม่โดยไม่ต้องปิดและเปิด npm run dev อีกครั้ง

Slide 14: อ่าน TSX ชุดแรก

จาก Code ใน Slide ก่อนหน้า:

function Home() สร้าง Component ชื่อ Home
export default ทำให้ Next.js นำ Component นี้ไปใช้เป็นหน้าได้
return (...) ระบุ UI ที่ Component ต้องแสดง
Code ที่มีหน้าตาคล้าย HTML ภายใน TypeScript เรียกว่า TSX
TSX ต้องมี Element หลักหนึ่งตัวครอบเนื้อหาที่ Return ในตัวอย่างนี้คือ <main>

Hour ถัดไปเราจะเรียนความต่างระหว่าง HTML กับ TSX เพิ่มเติม เช่น className และ htmlFor ระหว่างย้ายหน้าเดิม

Slide 15: ตรวจความพร้อมก่อนย้าย Static Prototype

ก่อนจบ Hour นี้ ให้ตรวจว่า:

npm run dev ทำงานโดยไม่มี Error
Browser เปิดหน้าแรกของ Project ได้
หน้าแสดง “ระบบแจ้งปัญหา IT”
แก้ app/page.tsx แล้ว Browser อัปเดตตาม
Project ใช้ Folder app/ ที่ระดับ Root และไม่มี src/

Hour ถัดไปเราจะย้าย Header, Form, Issue List, Status Badge และ Footer จาก Day 1 เข้า app/page.tsx พร้อมย้าย CSS เข้า app/globals.css