# next-model

**Repository Path**: xbhog/next-model

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-28
- **Last Updated**: 2025-09-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Next.js Landing Page 模板

这是一个基于 Next.js 的落地页模板项目，使用内容驱动的方式构建，可以快速创建和定制 landing page。

## 技术栈

- [Next.js 15](https://nextjs.org/)
- [TypeScript](https://www.typescriptlang.org/)
- [Tailwind CSS v4](https://tailwindcss.com/)
- [React 19](https://reactjs.org/)

## 项目特点

- 🚀 基于 Next.js App Router
- 📝 内容与展示分离，通过 JSON 配置驱动
- 🎨 使用 Tailwind CSS 进行样式设计
- ♿ 遵循无障碍访问标准
- 📱 响应式设计
- 🔧 组件化架构，易于扩展和维护

## 目录结构

```
src/
├── app/                 # Next.js App Router 页面
├── base-framework/      # 核心组件库
│   └── landing/         # Landing Page 组件
├── content/             # 内容配置文件
└── types/               # TypeScript 类型定义
```

## 核心组件

1. **Nav** - 顶部导航栏
2. **Hero** - 首屏展示区域
3. **What** - 产品价值说明
4. **How** - 使用流程说明
5. **Features** - 功能特性列表
6. **FAQ** - 常见问题解答
7. **Footer** - 页面底部信息
8. **CTAButton** - 行动号召按钮

## 快速开始

### 开发模式

```bash
npm run dev
```

打开 [http://localhost:3000](http://localhost:3000) 查看页面。

### 构建项目

```bash
npm run build
```

### 启动生产环境

```bash
npm run start
```

## 自定义内容

修改 [src/content/landing.default.json](file:///D:/next-model/src/content/landing.default.json) 文件来自定义页面内容，包括：

- 页面标题和描述
- Hero 区域内容
- What、How、Features、FAQ 各模块内容
- SEO 和结构化数据配置

## 部署

使用 [Vercel](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) 一键部署您的 Next.js 应用。

## 文档

- [项目概览](./doc/project-overview.md) - 技术栈、模块功能和方法流程
- [设计文档](./doc/1-talk.md) - 原始设计思路和详细规范

## Learn More

要了解更多关于 Next.js 的信息，请查看以下资源：

- [Next.js 文档](https://nextjs.org/docs) - 了解 Next.js 的特性和 API
- [Learn Next.js](https://nextjs.org/learn) - 交互式 Next.js 教程