A modern Next.js template with TypeScript, Tailwind CSS, Redux Toolkit, and theme support
npm install cra-template-bobonext.jsbash
使用 npx (推薦)
npx create-react-app my-app --template cra-template-bobonext.js
或從 GitHub 直接安裝
npx create-react-app my-app --template file:path/to/cra-template-boboNext.js
或使用 npm
npm init react-app my-app -- --template cra-template-bobonext.js
或使用 yarn
yarn create react-app my-app --template cra-template-bobonext.js
`
> 注意: 雖然使用 create-react-app 指令，但這個 template 會創建一個 Next.js 專案，而非傳統的 CRA 專案。
🚀 開發指令
安裝完成後，進入專案目錄：
`bash
cd my-app
`
執行開發伺服器：
`bash
使用 npm
npm run dev
使用 yarn
yarn dev
使用 pnpm
pnpm dev
`
開啟瀏覽器訪問 http://localhost:3000
$3
`bash
建置生產版本
npm run build
啟動生產伺服器
npm start
或
yarn start
Lint 檢查
npm run lint
或
yarn lint
`
📁 專案結構
使用此 template 創建的專案結構：
`text
my-app/
├── public/ # 靜態資源
│ └── images/ # 圖片資源
├── src/
│ ├── components/ # React 元件
│ │ ├── common/ # 共用元件 (NavBar, Footer, ImageWrapper)
│ │ ├── features/ # 功能元件 (Theme, ThemeDemo)
│ │ ├── layouts/ # 版面配置 (Layout)
│ │ └── Home/ # 首頁元件
│ ├── store/ # Redux 狀態管理
│ │ ├── hooks/ # Redux hooks
│ │ ├── slices/ # Redux slices
│ │ └── types/ # Store 類型定義
│ ├── types/ # 全域類型定義
│ │ ├── common.ts # 通用類型
│ │ ├── api.ts # API 相關類型
│ │ └── enums/ # Enums
│ ├── hooks/ # 自訂 Hooks
│ ├── pages/ # Next.js 頁面路由
│ │ ├── _app.tsx # App 入口
│ │ ├── _document.tsx
│ │ ├── index.tsx # 首頁
│ │ └── theme-demo.tsx
│ ├── styles/ # 全域樣式
│ │ ├── _variables.scss # SCSS 變數 (60+ 顏色)
│ │ ├── _mixins.scss # SCSS Mixins
│ │ └── global.scss # CSS Variables (78 個)
│ └── utils/ # 工具函數
├── .eslintrc.json # ESLint 配置
├── .prettierrc.json # Prettier 配置
├── next.config.ts # Next.js 配置
├── tailwind.config.js # Tailwind CSS 配置
├── tsconfig.json # TypeScript 配置
├── ARCHITECTURE.md # 架構規範文檔
├── THEME_GUIDE.md # 主題使用指南
└── README.md # 專案說明
`
🎨 主題系統
內建完整的 Light/Dark 主題系統：
- ✅ 使用 CSS Variables 動態切換顏色
- ✅ SCSS 變數提供編譯時的顏色管理
- ✅ Material Design 3 配色方案
- ✅ 78+ 預定義顏色變數
- ✅ 支援主題感知元件
訪問 /theme-demo 頁面查看所有可用的主題顏色。
詳細使用說明請參考 THEME_GUIDE.md`