# 【Next.js】建立新專案 ```shell # npx create-next-app 建立新專案 $npx create-next-app Need to install the following packages: create-next-app@15.4.3 Ok to proceed? (y) y ✔ What is your project named? … demo-next ✔ Would you like to use TypeScript? … No / Yes #Yes ✔ Would you like to use ESLint? … No / Yes #Yes ✔ Would you like to use Tailwind CSS? … No / Yes #Yes ✔ Would you like your code inside a `src/` directory? … No / Yes #Yes ✔ Would you like to use App Router? (recommended) … No / Yes #Yes ✔ Would you like to use Turbopack for `next dev`? … No / Yes #No ✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes #Yes ✔ What import alias would you like configured? … @/* Creating a new Next.js app in /Users/srou/Documents/vscode_workspace/demo/nextjs-demo/demo-next. Using npm. Initializing project with template: app-tw Installing dependencies: - react - react-dom - next Installing devDependencies: - typescript - @types/node - @types/react - @types/react-dom - @tailwindcss/postcss - tailwindcss added 59 packages, and audited 60 packages in 20s 11 packages are looking for funding run `npm fund` for details found 0 vulnerabilities Initialized a git repository. Success! Created demo-next at /Users/srou/Documents/vscode_workspace/demo/nextjs-demo/demo-next ``` ```shell # 啟動專案 npm run dev $npm run dev > demo-next@0.1.0 dev > next dev ⚠ Warning: Found multiple lockfiles. Selecting /Users/srou/Documents/vscode_workspace/yarn.lock. Consider removing the lockfiles at: * /Users/srou/Documents/vscode_workspace/demo/demo-next/package-lock.json ▲ Next.js 15.4.3 - Local: http://localhost:3000 - Network: http://192.168.1.1:3000 ✓ Starting... ✓ Ready in 2.1s ``` 當你使用 `npx create-next-app` 建立 Next.js 專案時，CLI 會引導你一步一步選擇要開啟哪些功能。以下是每一個步驟的說明，以及如果最後選擇 **不設定 import alias（例如 `@/*`）**，日後如何補上設定。 --- ## 🧱 建立 Next.js 專案步驟說明 ### 1. `What is your project named?` > 輸入專案資料夾名稱，例如 `demo-next`。 ### 2. `Would you like to use TypeScript?` > 是否使用 TypeScript（推薦選 Yes，提供型別安全）。 - 選 Yes → 自動生成 `tsconfig.json` - 選 No → 使用 JavaScript + `jsconfig.json` --- ### 3. `Would you like to use ESLint?` > 是否啟用 [ESLint](https://eslint.org/) 做程式碼檢查。 - 選 Yes → 建立 `.eslintrc.json` 等設定，避免潛在錯誤。 --- ### 4. `Would you like to use Tailwind CSS?` > 是否加入 [Tailwind CSS](https://tailwindcss.com/) 做 UI 樣式設計。 --- ### 5. `Would you like your code inside a src/ directory?` > 是否將程式碼放入 `src/` 子資料夾中。 - 選 Yes → 專案結構更清晰，建議開啟。 --- ### 6. `Would you like to use App Router? (recommended)` > 啟用 Next.js 13+ 的新 **App Router** 架構（基於 `app/` 資料夾）。 - 選 Yes → 使用新路由系統，支援 Server Components 等現代功能。 --- ### 7. `Would you like to use Turbopack for next dev?` > 是否使用新一代 Turbopack 開發模式（取代 Webpack 開發時編譯器）。 - 只會影響 `npm run dev` 時的速度 - 生產環境仍使用 Webpack --- ### 8. `Would you like to customize the import alias (@/* by default)?` > 是否要自訂 **import 路徑別名 alias**？ #### ✅ 選 Yes： - CLI 會再問你輸入別名（例如 `@/*`）， - 會幫你自動建立 `paths` 設定（在 `tsconfig.json` 或 `jsconfig.json`） #### ❌ 選 No： - 不會設定別名，之後你手動寫 `../../components/...` 等麻煩路徑。 --- ## 🔧 若選擇 "No"，之後如何補上 import alias？ ### ▶ 1. 找出設定檔 如果你是： - 用 TypeScript → 修改 `tsconfig.json` - 用 JavaScript → 修改 `jsconfig.json` ### ▶ 2. 修改範例如下（代表 `@` 指向 `src` 資料夾）： ```jsonc { "compilerOptions": { "baseUrl": ".", // 專案根目錄 "paths": { "@/*": ["src/*"] } } } ``` ### ▶ 3. 如果你沒使用 `src/`，就寫： ```jsonc { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["*"] } } } ``` --- ### 📁 目錄結構對照範例 若你有勾選使用 `src/`，專案結構可能如下： ``` demo-next/ ├── src/ │ ├── app/ │ ├── components/ │ └── ... ├── tsconfig.json ``` 則你就能寫這樣的路徑： ```ts import { Header } from '@/components/Header' ``` --- ## ✅ 總結：建立流程與 alias 設定對照
功能說明
是否設定 alias (`@`)`create-next-app` 最後一個選項
若選否，日後可透過 `ts/jsconfig` 設定✅ 很簡單，加一段 `"paths"` 即可
是否需要設定 `next.config.js`通常不需要（除非使用 webpack plugin）
---