当前位置：首页 > news >正文

Next.js项目MindAI教程 - 第一章：环境准备与项目初始化

news 来源：原创 2025/5/16 0:17:57

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.com

2. 创建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-fns

3. 项目结构设置

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 = nextConfig

5. Git版本控制设置

5.1 初始化Git仓库

git init

5.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.ts

6. 创建初始页面

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>
  )
}