logoNext.js 繁體中文
文件部落格學習
介紹/開始使用/安裝

安裝

系統需求：

  • Node.js 16.14 或更新版本
  • 支援 macOS、Windows (包含 WSL) 與 Linux 系統

自動安裝

我們建議使用 create-next-app 建立新的 Next.js 應用程式，它會自動為您完成所有設定。執行以下指令建立專案：

終端機
npx create-next-app@latest

安裝過程中會看到以下提示：

終端機
您的專案名稱是什麼？ my-app
是否要使用 TypeScript？ 否 / 是
是否要使用 ESLint？ 否 / 是
是否要使用 Tailwind CSS？ 否 / 是
是否要使用 `src/` 目錄？ 否 / 是
是否要使用 App Router？ (推薦) 否 / 是
是否要自訂預設的 import 別名 (@/*)？ 否 / 是
您想設定什麼 import 別名？ @/*

回答完提示問題後，create-next-app 會建立一個以您專案名稱命名的資料夾並安裝所需依賴。

小知識：

手動安裝

若要手動建立新的 Next.js 應用程式，請安裝以下必要套件：

終端機
npm install next@latest react@latest react-dom@latest

開啟您的 package.json 檔案並新增以下 scripts：

package.json
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

這些腳本對應應用程式開發的不同階段：

  • dev: 執行 next dev 以開發模式啟動 Next.js
  • build: 執行 next build 為生產環境建置應用程式
  • start: 執行 next start 啟動 Next.js 生產伺服器
  • lint: 執行 next lint 設定 Next.js 內建的 ESLint 配置

建立目錄結構

Next.js 使用檔案系統路由 (file-system routing)，這意味著您的應用程式路由由檔案結構決定。

app 目錄

對於新專案，我們推薦使用 App Router。這個路由系統允許您使用 React 的最新功能，是基於社群回饋演進的 Pages Router 版本。

建立一個 app/ 資料夾，然後新增 layout.tsx 和 page.tsx 檔案。這些檔案會在用戶訪問應用程式根路徑 (/) 時被渲染。

App 資料夾結構

在 app/layout.tsx 中建立一個 根佈局 (root layout)，包含必要的 <html> 和 <body> 標籤：

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

最後，在 app/page.tsx 建立首頁並加入初始內容：

export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

小知識：如果您忘記建立 layout.tsx，Next.js 會在執行 next dev 啟動開發伺服器時自動建立此檔案。

了解更多關於 使用 App Router 的資訊。

pages 目錄 (選用)

如果您偏好使用 Pages Router 而非 App Router，可以在專案根目錄建立 pages/ 資料夾。

接著，在 pages 資料夾內新增 index.tsx 檔案，這將成為您的首頁 (/)：

export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

然後，在 pages/ 內新增 _app.tsx 檔案來定義全域佈局。了解更多關於 自訂 App 檔案 的資訊。

import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

最後，在 pages/ 內新增 _document.tsx 檔案來控制伺服器的初始回應。了解更多關於 自訂 Document 檔案 的資訊。

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

了解更多關於 使用 Pages Router 的資訊。

小知識：雖然您可以在同一個專案中使用兩種路由系統，但 app 中的路由會優先於 pages。我們建議在新專案中僅使用一種路由系統以避免混淆。

public 資料夾 (選用)

建立 public 資料夾來存放靜態資源，例如圖片、字型等。public 目錄中的檔案可以直接透過根 URL (/) 在代碼中引用。

執行開發伺服器

  1. 執行 npm run dev 啟動開發伺服器
  2. 訪問 http://localhost:3000 查看您的應用程式
  3. 編輯 app/layout.tsx (或 pages/index.tsx) 檔案並儲存後，即可在瀏覽器中看到更新結果

開始使用

學習如何使用 Next.js 建立全端網頁應用程式。

專案結構

Next.js 專案中的資料夾與檔案命名慣例清單

On this page