起一个 Next.js 项目

创建项目

npx create-next-app@latest my-site

会问你几个选项——推荐配置：

✓ TypeScript        Yes      ← 强烈推荐
✓ ESLint            Yes
✓ Tailwind CSS      Yes      ← 这系列要用
✓ src/ directory    Yes      ← 代码更整齐
✓ App Router        Yes      ← 现代 React
✓ Turbopack         Yes      ← 更快的 dev 服务器
✓ Import alias      @/*      ← 默认值

完成后：

cd my-site
npm run dev

打开 http://localhost:3000 看到 Next.js 默认页面 = 成功。

项目结构

my-site/
├── src/
│   └── app/                     ← App Router 的入口
│       ├── layout.tsx            根布局（所有页共享）
│       ├── page.tsx              首页（"/"）
│       ├── globals.css           全局样式（含 Tailwind）
│       └── favicon.ico
├── public/                       静态文件（直接 / 访问）
├── next.config.ts                Next.js 配置
├── tsconfig.json                 TypeScript 配置
├── tailwind.config.ts            Tailwind 配置
├── postcss.config.mjs            PostCSS 配置
├── package.json
└── .gitignore

修改首页

打开 src/app/page.tsx，全部替换：

export default function Home() {
    return (
        <main className="flex min-h-screen items-center justify-center">
            <h1 className="text-4xl font-bold">
                Hello WadeLy
            </h1>
        </main>
    );
}

保存 → 浏览器自动刷新 → 看到大字 "Hello WadeLy"。

几个常用命令

npm run dev          # 开发模式（热重载）
npm run build        # 生产构建（生成静态 + 优化代码）
npm run start        # 跑生产构建的结果
npm run lint         # ESLint 检查

端口被占用怎么办

npm run dev -- -p 4000     # 改成 4000 端口

卡住了？

# 删 node_modules 重装
rm -rf node_modules .next package-lock.json
npm install

Git 化项目

cd my-site
git init
git add .
git commit -m "init: my-site"

# 推到 GitHub（需要先在 GitHub 建仓库）
git remote add origin git@github.com:you/my-site.git
git push -u origin main

项目模板

如果你想要更丰富的起步模板：

# 各种 starter（搜 awesome-nextjs-starters）
npx create-next-app@latest --example with-mdx my-blog
npx create-next-app@latest --example api-route-rest my-api

或用 shadcn/ui 起步：

npx create-next-app@latest my-site
cd my-site
npx shadcn@latest init

下一篇：JSX 语法基础。