第一個區別：不同的頁面對應的路由器設定！

1. 繼續用 app 路由器（推薦，Next.js 未來主流）

• 路由規則：app 目錄下，文件夾 + page.tsx 對應路由。例如：
  • app/page.tsx → 對應 / 路由（替代 pages/index.js ）
  • app/posts/first-post/page.tsx → 對應 /posts/first-post 路由（替代 pages/posts/first-post.js ）
• 布局管理：用 layout.tsx 處理共享布局（如導航、頁腳），替代舊版自定義布局邏輯。

2. 切換回 pages 路由器（適合純學習舊版）

若想嚴格跟舊教程，需修改項目配置：

• 在 next.config.ts 中添加配置，強制啟用 pages 路由器：

  /** @type {import('next').NextConfig} */
  const nextConfig = {experimental: {appDir: false, // 關閉 app 路由器},
  };module.exports = nextConfig;
  

• 然后在項目根目錄手動創建 pages 文件夾，按舊版規則（pages/index.js、pages/posts/first-post.js ）編寫文件。

第二個區別：Link標簽下是否需要a標簽

第三個區別：客戶端導航和服務端導航

如果修改頁面的背景顏色，使用Link組件的話切換路由背景顏色的狀態信息得以成功保存！但是使用a組件就不可以！

知識呢要常看才常新，我這是對照著Next.js進行學習的！
Link組件默認采用預加載，Next.js會自動在后臺預取鏈接頁面的代碼，所以點擊之后展示頁面變得非常迅速。
代碼拆分與預取的意思是：只加載要渲染的頁面的js代碼，其他部分暫時不渲

第三章：

如何將靜態文件添加到Next.js中

不知道為什么小寫的img就不可以，。。。
如何定義每個頁面的head標簽

如何創建一個可以復用的React組件，并使用CSS添加樣式。
如何添加全局CSS。

后端服務
Next.js 不僅能構建前端頁面，還同時提供了后端服務

src\app\api 內的 route.js 會自動生成后端接口

范例：src\app\api\blog\route.js

import { NextResponse } from "next/server";// 處理 GET 請求
export async function GET(request) {// 這里可以編寫從數據庫或其他數據源獲取用戶數據的邏輯const data = [{id: 1,title: "第1篇博客的標題",content: "第1篇博客的內容",},{id: 2,title: "第2篇博客的標題",content: "第2篇博客的內容",},];return NextResponse.json(data);
}

啟動項目后，瀏覽器訪問 http://localhost:3000/api/blog 就可以看到數據！