這份來源詳細介紹了 Next.js 15 的入門開發實戰，Next.js 是一個強大的 React 框架，專為開發動態、伺服器渲染（Server-rendered）的 Web 應用程序而設計。
以下是針對該課程內容的摘要：
1. 項目初始化與結構
快速上手：使用
npx create-next-app建立項目，建議啟用 TypeScript、ESLint 和 Tailwind CSS 以確保代碼質量與開發效率。App Router：採用最新的文件系統路由（File-based routing），這被視為 Next.js 最顯著的改進之一。
核心目錄：
app/文件夾是應用程序的核心，包含路由與組件；public/用於存放圖片等靜態資源。
2. 路由與佈局系統
佈局 (Layouts)：
layout.tsx用於定義所有頁面共享的 HTML 結構（如導航欄），且支持嵌套佈局。頁面 (Pages) 與導航：透過建立文件夾和
page.tsx定義路由。導航應使用next/link的Link組件，以實現優化的客戶端跳轉。動態路由：使用方括號語法（例如
[user_id]）來處理帶有參數的動態路由，並透過params屬性獲取參數值。
3. 伺服器與客戶端組件 (Server vs. Client Components)
伺服器組件 (Server Components)：Next.js 預設所有組件均為伺服器組件。它們在伺服器端渲染，有利於 SEO、減少瀏覽器端 JavaScript 負擔，且支持直接使用
async/await進行數據抓取。客戶端組件 (Client Components)：若需使用 React Hook（如
useState、useEffect）或瀏覽器交互功能（如onClick），必須在文件頂部加入"use client"指令。
4. 數據抓取與後端邏輯
直接抓取：在非同步的伺服器組件中，可以直接使用
fetch獲取 API 數據，無需依賴useEffect。內置 API 路由：開發者可以在
api/目錄下建立route.ts文件，直接在 Next.js 項目中編寫後端邏輯（支持 GET、POST 等請求），無需額外設置 Express 伺服器。
5. 性能與 SEO 優化
圖片優化：使用
Image組件實現自動尺寸調整、延遲加載（Lazy loading）與防止布局偏移。元數據管理 (Metadata)：透過導出的
metadata對象定義各頁面的標題、描述及社交媒體標籤，顯著提升搜索引擎排名。特殊狀態處理：利用
loading.tsx定義加載狀態，not-found.tsx自定義 404 頁面，以及error.tsx處理運行時錯誤。
這門課程旨在幫助開發者從 React 基礎過渡到能夠獨立構建生產環境等級的 Next.js 應用程序。
