全栈开发个人博客01：创建项目

通过免费资源开发个人博客，既能展示个人品牌和技术能力，又能实践全栈开发技术，是一个零成本但高价值的项目实践。

1. 技术选型

• 编辑器：Cursor、VSCode
• 前端：Next.js、Responsive Design、Internationalization、Tailwind CSS、Shadcn UI、Zustand
• 后端：Next.js API Routes、GraphQL
• 数据库：PostgreSQL、Prisma
• 部署：Vercel
• 存储: AWS S3
• 登录: Auth0

2. 项目配置

1. 前端项目初始化

npx create-next-app@latest my-blog

用最新的Next.js创建应用，选择typescript、eslint、tailwind css、app router、src/app目录结构。

2. Pnpm 配置

// .npmrc
registry="https://registry.yarnpkg.com/"

使用Pnpm安装依赖，节省磁盘空间，配置npm源，使用yarn的源，解决npm源被墙的问题。

3. 配置编辑器

// .VSCode settings.json
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": "explicit",
},
"[typescript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},

编辑器设置保存自动使用Prettier格式化代码，使用ESLint检查代码。

4. Prettier 配置

// prettier.config.js
module.exports = {
  plugins: ['prettier-plugin-tailwindcss'],
  semi: false,
  singleQuote: true,
  'prettier.printWidth': 120,
}
// .eslintrc.json
{
  "extends": ["next/core-web-vitals", "prettier"],
}

Prettier 配置，使用Tailwind CSS插件，可以自动调整样式顺序，使用单引号，120字符换行，不需要分号。

5. ESLint 配置，使用Next.js核心规则，使用Prettier规则。

{
  "extends": ["next/core-web-vitals", "prettier"],
  "rules": {
    "react/no-unescaped-entities": 0,
    "@next/next/no-html-link-for-pages": 0
  }
}

3. 启动项目

pnpm i
pnpm dev

完成以上配置，即可开始开发，访问 http://localhost:3000 即可看到效果。