如何在 Next.js 中建立新專案？

Next.js 是一個非常受歡迎的 React 應用框架，它提供了許多強大的功能，比如伺服器端渲染（SSR）、靜態網站生成（SSG）、API 路由等。建立 Next.js 專案的方式有很多種，無論是使用官方的創建工具，還是手動設置，都能幫助你快速上手這個框架。

在這篇文章中，我將介紹如何使用不同的方法來創建一個新的 Next.js 專案，讓你根據自己的需求選擇最適合的方式。

方法一：使用 create-next-app（最簡單方法）

如果你是 Next.js 的新手，或者希望快速開始一個新的專案，最簡單的方法就是使用官方的 create-next-app 工具。這個工具會為你創建一個預設的 Next.js 專案結構，並自動安裝所需的依賴。

步驟：

1. 打開終端（Terminal），執行以下命令：

   1	npx create-next-app@latest

2. 接下來，工具會提示你輸入專案名稱（例如 my-app-method-1），然後自動創建一個新的資料夾並初始化專案。

3. 若要指定專案名稱，可以直接執行：

   1	npx create-next-app@latest my-app-method-1

4. 完成後，你只需要進入專案資料夾並啟動開發伺服器：

   1 2	cd my-app-method-1 npm run dev

5. 然後打開瀏覽器，輸入 http://localhost:3000，你將會看到 Next.js 的預設頁面，表示專案已成功啟動。

方法二：使用 yarn create next-app（如果你偏好 Yarn）

如果你使用的是 Yarn 作為包管理工具，也可以使用 yarn create 來初始化專案，這與 npx 類似。

步驟：

1. 在終端中執行以下命令：

   1	yarn create next-app

2. 這會提示你輸入專案名稱，並自動創建並安裝所需的依賴。

3. 如果你想指定專案名稱，可以直接執行：

   1	yarn create next-app my-app-method-2

4. 創建完成後，同樣進入專案資料夾並啟動開發伺服器：

   1 2	cd my-app-method-2 yarn dev

5. 打開 http://localhost:3000，就可以看到 Next.js 預設頁面。

方法三：手動設置 Next.js 專案

如果你想更細緻地控制專案的配置，或者想學習如何手動設置 Next.js，你可以選擇手動設置專案。這樣，你可以完全控制專案結構和依賴的安裝過程。

步驟：

1. 創建一個新的資料夾並初始化一個 Node.js 專案：

   1 2 3

   mkdir my-next-app cd my-next-app npm init -y

2. 安裝 Next.js 和 React 依賴：

   1	npm install next react react-dom

3. 在 package.json 中新增以下腳本：

   1 2 3 4 5

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

4. 創建 pages 目錄，並在其中建立 index.js 文件，這是你的首頁：

   1 2 3 4

   // pages/index.js export default function Home() { return <h1>Welcome to Next.js!</h1>; }

5. 最後，運行開發伺服器：

   1	npm run dev

6. 打開瀏覽器，並前往 http://localhost:3000，你應該會看到顯示 “Welcome to Next.js!” 的頁面。

方法四：使用 TypeScript 模板

如果你打算在 Next.js 中使用 TypeScript，創建專案時可以選擇 TypeScript 模板，這樣會自動配置好 TypeScript 的設置，免去手動安裝 TypeScript 及相關依賴的麻煩。

步驟：

1. 使用以下命令創建一個基於 TypeScript 的 Next.js 專案：

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

2. 完成後，進入專案資料夾並啟動開發伺服器：

   1 2	cd my-next-app npm run dev

3. 此時，專案已經設置為 TypeScript，你可以開始編寫 .ts 或 .tsx 文件。

方法五：使用特定模板創建專案

Next.js 支援使用特定模板來初始化專案。你可以選擇一些官方模板，或者使用第三方模板來快速建立專案。

例如，使用 with-typescript 模板來創建一個支持 TypeScript 的專案：

1

npx create-next-app@latest my-next-app -e with-typescript

這樣會創建一個基於 with-typescript 模板的專案，並包含一些 TypeScript 的基本配置。

結語

無論你是 Next.js 的新手，還是有經驗的開發者，這些方法都能幫助你快速建立一個新的專案。使用 create-next-app 是最簡單和最推薦的方式，特別是對於初學者來說。如果你需要更多的定制化設置，可以選擇手動設置專案或者使用模板來快速啟動。

無論你選擇哪一種方式，Next.js 都會幫助你快速構建現代化的 React 應用，並享受高效的開發流程。祝你開發順利！