安裝
系統需求：
- 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 現在預設內建 TypeScript、ESLint 和 Tailwind CSS 配置
- 您可以選擇在專案根目錄使用
src目錄 來區分應用程式代碼與配置檔案
手動安裝
若要手動建立新的 Next.js 應用程式，請安裝以下必要套件：
npm install next@latest react@latest react-dom@latest開啟您的 package.json 檔案並新增以下 scripts：
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}這些腳本對應應用程式開發的不同階段：
dev: 執行next dev以開發模式啟動 Next.jsbuild: 執行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/layout.tsx 中建立一個 根佈局 (root layout)，包含必要的 <html> 和 <body> 標籤：
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}最後，在 app/page.tsx 建立首頁並加入初始內容：
export default function Page() {
return <h1>Hello, Next.js!</h1>
}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} />
}export default function App({ Component, pageProps }) {
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 (/) 在代碼中引用。
執行開發伺服器
- 執行
npm run dev啟動開發伺服器 - 訪問
http://localhost:3000查看您的應用程式 - 編輯
app/layout.tsx(或pages/index.tsx) 檔案並儲存後，即可在瀏覽器中看到更新結果