个人网站初始化教程与总结（基于 Next.js + Tailwind + next-intl）

个人网站初始化教程与总结（基于 Next.js + Tailwind + 多语言）

📌 项目定位

• 目标：主打「求职展示」，兼顾后续「自由职业扩展」
• 当前模块重点：首页 + 联系方式展示 + 多语言支持
• 非重点模块：写作博客（可后期添加）

---

🛠 技术栈选型

类别	技术/工具	理由
前端框架	Next.js 14 (App Router)	React 生态，SSR 支持强，内建路由，适合部署
样式框架	Tailwind CSS	实用原子化 CSS，开发高效，样式统一
多语言支持	next-intl	App Router 支持好，文档清晰，灵活的多语言处理
图标	React Icons / Lucide	社交图标丰富，支持自定义颜色
Git 提交规范	Commitlint + Husky	保持提交信息清晰规范，便于团队协作
UI 组件（推荐）	shadcn/ui 或 Chakra UI	可选增强 UI 风格一致性，尤其适用于后续组件开发

---

📂 项目结构（基于 src）

personal-website/
├── public/                      # 静态资源，如头像、favicon 等
├── src/
│   ├── app/
│   │   ├── [locale]/page.tsx   # 首页（按语言划分）
│   │   ├── layout.tsx          # 根布局，注入多语言上下文
│   │   └── i18n.ts             # next-intl 配置入口
│   ├── components/             # 可复用组件，如 Header, Footer
│   ├── messages/               # 多语言 json 文件（en.json / zh.json）
│   ├── lib/                    # 工具方法（如 routing.ts）
│   └── styles/                 # 自定义全局样式（可选）
├── .gitignore
├── commitlint.config.js
├── tailwind.config.js
├── next.config.js
└── README.md

---

开发流程

1. 初始化项目

npx create-next-app@latest personal-website --ts --app --tailwind
cd personal-website
git init

⚠️ 项目名不能包含大写字母，比如 personalWebsite ❌ → personal-website ✅

---

2. 配置多语言（next-intl）

具体的next-intl官网指导：next-intl官网教程

安装依赖：

npm install next-intl

创建配置文件：

• src/messages/en.json、src/messages/zh.json：翻译内容
• src/app/layout.tsx：使用 NextIntlClientProvider
• src/app/i18n.ts：

import {getRequestConfig} from 'next-intl/server';
import {hasLocale} from 'next-intl';
import {routing} from '../lib/routing';

export default getRequestConfig(async ({requestLocale}) => {
  const locale = hasLocale(routing.locales, requestLocale)
    ? requestLocale
    : routing.defaultLocale;

  return {
    locale,
    messages: (await import(`../messages/${locale}.json`)).default
  };
});

---

3. 使用图标 + Tailwind 配色美化联系方式

• 使用 react-icons 引入 GitHub / Mail / LinkedIn 等图标
• 结合 Tailwind 加入 hover 效果与统一配色

---

4. 初始化 Git 提交规范

npm install --save-dev husky commitlint @commitlint/config-conventional
npx husky install

创建 .husky/commit-msg：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install commitlint --edit $1

配置 commitlint.config.js：

module.exports = { extends: ['@commitlint/config-conventional'] };

---

5. 配置 .gitignore

node_modules
.next
out
.env
.DS_Store
*.log
.vscode

---

6. 启动开发服务器

npm run dev

---

🚀 部署上线

推荐方式：Vercel

1. 将项目推送到 GitHub
2. 登录 vercel.com
3. 选择你的 GitHub 仓库自动部署
4. 支持绑定自定义域名

vercel发布后的可访问地址：我的个人网站