今天終於要啟一個 Next 專案了，跟其他框架一樣，下一個 npm 指令然後選擇一些設定就可以建立起一個專案。
如果是想要手動建制也可以看這個官方教學

建立專案

環境需求：

• Node.js 16.14 以上

使用 create-next-app@latest 建立一個 next 專案：

npx create-next-app@latest

執行完 create-next-app 後會問你一連串的專案設定

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias? No / Yes
What import alias would you like configured? @/*

除非你要使用 Tailwind CSS，否則 enter 按到底就對了，這樣全部選擇完就會幫你建立：

• Typescript：可以使用 typescript，建立 tsx, ts 等結尾的檔案
• ESLint：確保程式碼有最基本的品質
• src 目錄：有些人在使用 app router 後就不去使用 src 目錄，靜態資源會改以檔名前面加上_放在 app 目錄中，像是 app/_assets, app/_i18n，看個人習慣。
• App Router：Next13 的精髓，就是昨天講到的 App Router。Next 會幫在這個資料夾建立基本的 UI，讓我們在 npm run dev 時不要那麼空虛
• alia：當我們在 import 檔案時，路徑使用 @ 代表從 src 往下找檔案，避免我們在一些較深層的檔案中使用一堆相對路徑，像是 ../../../../../../../components/SoFar.tsx。這個可以之後在 tsconfig.json 修改或擴充。

結束後我們就會獲得這樣一個資料夾

└── node_modules
├── public
├── src
│   └── app
├── .eslintrc.json
├── .gitignore
├── next-env.d.ts
├── next.config.js
├── package-lock.json
├── README.md
└── tsconfig.json

啟動專案

使用 npm run dev 開啟一個 dev server，這時候會看到檔案目錄多一個 .next 的檔案，這裡存放著我們啟 dev server 時的暫存檔案，讓我們在開發模式下的 hot reload 更順暢。

npm run dev

Turbopack

有興趣的朋友也可以試試 Turbopack 當作 dev server 的啟動器，只要在 npm dev 指令後面加上 --turbo 就可以為我們的 dev server 加裝一組 turbo，使我們的 hot reload 的速度得到顯著的提升。

Turbopack 是 Vercel (與 Next 同一個團隊)所推出的建構工具，底層使用 Rust 來撰寫，使建構速度大幅提升。最常與之比較的則是 Vite，想看兩者比較可以看這篇文章。

目前 Turbopack 只能運行在 dev server 上，還無法用在 build 的指令，據說還有一些坑，所以想要穩定一點的話還是使用最一般的 next dev 就好～

{
  "scripts": {
    "dev": "next dev --turbo", // 加上 --turbo，獲得 turbo
  }
}

後記

感覺凌晨寫文章都會特別順...

參考資料

• Next Document
• medium - 兩大 bundler 交鋒：Vite 與 Turbopack 的技術角力賽