← 返回博客
·0 次瀏覽

Next.js 入門：從零構建現代 Web 應用

Next.js 是基於 React 的全栈框架，提供 SSR、SSG、API Routes 等強大功能。本文帶你快速上手。

Next.jsReact前端

什麼是 Next.js？


Next.js 是由 Vercel 開發的 React 框架，它在 React 的基礎上提供了：


  • **服務端渲染（SSR）**：每次請求時在服務端生成 HTML
  • **靜態站點生成（SSG）**：構建時預生成 HTML
  • **App Router**：基於文件系統的路由，支援 Server Components
  • **API Routes**：在同一項目中編寫後端 API

    • 快速開始


    npx create-next-app@latest my-app --typescript --tailwind --app

    cd my-app

    npm run dev


    App Router 基礎


    在 Next.js 13+ 中，`app/` 目錄下的每個文件夾代表一個路由段。


    Server Components vs Client Components


    默認情況下，App Router 中的組件都是 **Server Components**，在服務端運行，不包含客戶端 JavaScript。


    需要使用瀏覽器 API 或 React 狀態時，在文件頂部加上 `"use client"` 指令。