1. 开发环境准备
1.1 Node.js安装
# 检查是否已安装Node.js
node -v
npm -v
# 如果未安装，访问 https://nodejs.org 下载安装包
# 建议安装LTS版本（当前为18.x或20.x）1.2 配置npm镜像（国内用户推荐）
# 设置淘宝镜像
npm config set registry https://registry.npmmirror.com
# 或安装cnpm
npm install -g cnpm --registry=https://registry.npmmirror.com2. 创建Next.js项目
2.1 使用create-next-app创建项目
npx create-next-app@latest my-next-app
# 在创建过程中，你会看到以下选项：
√ Would you like to use TypeScript? ... yes # 使用TypeScript
√ Would you like to use ESLint? ... yes # 使用ESLint
√ Would you like to use Tailwind CSS? ... yes # 使用Tailwind CSS
√ Would you like to use `src/` directory? ... yes # 使用src目录
√ Would you like to use App Router? ... yes # 使用App Router
√ Would you like to customize the default import alias (@/*)? ... yes # 自定义导入别名2.2 安装必要的依赖
cd my-next-app
# 安装开发依赖
npm install --save-dev @types/node @types/react @types/react-dom
# 安装项目依赖
npm install @prisma/client zustand @headlessui/react @heroicons/react chart.js react-chartjs-2 date-fns3. 项目结构设置
3.1 创建基础目录结构
mkdir -p src/{app,components,lib,hooks,services,styles,types}3.2 目录结构说明
src/
├── app/ # Next.js 13+ App Router页面
├── components/ # React组件
├── lib/ # 工具函数和配置
├── hooks/ # 自定义React Hooks
├── services/ # API服务
├── styles/ # 样式文件
└── types/ # TypeScript类型定义4. 基础配置文件设置
4.1 TypeScript配置
// tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}4.2 Next.js配置
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
images: {
domains: ['localhost'],
},
experimental: {
serverActions: true,
},
}
module.exports = nextConfig5. Git版本控制设置
5.1 初始化Git仓库
git init5.2 配置.gitignore文件
# .gitignore
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env*.local
.env
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts6. 创建初始页面
6.1 修改首页
// src/app/page.tsx
export default function Home() {
return (
<div className="p-8">
<h1 className="text-3xl font-bold">欢迎来到MindAI</h1>
<p className="mt-4 text-gray-600">
智能心理健康服务平台
</p>
</div>
)
}6.2 创建布局文件
// src/app/layout.tsx
import './globals.css'
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: 'MindAI - 智能心理健康服务平台',
description: '基于AI技术的现代化心理健康服务平台',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="zh-CN">
<body className="min-h-screen bg-gray-50">{children}</body>
</html>
)
}7. 启动和测试
7.1 运行开发服务器
npm run dev7.2 访问测试
打开浏览器访问 http://localhost:3000 查看结果
8. 下一步计划
- 实现基础UI组件
- 设置Tailwind CSS主题
- 创建导航系统
- 规划页面路由