前人智慧

⚛️ 前端開發

前端開發

<aside> 📌

以下為 Next.js App Router + Server Actions 進階講義。上半部資料庫的章節以 Page Router 為主；讀完基礎後再進這裡，銜接 2026 主流全端寫法。

</aside>

🌟 App Router

https://github.com/Chen11111112/nextjs-fullstack-dailycourse.git

Next.js 13+ 引入 App Router，以 app/ 資料夾取代 pages/。資料夾結構直接決定 URL。

使用指令創建最新版Next.js專案:npx create-next-app@latest [my-app]

[my-app] 請替換成你實際專案的名稱

app/
├── page.tsx          → /
├── about/
│   └── page.tsx      → /about
├── blog/
│   ├── page.tsx      → /blog
│   └── [slug]/
│       └── page.tsx  → /blog/hello-world
└── layout.tsx        → 共用外殼（navbar 等）

Page Router（已學）	App Router（本節）
`pages/` 資料夾	`app/` 資料夾
`useRouter` from `next/router`	`useRouter` from `next/navigation`
`_app.tsx` 全域佈局	`layout.tsx` 巢狀佈局
預設 Client 為主	預設 Server Component

Server Component vs Client Component

App Router 最大改變莫過於讓元件預設在伺服器執行，只有需要互動(useState等Hook)的才標記 'use client'。

	Server Component（預設）	Client Component
執行位置	伺服器	瀏覽器
能用 Hook？	❌ useState / useEffect	✅ 全部 Hook
能直接打 DB？	✅	❌ 需透過 API / Server Action
典型用途	讀資料、靜態 UI	按鈕、表單、動畫

// app/users/page.tsx — Server Component（不用寫 'use client'）
export default async function UsersPage() {
  const res = await fetch('<https://jsonplaceholder.typicode.com/users>');
  const users = await res.json();
  return (
    <ul>{users.map((u: any) => <li key={u.id}>{u.name}</li>)}</ul>
  );
}

// components/Counter.tsx — Client Component
'use client';
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

目錄

前人智慧

⚛️ 前端開發

🌟 App Router

Server Component vs Client Component