Next.js 是一個極受歡迎的 React 框架，專為 Server Side Rendering（SSR）、Static Side Generation（SSG）和 API 路由等功能而設計，本篇文章會示範如何從零開始建立一個 Next.js 前端專案。

開始前的準備

首先，確保開發環境已經安裝了 Node.js，這是開發 Next.js 專案所需的基礎，版本號的話最好是以官網的為主，畢竟前端世界中版本更迭還滿快速的，目前本篇文章的 Node.js 版本推薦是 16.14 或更新，以後可以看一下目前版本號差多少😄。

建立新專案

打開 Terminal 並執行以下命令來建立一個新的 Next.js 專案：

$ npx create-next-app@latest

或是想要試試看目前最新，討論度很高的 Run Time -- Bun，也是可以的。

$ bun create next-app

接下來會出現一連串的選項，可以參考我的步驟，或是自己決定要怎麼開發都可以。

❯ bun create next-app
✔ What is your project named? … qrcode-nextjs
✔ 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

稍微講解一下這幾個選項：

1. What is your project named?
   專案名稱取名為 qrcode-nextjs，這裡一樣可以自由命名。
2. Would you like to use TypeScript?
   是否要使用 Typescript 作為專案預設的開發，我這邊選擇 Yes，看個人喜好。
3. Would you like to use ESLint?
   建議選擇 Yes，ESLint 是很好的工具，可以幫助你有更好的開發過程。
4. Would you like to use Tailwind CSS?
   我選擇 Yes，因為比起 CSS，我更喜歡 Tailwind CSS。
5. Would you like to use src/ directory?
   看是否要新增一個 src 的目錄，預設值是 Yes，但我選 No。
6. Would you like to use App Router?
   這是 Next.js 新版本推出的功能，官方推薦你使用，所以就選 Yes。
7. Would you like to customize the default import alias?
   這個選項問是否要有更簡短的 import，預設是 No。

專案結構

建立好專案後，會看到以下結構：

qrcode-nextjs/
├── app/
    ├── page.tsx
    ├── layout.tsx
    ├── globals.css
    ├── favicon.ico.tsx
├── next.config.js
├── package.json
├── tailwind.config.ts
├── next-env.d.ts
├── tsconfig.json
├── postcss.config.js
├── .eslintrc.json
└── README.md

簡單說明一下比較主要的部分：

• app/: 如果選擇 App Router 的話，這裡就會是這個專案中的路由系統。
• layout.tsx: 這個專案的 Entry Point。
• layout.tsx: 想要改 Hello World 就從這裡改。
• package.json: 專案的所有套件版本和腳本。
• tsconfig.json: TypeScript 的設定。
• next.config.js: Next.js 的設定。

專案跑起來後，看到這個畫面就代表你專案建立成功了🎉。

Next.js 專案建立完成後，明天會繼續開發前端的畫面以及功能，明天見👋。