快速開始

歡迎來到 Next.js 文件!

如果你是 Next.js 的新手，我們建議你從學習課程開始。

這個帶有小測驗的互動式課程將會全面地帶領你去認識如何使用 Next.js。

如果你有任何關於 Next.js 的問題，歡迎隨時在我們的社群 GitHub Discussions 上提問。

自動設置

我們建議使用 create-next-app 來創建一個新的 Next.js 應用程式，它會自動幫你設定好一切。要創建一個專案，請執行：

npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app

如果你想要使用 TypeScript 來開發，你可以在指令後方加上 --typescript 。

npx create-next-app@latest --typescript
# or
yarn create next-app --typescript
# or
pnpm create next-app --typescript

安裝完成後：

執行 npm run dev 或 yarn dev 或 pnpm dev 來開啟開發伺服器，位址為 http://localhost:3000。
到 http://localhost:3000 去查看你的應用程式。
編輯 pages/index.js 檔案，你可以在瀏覽器上看到更新的結果。

關於使用 create-next-app 的更多資訊，你可以查看 create-next-app 文件。

在你的專案中安裝 next 、 react 和 react-dom：

npm install next react react-dom
# or
yarn add next react react-dom
# or
pnpm add next react react-dom

打開 package.json 並且新增下列 scripts 指令碼：

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

這些指令碼對應著應用程式中不同的開發階段：

在你的應用程式根目錄中新增兩個資料夾 pages 和 public：

Next.js 是圍繞著頁面(pages) 這個概念而建構出來的。一個頁面（ Page ）就是從 pages 目錄資料夾底下的 .js 、 .jsx 、 .ts 或 .tsx 檔案導出的 React 元件。甚至你可以在檔案名稱增加動態路由的參數。

在你的專案 pages 資料夾下新增 index.js 檔案來開始。這是一個使用者訪問你的應用程式的首頁。

在 pages/index.js 中新增以下內容：

function HomePage() {
  return <div>Welcome to Next.js!</div>
}

export default HomePage

完成設定後：

執行 npm run dev 或 yarn dev 或 pnpm dev 來開啟開發伺服器，位址為 http://localhost:3000。
到 http://localhost:3000 去查看你的應用程式。
編輯 pages/index.js 文件，你可以在瀏覽器上看到更新的結果。

到目前為止，我們學到了：

此外，任何 Next.js 應用程式從一開始就可以投入到正式環境使用。詳情請閱讀更多我們的部署文件。