【Next.js】建立新專案

# 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

# 啟動專案 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 做程式碼檢查。

• 選 Yes → 建立 .eslintrc.json 等設定，避免潛在錯誤。

4. Would you like to use Tailwind CSS?

是否加入 Tailwind CSS 做 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 資料夾）：

{
  "compilerOptions": {
    "baseUrl": ".",           // 專案根目錄
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

▶ 3. 如果你沒使用 src/，就寫：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["*"]
    }
  }
}

📁 目錄結構對照範例

若你有勾選使用 src/，專案結構可能如下：

demo-next/
├── src/
│   ├── app/
│   ├── components/
│   └── ...
├── tsconfig.json

則你就能寫這樣的路徑：

import { Header } from '@/components/Header'

✅ 總結：建立流程與 alias 設定對照