# next-start-frontEnd

**Repository Path**: whenTheMorningDark/next-start-front-end

## Basic Information

- **Project Name**: next-start-frontEnd
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-04
- **Last Updated**: 2026-02-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# My Next.js Tailwind Template

一个开箱即用的 Next.js + TypeScript + Tailwind CSS 专业模板，包含完善的开发工具配置和常用组件库。

## ✨ 特性

- ⚡ **Next.js 16** - 最新版本的 React 框架
- 🎨 **Tailwind CSS 4** - 原子化 CSS 框架
- 📘 **TypeScript** - 类型安全
- 🔍 **ESLint + Prettier** - 代码质量和格式化
- 🎯 **路径别名** - 便捷的模块导入
- 🧩 **组件库** - 预置通用 UI 组件
- 🪝 **Custom Hooks** - 常用 React Hooks
- 🛠️ **工具函数** - 格式化、验证等实用函数

## 📦 项目结构

```
my-next-tailwind-app/
├── public/              # 静态资源
├── src/
│   ├── app/             # Next.js App Router
│   │   ├── layout.tsx   # 根布局
│   │   ├── page.tsx     # 首页
│   │   └── globals.css  # 全局样式
│   ├── components/      # 组件
│   │   ├── ui/          # UI 组件 (Button, Card, Container)
│   │   └── layout/      # 布局组件 (Header, Footer)
│   ├── hooks/           # 自定义 Hooks
│   ├── lib/             # 工具函数
│   ├── types/           # TypeScript 类型定义
│   ├── constants/       # 常量
│   ├── config/          # 配置文件
│   └── styles/          # 样式文件
├── .env.example         # 环境变量示例
├── eslint.config.mjs    # ESLint 配置
├── tsconfig.json        # TypeScript 配置
└── package.json         # 依赖配置
```

## 🚀 快速开始

### 安装依赖

```bash
pnpm install
# 或
npm install
# 或
yarn install
```

### 开发模式

```bash
# 根路径开发（默认）
pnpm dev
# 访问 http://localhost:3000

# 子路径开发（测试 /travel 部署）
pnpm dev:travel
# 访问 http://localhost:3000/travel
```

**配置本地开发路径：**

你可以通过修改 `.env.local` 来配置本地开发路径：

```bash
# 根路径
NEXT_PUBLIC_BASE_PATH=""

# 或 /travel 路径
NEXT_PUBLIC_BASE_PATH="/travel"
```

详细说明请查看 [LOCAL_DEVELOPMENT.md](./LOCAL_DEVELOPMENT.md)

### 构建生产版本

```bash
pnpm build
pnpm start
```

## 📝 可用脚本

```bash
pnpm dev          # 启动开发服务器（根路径）
pnpm dev:travel   # 启动开发服务器（测试 /travel 路径）
pnpm build        # 构建生产版本（根路径）
pnpm build:travel # 构建生产版本（/travel 路径）
pnpm start        # 启动生产服务器
pnpm lint         # 运行 ESLint 检查
pnpm lint:fix     # 自动修复 ESLint 错误
pnpm format       # 格式化所有文件
pnpm format:check # 检查格式是否正确
```

## 🚀 部署到子路径

如果需要将应用部署到服务器的子路径下（如 `/travel`），请参考相关文档：

- **[LOCAL_DEVELOPMENT.md](./LOCAL_DEVELOPMENT.md)** - 本地开发路径配置
- **[DEPLOYMENT.md](./DEPLOYMENT.md)** - 生产环境部署指南
- **[BASEPATH.md](./BASEPATH.md)** - 快速参考

### 本地测试子路径

```bash
# 方式 1: 使用脚本
pnpm dev:travel

# 方式 2: 修改 .env.local
# 设置 NEXT_PUBLIC_BASE_PATH="/travel"
pnpm dev
```

### 生产环境部署

```bash
# 1. 设置环境变量
# 编辑 .env.production
NEXT_PUBLIC_BASE_PATH="/travel"

# 2. 构建
pnpm build:travel

# 3. 启动
pnpm start
# 访问 http://localhost:3000/travel
```

## 🎨 UI 组件

### Button 组件

```tsx
import { Button } from "@/components/ui";

<Button variant="primary" size="md">
  点击我
</Button>;
```

### Card 组件

```tsx
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui";

<Card>
  <CardHeader>
    <CardTitle>卡片标题</CardTitle>
  </CardHeader>
  <CardContent>内容</CardContent>
</Card>;
```

### Container 组件

```tsx
import { Container } from "@/components/ui";

<Container size="lg" centerX>
  内容
</Container>;
```

## 🪝 Custom Hooks

```tsx
import { useMediaQuery, useLocalStorage, useWindowSize } from "@/hooks";

const isMobile = useMediaQuery("(max-width: 640px)");
const [value, setValue] = useLocalStorage("key", defaultValue);
const { width, height } = useWindowSize();
```

## 🛠️ 工具函数

```tsx
import { cn } from "@/lib/utils";
import { formatDate, formatCurrency } from "@/lib/helpers";
import { isValidEmail } from "@/lib/validators";
```

## 🌙 暗黑模式

使用 Tailwind 的 `dark:` 前缀：

```tsx
<div className="bg-white dark:bg-black">内容</div>
```

## 📄 环境变量

复制 `.env.example` 到 `.env.local` 并配置环境变量。

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme).

Check out [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.