Next.js Setup

Day 2 - ชั่วโมงที่ 1: From Static HTML to Next.js Project

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

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

1. เข้าใจว่า Next.js คืออะไร และทำไมจึงใช้ต่อจาก HTML/CSS static prototype
2. เห็นภาพว่า index.html จาก Day 1 จะถูกย้ายไปเป็น src/app/page.tsx
3. สร้าง Next.js project ด้วย TypeScript ได้
4. เข้าใจโครงสร้างไฟล์พื้นฐานของ Next.js App Router
5. เปิด development server และดูหน้าเว็บใน browser ได้
6. แก้ไขหน้าแรกของ Next.js ได้เล็กน้อย
7. เข้าใจว่า HTML, CSS และ TypeScript จะเข้าไปอยู่ตรงไหนใน Next.js project

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

คำสั่งสร้าง project ให้รันใน terminal

ไฟล์หลักที่แตะในชั่วโมงนี้:

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

ถ้า slide เป็นหน้าแรก ให้ระบุ:

File: src/app/page.tsx

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

Slide 1: Recap จาก Day 1

Day 1 เราสร้างอะไร

• Static HTML page
• Form สำหรับแจ้งปัญหา IT
• Static issue list
• Status badge
• CSS layout และ responsive เบื้องต้น
• GitHub repository

สิ่งที่ Day 1 ยังไม่มี

• ข้อมูลยังเขียนอยู่ใน HTML โดยตรง
• ยังไม่มี component
• ยังไม่มี routing แบบ web application
• ยังไม่มี TypeScript data model
• ยังไม่มี backend
• ยังไม่มี database

Key Message

Day 1 คือ static prototype ส่วน Day 2 เราจะเริ่มย้าย prototype นี้เข้า framework ที่ใช้สร้าง web application จริง

Slide 2: ทำไมไม่หยุดที่ HTML/CSS

HTML/CSS เพียงพอสำหรับ

• หน้าแนะนำหน่วยงาน
• หน้าเอกสารประกาศ
• หน้า contact
• หน้า static content

แต่ระบบของฝ่าย IT ต้องการมากกว่านั้น

• มีหลายหน้า
• มีข้อมูลหลายรายการ
• มี form ที่ต้องบันทึกข้อมูล
• มี role user/admin
• มี login
• มี database
• มี logic เช่น filter, validate, update status

Key Message

เมื่อเว็บเริ่มมีข้อมูลและ workflow เราควรย้ายจาก static page ไปเป็น web application

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

Next.js คือ Framework สำหรับสร้าง Web Application

Next.js สร้างอยู่บน React และช่วยให้เราทำสิ่งเหล่านี้ได้ง่ายขึ้น:

• Routing
• Page layout
• Component
• Server-side rendering
• API หรือ server actions
• เชื่อมต่อ database
• Authentication
• Deployment

ภาพจำง่าย ๆ

flowchart LR
  step0["HTML/CSS static page"]
  step1["React component"]
  step2["Next.js application"]
  step0 --> step1
  step1 --> step2

Key Message

Next.js ไม่ได้มาแทน HTML/CSS แต่เอา HTML/CSS/TypeScript มาใช้ในรูปแบบที่เหมาะกับ application มากขึ้น

Slide 4: จาก index.html ไปเป็น page.tsx

Day 1

index.html
styles.css

Day 2

src/
  app/
  page.tsx
  layout.tsx

แนวคิด

flowchart LR
  step0["HTML structure เดิม"]
  step1["JSX ใน page.tsx"]
  step0 --> step1

Speaker Notes

ผู้เรียนไม่จำเป็นต้องเข้าใจ React ลึกทันที แต่ต้องเห็นว่า syntax หน้าตาคล้าย HTML มาก เพียงแต่ตอนนี้เราเขียนอยู่ในไฟล์ .tsx

Slide 5: JSX และ TSX คืออะไร

JSX

Syntax ที่ให้เราเขียน UI คล้าย HTML ใน JavaScript

TSX

JSX ที่ใช้ร่วมกับ TypeScript

ตัวอย่าง:

export default function HomePage() {
  return (
  <main>
    <h1>ระบบแจ้งปัญหา IT</h1>
    <p>แจ้งและติดตามปัญหาการใช้งานระบบภายใน</p>
  </main>
  );
}

จุดที่ต่างจาก HTML

• ใช้ className แทน class
• tag ส่วนใหญ่ยังคล้าย HTML
• ต้อง return UI จาก function
• ใช้ {} เพื่อแทรก JavaScript/TypeScript expression

Slide 6: เตรียมสร้าง Next.js Project

Software ที่ควรมี

• Node.js LTS
• npm
• VS Code
• Git
• Browser

ตรวจ version

node -v
npm -v
git --version

หมายเหตุสำหรับผู้สอน

ควรตรวจเครื่องผู้เรียนก่อนเริ่ม Day 2 หรือเตรียม starter repo สำรองไว้ เพราะขั้นตอน setup มักกินเวลาเกินคาด

Slide 7: สร้าง Next.js Project

คำสั่ง

ตำแหน่งที่รันคำสั่ง

รันใน folder ที่ต้องการเก็บ project เช่น folder งาน bootcamp ไม่ต้องรันใน project เดิมของ Day 1

npx create-next-app@latest it-issue-report

ตัวเลือกที่แนะนำ

TypeScript: Yes
ESLint: Yes
Tailwind CSS: No
src/ directory: Yes
App Router: Yes
Import alias: Yes

คำแนะนำสำหรับคอร์สนี้

สำหรับ flow นี้ แนะนำเลือก:

Tailwind CSS: No

เพราะ Day 2 จะย้าย CSS จาก Day 1 เข้า globals.css ก่อน เพื่อให้ผู้เรียนเห็นความต่อเนื่องจาก static prototype แล้วค่อยเริ่ม Tailwind ใน Day 3

Slide 8: เข้า Project และเปิด Dev Server

ตำแหน่งที่รันคำสั่ง

รันต่อจาก Slide 7 หลังสร้าง project เสร็จ โดยเข้าไปใน folder project ก่อน

cd it-issue-report
npm run dev

จากนั้นเปิด browser:

http://localhost:3000

สิ่งที่ควรเห็น

• หน้าเริ่มต้นของ Next.js
• terminal แสดงว่า dev server ทำงานอยู่
• เมื่อแก้ code หน้าเว็บ refresh ได้

Speaker Notes

ถ้า port 3000 ถูกใช้แล้ว Next.js อาจเสนอ port อื่น เช่น 3001 ให้ผู้เรียนดู output ใน terminal เสมอ

Slide 9: โครงสร้างไฟล์หลังสร้าง Project

ตัวอย่าง:

it-issue-report/
  src/
  app/
    favicon.ico
    globals.css
    layout.tsx
    page.tsx
  public/
  package.json
  tsconfig.json
  next.config.ts

ไฟล์ที่ควรรู้วันนี้

• src/app/page.tsx
• src/app/layout.tsx
• src/app/globals.css
• package.json
• tsconfig.json

Slide 10: page.tsx คืออะไร

page.tsx

คือไฟล์ที่สร้างหน้าเว็บของ route หนึ่ง ๆ

src/app/page.tsx -> /

ตัวอย่าง

File

src/app/page.tsx

ตำแหน่งที่แก้

ตัวอย่างนี้คือเนื้อหาของ function หน้าแรก ไม่ใช่ code ที่ต้องเพิ่มต่อท้ายไฟล์

export default function HomePage() {
  return (
  <main>
    <h1>ระบบแจ้งปัญหา IT</h1>
    <p>หน้าแรกของระบบแจ้งปัญหา</p>
  </main>
  );
}

Key Message

ใน App Router ของ Next.js ไฟล์ชื่อ page.tsx คือหน้าที่ผู้ใช้เปิดดูได้

Slide 11: layout.tsx คืออะไร

layout.tsx

คือโครงหลักที่ครอบ page ต่าง ๆ

File

src/app/layout.tsx

ตำแหน่งที่ใช้

ตัวอย่างนี้คือโครงของไฟล์ layout.tsx ทั้งไฟล์ ใช้อธิบาย concept ก่อน ยังไม่จำเป็นต้องแก้ถ้า project ที่สร้างมามี layout อยู่แล้วและ lang ถูกต้อง

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

ใช้ทำอะไร

• ตั้งค่า <html lang="th">
• ใส่ font
• ใส่ global layout
• ใส่ navigation ที่ใช้ร่วมกันทุกหน้า

Speaker Notes

ยังไม่ต้องอธิบาย React.ReactNode ลึกในชั่วโมงนี้ บอกแค่ว่า children คือเนื้อหาของ page ที่ถูกนำมาแสดงใน layout

Slide 12: globals.css คืออะไร

globals.css

คือ CSS ที่ใช้กับทั้ง application

File

src/app/globals.css

ตำแหน่งที่ใช้

ตัวอย่างนี้คือ CSS global ที่สามารถวางใน src/app/globals.css ได้ แต่ในชั่วโมงนี้ให้ใช้เพื่ออธิบายก่อน ยังไม่ต้องย้าย CSS ทั้งหมดจนถึงชั่วโมงถัดไป

ตัวอย่าง:

* {
  box-sizing: border-box;
}
 
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background:  f6f7fb;
  color:  111827;
}

เชื่อมกับ Day 1 อย่างไร

CSS ที่เราเขียนใน styles.css จาก Day 1 สามารถย้ายมาบางส่วนไว้ใน globals.css ได้

Slide 13: package.json คืออะไร

package.json

ไฟล์ที่บอกข้อมูล project และ scripts ที่ใช้รันคำสั่ง

ตัวอย่าง scripts:

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

หมายเหตุ: script บางตัว เช่น lint อาจต่างกันตาม version ของ Next.js และตัวเลือกตอนสร้าง project ให้ผู้เรียนดู package.json จริงในเครื่องเป็นหลัก

คำสั่งที่ใช้บ่อย

npm run dev
npm run build

Key Message

เวลาเห็นคำสั่ง npm run ... ให้ไปดูได้ใน package.json ว่ามันรันอะไรจริง ๆ

Slide 14: แก้หน้าแรกของ Next.js

เปิดไฟล์

src/app/page.tsx

แทนที่เนื้อหาเดิมด้วย

ใช้ code นี้แทนเนื้อหาทั้งไฟล์ src/app/page.tsx ในขั้นตอนแรก

export default function HomePage() {
  return (
  <main>
    <h1>ระบบแจ้งปัญหา IT</h1>
    <p>แจ้งและติดตามปัญหาการใช้งานระบบภายใน</p>
  </main>
  );
}

ตรวจใน browser

หลังบันทึกไฟล์ หน้าเว็บควรเปลี่ยนทันที

Slide 15: จุดต่างสำคัญระหว่าง HTML กับ TSX

class ต้องเปลี่ยนเป็น className

HTML:

<section class="panel">

TSX:

<section className="panel">

Inline style เป็น object

HTML:

<main style="padding: 24px;">

TSX:

<main style={{ padding: "24px" }}>

ต้องปิด tag ให้ครบ

<input name="title" />

Slide 16: โค้ดสุดท้ายของ src/app/page.tsx หลังชั่วโมงนี้

ขั้นตอน

1. สร้าง Next.js project
2. รัน npm run dev
3. เปิด http://localhost:3000
4. แก้ src/app/page.tsx
5. เปลี่ยนหน้าแรกให้มี:

- ชื่อระบบ

- คำอธิบายสั้น ๆ

- หัวข้อ “แจ้งปัญหาใหม่”

- ข้อความ placeholder ว่าจะย้าย form จาก Day 1 มาที่นี่

ตัวอย่าง

File

src/app/page.tsx

ตำแหน่งที่แก้

ใช้ตัวอย่างนี้แทน function HomePage จาก Slide 14 เพื่อเพิ่ม section placeholder สำหรับ form

export default function HomePage() {
  return (
  <main>
    <h1>ระบบแจ้งปัญหา IT</h1>
    <p>แจ้งและติดตามปัญหาการใช้งานระบบภายใน</p>
 
    <section>
      <h2>แจ้งปัญหาใหม่</h2>
      <p>เราจะย้าย form จาก Day 1 มายังส่วนนี้</p>
    </section>
  </main>
  );
}

Slide 17: ถ้าเจอ Error ต้องดูตรงไหน

จุดที่ควรตรวจ

• terminal ที่รัน npm run dev
• browser error overlay
• ชื่อไฟล์และตำแหน่งบรรทัด
• tag ปิดครบไหม
• ใช้ class แทน className หรือไม่
• return JSX ครอบด้วย element เดียวหรือไม่

ตัวอย่างปัญหาที่พบบ่อย

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

ต้องครอบด้วย element เดียว:

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

Slide 18: HTML/CSS/TypeScript อยู่ตรงไหนใน Next.js

flowchart LR
  step0["HTML structure"]
  step1["JSX/TSX ใน page.tsx หรือ component"]
  step0 --> step1

Key Message

Next.js คือพื้นที่ที่ทุกอย่างจะมาเชื่อมกัน ไม่ใช่สิ่งที่แยกออกจาก HTML/CSS/TypeScript

Slide 19: สิ่งที่จะทำในชั่วโมงถัดไป

ชั่วโมงที่ 2

เราจะย้าย static prototype จาก Day 1 เข้า Next.js:

• Header
• Form แจ้งปัญหา
• Issue list
• Status badge
• CSS จาก styles.css ไป globals.css

เป้าหมาย

หน้า Next.js ควรมีหน้าตาใกล้เคียงกับ static page เดิม

Slide 20: Recap ชั่วโมงแรกของ Day 2

สิ่งที่ได้เรียน

• Next.js คือ framework สำหรับสร้าง web application
• Static HTML สามารถย้ายเป็น TSX ได้
• page.tsx คือหน้าเว็บของ route
• layout.tsx คือ layout หลัก
• globals.css คือ global style
• package.json เก็บ scripts ของ project
• npm run dev ใช้เปิด development server

ต่อไป

เราจะ convert งาน Day 1 จาก HTML/CSS static prototype เข้า Next.js project ที่เพิ่งสร้าง

คำศัพท์สำคัญ