前端-Day 01 - 项目初始化与环境搭建

Day 01 - 项目初始化与环境搭建

日期： 第1天
目标： 建立开发环境，完成项目框架搭建

📋 任务清单

• Next.js 项目初始化
• TypeScript 配置
• Tailwind CSS 集成
• 国际化 (next-intl) 配置
• Git 仓库初始化

💻 实现步骤

1. 初始化 Next.js 项目

npx create-next-app@latest geng --typescript --tailwind --app
cd geng

2. 项目结构

geng/
├── src/
│   ├── app/
│   │   ├── [locale]/
│   │   │   ├── page.tsx
│   │   │   ├── layout.tsx
│   │   │   ├── globals.css
│   │   │   └── components/
│   ├── contexts/
│   ├── context/
│   ├── utils/
│   ├── program/
│   └── provider/
├── public/
├── package.json
├── tsconfig.json
├── next.config.mjs
└── tailwind.config.ts

3. 配置 TypeScript

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "paths": {
      "@/*": ["./src/*"]
    },
    "jsx": "react-jsx"
  }
}

4. 集成 Tailwind CSS

tailwind.config.ts

import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        primary: '#3B82F6',
        secondary: '#8B5CF6',
        success: '#10B981',
        danger: '#EF4444',
      },
    },
  },
  plugins: [],
}

export default config

5. 配置国际化

npm install next-intl

src/i18n.js

import { getRequestConfig } from 'next-intl/server';

export default getRequestConfig(async ({ locale }) => ({
  messages: (await import(`./messages/${locale}.json`)).default
}));

middleware.ts

import createMiddleware from 'next-intl/middleware';

export default createMiddleware({
  locales: ['en', 'zh'],
  defaultLocale: 'en'
});

export const config = {
  matcher: ['/((?!api|_next|.*\\..*).*)']
};

6. 核心依赖

package.json

{
  "dependencies": {
    "next": "14.2.3",
    "react": "^18",
    "react-dom": "^18",
    "@solana/web3.js": "^1.91.8",
    "@solana/wallet-adapter-react": "^0.15.35",
    "tailwind-css": "^3.x",
    "next-intl": "^3.26.3",
    "axios": "^1.7.2",
    "decimal.js": "^10.4.3"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "typescript": "^5",
    "tailwindcss": "^3.x",
    "autoprefixer": "^10.x",
    "postcss": "^8.x"
  }
}

⚠️ 常见问题

问题1：Next.js 与 Solana 库版本兼容性问题

现象：

Error: Cannot find module or exports is not defined

原因： Solana SDK 使用 CommonJS，Next.js 默认 ESM，存在不兼容

解决方案：

// next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { isServer }) => {
    config.resolve.fallback = {
      ...config.resolve.fallback,
      fs: false,
      path: false,
      crypto: false,
    }
    return config
  },
}

export default nextConfig

问题2：Tailwind CSS 与其他样式库冲突

现象： 类名冲突导致样式不生效

原因： 多个样式处理器（Tailwind + 其他库）

解决方案： 使用 tailwind-merge 库处理优先级

npm install tailwind-merge

import { twMerge } from 'tailwind-merge'

const merged = twMerge('px-2 py-1', 'px-3')  // px-3 覆盖 px-2

📊 验证清单

• 项目能够 npm run dev 启动
• TypeScript 编译无错误
• Tailwind CSS 样式生效
• 国际化路由正常工作 (/en/ 和 /zh/)
• 所有依赖都已安装

📝 总结

✅ 完成了项目框架的初始化
✅ 配置了开发环境
✅ 解决了依赖兼容性问题
✅ 建立了项目结构

下一步： Solana 钱包集成（Day 02）

---

时间估计： 2-3 小时
难度等级： ⭐ 简单
关键词： Next.js, TypeScript, Tailwind, i18n