Full-stack lab: Next.js + Express + PostgreSQL

Chapter นี้ไม่ได้ให้สร้าง React จากศูนย์ เราใช้ folder books-web ที่เตรียมไว้ แล้วตาม Request จริงจากปุ่มบนหน้าจอไปจนถึง PostgreSQL

flowchart LR
  N["Next.js + Tailwind\nhttp://localhost:3001"] -->|"fetch + JSON"| E["Express books-api\nhttp://localhost:3000"]
  E -->|"SQL"| P["PostgreSQL\nbooks_db"]
  E -->|"JWT token"| N

ก่อนเริ่ม: สอง server สองหน้าที่

Server	Port	หน้าที่
Express books-api	3000	API, JWT, SQL, PostgreSQL
Next.js books-web	3001	หน้าจอ Tailwind ที่คนใช้กด

เปิด Terminal สองหน้าต่าง:

# Terminal 1 — ใน books-api
npm run dev

# Terminal 2 — ใน books-web
npm install
npm run dev

Step 1: เปิด CORS ที่ Express

CORS คืออะไร

Browser มอง http://localhost:3001 และ http://localhost:3000 เป็นคนละ origin เพราะ port ต่างกัน แม้อยู่เครื่องเดียวกัน

Postman เรียก API ได้โดยไม่ติด CORS แต่ Browser จะบล็อกจนกว่า Express จะประกาศว่า “อนุญาตให้ Next.js เครื่องนี้เรียกได้”

ใน folder books-api ติดตั้ง:

npm install cors

ใน index.js เพิ่ม import ด้านบน:

import cors from "cors";

แล้ววาง middleware นี้ ก่อน app.use(express.json()) และก่อน routes:

app.use(cors({
  origin: "http://localhost:3001",
}));

app.use(express.json());

sequenceDiagram
  participant B as Browser :3001
  participant E as Express :3000
  B->>E: POST /auth/login
  E-->>B: Access-Control-Allow-Origin: :3001
  B->>E: request จริง
  E-->>B: JSON response

ถ้า Browser ขึ้น CORS error

ตรวจอะไร	คำตอบที่ควรเป็น
Next รัน port ไหน	3001
origin ใน Express	http://localhost:3001 ต้องตรงเป๊ะ
ตำแหน่ง app.use(cors(...))	ก่อน routes
หลังแก้ Express	restart npm run dev

เราใช้ Bearer token ไม่ใช้ cookie จึงยังไม่ต้องตั้ง credentials: true ในคาบนี้

Step 2: เปิด Next.js folder ที่เตรียมไว้

folder reference อยู่ที่:

fullstack-starter/books-web

ดาวน์โหลด Books Web Starter (.zip)

โครงสร้างสำคัญ:

books-web/
├─ app/register/page.js       # ฟอร์ม Register
├─ app/login/page.js          # Login และเก็บ token
├─ app/books/page.js          # รายการหนังสือ
├─ app/books/[id]/page.js     # รายละเอียด + Delete
├─ app/books/new/page.js      # เพิ่มหนังสือ
└─ components/Nav.js          # เมนูร่วม

Copy .env.local.example เป็น .env.local แล้วตั้ง:

# TODO: ต้องตรงกับ URL ของ Express books-api
NEXT_PUBLIC_API_BASE_URL=http://localhost:3000

คำว่า NEXT_PUBLIC_ จำเป็น เพราะทุกหน้าใช้ fetch() ใน Browser และ URL นี้ไม่ใช่ secret

Step 3: ดู fetch() ในหน้าที่ใช้งานจริง

ไม่ต้องมี helper folder เพิ่ม เด็กจะเห็น Request อยู่ในหน้าที่กดปุ่มนั้นเลย เช่น app/books/new/page.js:

const response = await fetch(`${API_BASE_URL}/books`, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${token}`,
  },
  body: JSON.stringify({ title, author, year }),
});

หน้าเว็บ	fetch() ไป Endpoint Express
app/register/page.js	POST /auth/register
app/login/page.js	POST /auth/login และคืน { token }
app/books/page.js	GET /books
app/books/[id]/page.js	GET /books/:id และ DELETE /books/:id + Bearer token
app/books/new/page.js	POST /books + Bearer token

Step 4: เพิ่ม book จากหน้า Next.js อย่างปลอดภัย

ในหน้า app/books/new/page.js Frontend อ่าน token จาก browser แล้วส่ง Bearer token:

headers: {
  Authorization: `Bearer ${token}`,
}

ดังนั้นใน books-api/index.js ให้แทนที่ POST /books เดิมที่เขียนลง JSON file ด้วย route นี้:

app.post("/books", verifyToken, async (req, res) => {
  const { title, author, year } = req.body;
  if (!title || !author) {
    return res.status(400).json({ error: "ต้องระบุ title และ author" });
  }

  try {
    const result = await pool.query(
      `INSERT INTO books (title, author, year, user_id)
       VALUES ($1, $2, $3, $4)
       RETURNING *`,
      [title, author, year ?? null, req.user.userId]
    );
    res.status(201).json(result.rows[0]);
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: "Database query failed" });
  }
});

จุดสำคัญ: user_id ต้องมาจาก req.user.userId ไม่ใช่ form บนหน้าเว็บ เพราะผู้ใช้แก้ค่าจาก Browser ได้

Step 5: Demo flow ที่ควรทำหน้าห้อง

1. เปิด /register สร้าง user
2. เปิด /login แล้วดูว่า Next เก็บ token เพื่อส่งกับ Request ถัดไป
3. เปิด /books ดูรายการจาก PostgreSQL
4. เปิด /books/new เพิ่มหนังสือ
5. เปิด pgAdmin แล้ว SELECT * FROM books; เพื่อเห็น row ใหม่และ user_id
6. เปิดรายละเอียด book แล้วกด Delete
7. เปิด Browser DevTools → Network แล้วชี้ Authorization: Bearer ...

Classroom note

ตัวอย่างนี้ใช้ localStorage เพื่อให้เห็น token ง่ายในคาบเท่านั้น Production ควรออกแบบการเก็บ token และ session ให้รัดกุมกว่านี้