# Next 加碼課

頁面連結：https://hackmd.io/FS2-SN_3R2W3x4Zwk3hIGw

## 一、建置 Next 環境

安裝：https://nextjs.org/docs/app/getting-started/installation

✔ What is your project named? … 專案名稱
✔ Would you like to use TypeScript? … No / Yes 是否使用 TS
✔ Would you like to use ESLint? … No / Yes 是否使用 ESLint
✔ Would you like to use Tailwind CSS? … No / Yes 是否預設 Tailwind
✔ Would you like your code inside a `src/` directory? … No / Yes 預設原始碼目錄
✔ Would you like to use App Router? (recommended) … No / Yes 使用應用程式路由
✔ Would you like to use Turbopack for `next dev`? … No / Yes 使用 Turopack
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
  可自訂匯入的縮寫
✔ What import alias would you like configured? … @/*
  預設使用 @ 可以對應 src 路徑

- Turbopack：在 Next.js 中，**Turbopack** 是一個用於開發環境的**超快速增量式打包器**（incremental bundler）。它是由 Vercel 開發，用來取代 Webpack

### 專案結構

**頂層資料夾**

- .next：**編譯後**的程式碼、快取、靜態資源、SSR 頁面輸出
- node_modules
- public：靜態資源
- src：原始碼資料夾

**頂層設定檔**

- next.config.js：Next.js 的設定檔
- package.json：
- .env：環境變數
- .env.local：本機環境變數
- .eslintrc.json：ESLint 的設定檔案
- .gitignore：Git 忽略的 Git 檔案和資料夾
- jsconfig.json：JavaScript 的設定檔

## 此階段的關鍵重點

Next.js 是一個 SSR 的工具，可以按右鍵檢視原始碼
預設情況下，Next.js **是以 Server Component 為預設**

## 二、路由

### src 內路由檔案

預設情況下，是使用 App Router
在 src 以及其資料夾內的檔案，會依據命名決定它的用途

> src 內的其他檔案，可以[參考](https://nextjs.org/docs/app/getting-started/project-structure#src-directory)
>
- layout .js .jsx .tsx Layout 佈局
- page .js .jsx .tsx **頁面內容**
- loading .js .jsx .tsx 載入 UI
- not-found .js .jsx .tsx Not found UI
- error .js .jsx .tsx Error UI
- route .js .ts API endpoint

### **Layout 基本**

- Layout 內必定需要一個 Children
- 可使用 export metadata，這會被直接渲染在 html 上
- 也能夠在 `head` 標籤內加入，不過渲染時就會出現兩個相同標籤
- 可以搭配巢狀結構建立 Layout
- 如果需要定義 metaData，則建議使用 `export const metadata` 或 `generateMetadata`
範例：

    export const metadata = {
      title: '這是前台',
    };
    
    function HomeLayout({ children }) {
      return (
        <>
          <h1>這是 前台</h1>
          {children}
        </>
      );
    }
    
    export default HomeLayout;

- 特定版面的 Layout ，如果不想要展示其路由，則可以使用 [Group Routing](https://nextjs.org/docs/app/building-your-application/routing/route-groups)
如以下的配置方式，在 [`http://localhost:3000/`](http://localhost:3000/) 就能開啟首頁，不需要進入 home 路由下

**因此常見的資料夾結構為：**

my-next-project/          # Next.js 自定義專案根目錄
│── .next/                # Next.js 編譯輸出與快取 (應該被 gitignore)
│── node_modules/         # 安裝的 npm 套件
│── public/               # 靜態資源 (不經 Webpack 處理，直接被提供)
│   ├── favicon.ico       # 網站圖示
│   ├── images/           # 靜態圖片
│   ├── fonts/            # 字體檔案
│   └── robots.txt        # SEO 設定
│── src/                  # 主要程式碼 (推薦)
│   ├── app/              # Next.js App Router
│   │   ├── layout.js     # 全域佈局
│   │   ├── page.js       # 根頁面 ("/")
│   │   ├── loading.js    # 內建 loading 狀態 (可選)
│   │   ├── error.js      # 錯誤處理頁面 (可選)
│   │   ├── about/        # `/about` 頁面
│   │   │   ├── page.js   # `/about` 頁面
│   │   ├── dashboard/    # `/dashboard` 頁面
│   │   │   ├── layout.js # 子佈局 (僅作用於 dashboard 內頁)
│   │   │   ├── page.js   # `/dashboard`
│   │   │   ├── settings/ # `/dashboard/settings`
│   │   │   │   ├── page.js
│   ├── components/       # 共用元件
│   ├── hooks/            # React hooks
│   ├── lib/              # 共用函式庫（API 請求、環境變數處理等）
│   ├── styles/           # CSS / Tailwind / SCSS
│   ├── utils/            # 工具函式
│── .env                  # 環境變數
│── .gitignore            # Git 忽略清單
│── next.config.js        # Next.js 設定檔
│── package.json          # 專案依賴與腳本

### 元件

可以將共用元件建置在 `src/components` 內，作為專案統一使用.

常見的專案資料夾結構：

### Link

在 Next.js 中，可以引入 [Link](https://nextjs.org/docs/app/api-reference/components/link) 元件，並加入 href 屬性即可作為連結進行頁面切換

import Link from "next/link";

function Navbar() {
  return ( <>
      <Link href='/'>首頁</Link> ｜    
  </> );
}

### 約定運作機制（Convention over Configuration）

next 有許多 export default 就能運作的特性
例如 `export const metadata`、`export async function getStaticProps`

這可以被稱為 “約定運作機制”，但他的文件沒有這麼說 😆

### 動態路由 [id]

- 資料夾中定義 `[xxx]` 的方式，就會自動轉為動態路由
- 元件中可以使用 `*async* function ...({ params })` 的方式取得相關參數

範例：注意，這邊屬於 Server Side 的 Code，所以需要使用 async await

async function DynamicRouter({ params }) {
  const {id} = await params;
  return ( <>
    <p>這是動態路由的內頁</p>
    參數：{id}
  </> );
}

export default DynamicRouter;

> 蛤？什麼 Server Side

## 三、Server Side Render 與 Client Side Render

以下情境的運作概念：



- Vite + React Router 串接後端 API
- SSR：Next + React 串接後端 API
- SSR + CSR：混合制運作模式

#### 優缺點：

- 1. **SEO 友好性**：SSR ⭐⭐⭐⭐⭐
- 2. **首次加載時間**：SSR ⭐⭐⭐⭐
- 3. **用戶體驗**：SSR ⭐⭐⭐⭐
- 4. **伺服器負擔**：SSR 💔

#### 關於 SSR 與 CSR 的選擇

你覺得適合哪一種？

- Landing Page
- 產品詳情頁
- 部落格文章頁面
- 用戶通知中心
- 產品詳細頁面及下方的討論區塊（老闆希望討論區塊更新可以更即時些

### Server Component 與 Client Component

#### Server Component
**✅ 可以做的事：**

- 取得伺服器資料（如環境變數、存取資料庫等）
- **可以包 Client Component**（Client Component 不能包 Server Component）
- 在瀏覽器中，可以檢視其 HTML 原始碼
- 取得遠端資料，並且由伺服器渲染（重要）

**🚫 不能做的事：**
- 不能使用 React Hook（useState, useEffect…）
- 不能使用 onClick 等事件方法
- 不能使用 window 等方式存取用戶瀏覽器資料

#### Client Component

可以在元件加入 'user client' 來建立 Client Component

**✅ 可以做的事：**

- 使用 React hooks、處理使用者事件
- 當使用 console 時，數值會顯示在 Browser Console
- 環境變數必須搭配 `NEXT_PUBLIC_`
- 使用 瀏覽器 API
- 再次更新畫面（AJAX）

**🚫 不能做的事：**

- 不能存取伺服器資源（例如 fs）
- 不能包 Server Component

## 部署

純 Node.js 環境輸出

1️⃣ 先設定 next.config.js

module.exports = {
  output: "standalone",
};

2️⃣ 重新編譯

next build

這會生成 .next/standalone/ 目錄，內含 `獨立的 Node.js` 伺服器。

3️⃣ 用 node 直接運行

進入 .next 資料夾

node ./standalone/server.js