什么是React和Next.js

从"手动搬砖"到"自动化工厂"

用原生 JavaScript 操作 DOM 写网页，就像手工搬砖盖房子——小项目可以，但复杂项目会累死。React 就是那台自动化造房机器，而 Next.js 则是在 React 基础上建好的"精装样板间"。

💡 类比：原生JS是手动挡汽车，React是自动挡，Next.js是带导航、倒车影像、自动泊车的智能汽车。

React：用组件搭积木

React 是 Facebook（Meta）开发的前端库，核心思想是组件化——把页面拆成一个个可复用的积木块。

什么是组件？

React 组件的写法

// 一个简单的 React 组件
function ArticleCard({ title, author, date }) {
  return (
    <div className="rounded-lg border p-4 shadow">
      <h2 className="text-xl font-bold">{title}</h2>
      <p className="text-gray-500">{author} · {date}</p>
    </div>
  );
}

// 使用组件（像 HTML 标签一样）
<ArticleCard
  title="学习React"
  author="张三"
  date="2024-01-01"
/>

JSX：在 JavaScript 中写 HTML

React 使用 JSX 语法，让你可以在 JS 中直接写类似 HTML 的代码：

// JSX — JavaScript + HTML 混合
function Welcome() {
  const name = "张三";
  const isLoggedIn = true;

  return (
    <div>
      <h1>你好，{name}！</h1>
      {isLoggedIn ? <p>欢迎回来</p> : <p>请登录</p>}
    </div>
  );
}

React 三大核心概念

1. State（状态）

组件的数据，数据变化时页面自动更新：

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);  // 初始值为0

  return (
    <div>
      <p>你点了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>
        点我 +1
      </button>
    </div>
  );
}

2. Props（属性）

父组件传给子组件的参数：

// 父组件传递 props
function App() {
  return (
    <div>
      <UserCard name="张三" role="开发者" />
      <UserCard name="李四" role="设计师" />
    </div>
  );
}

// 子组件接收 props
function UserCard({ name, role }) {
  return (
    <div className="card">
      <h3>{name}</h3>
      <p>{role}</p>
    </div>
  );
}

3. useEffect（副作用）

组件加载时执行的操作（比如请求数据）：

import { useState, useEffect } from "react";

function ArticleList() {
  const [articles, setArticles] = useState([]);

  useEffect(() => {
    // 组件加载时，请求API获取数据
    fetch("/api/articles")
      .then((res) => res.json())
      .then((data) => setArticles(data));
  }, []);  // 空数组 = 只在首次加载时执行

  return (
    <ul>
      {articles.map((article) => (
        <li key={article.id}>{article.title}</li>
      ))}
    </ul>
  );
}

Next.js：React 的全栈框架

Next.js 是建立在 React 之上的全栈框架，由 Vercel 公司开发。它帮你解决了 React 没有解决的问题：

React vs Next.js

文件路由系统

Next.js 用文件夹结构定义页面路由——创建文件就是创建页面：

app/
  page.tsx              → /
  about/
    page.tsx            → /about
  articles/
    page.tsx            → /articles
    [id]/
      page.tsx          → /articles/123
  api/
    articles/
      route.ts          → /api/articles

服务端组件 vs 客户端组件

Next.js 的一个重要概念是服务端组件和客户端组件：

// 服务端组件（默认） — 可以直接读数据库
import { db } from "@/lib/db";

export default async function ArticlesPage() {
  const articles = await db.query("SELECT * FROM articles");

  return (
    <ul>
      {articles.map((a) => (
        <li key={a.id}>{a.title}</li>
      ))}
    </ul>
  );
}

// 客户端组件 — 需要交互时使用
"use client";
import { useState } from "react";

export default function LikeButton() {
  const [likes, setLikes] = useState(0);

  return (
    <button onClick={() => setLikes(likes + 1)}>
      ❤️ {likes}
    </button>
  );
}

一个 Next.js 项目的结构

my-nextjs-app/
  app/                  # 页面和路由
    layout.tsx          # 全局布局
    page.tsx            # 首页
    globals.css         # 全局样式
  components/           # 可复用组件
    Navbar.tsx
    Footer.tsx
  lib/                  # 工具函数
  public/               # 静态文件（图片等）
  package.json          # 项目配置
  tailwind.config.ts    # Tailwind 配置
  next.config.js        # Next.js 配置

快速创建 Next.js 项目

# 一行命令创建项目
npx create-next-app@latest my-app

# 进入项目目录
cd my-app

# 启动开发服务器
npm run dev

# 打开 http://localhost:3000 查看效果

🎯 AI编程小贴士：学 React/Next.js 最快的方式就是边做边学。告诉 AI"帮我用 Next.js 做一个博客网站"或者"帮我实现一个带搜索功能的文章列表组件"，它会帮你从零搭建，每一步都有注释说明。

小结

• React 是组件化的前端库，用 State + Props + JSX 构建UI
• 组件是可复用的UI积木，数据变化时自动刷新
• Next.js 在 React 基础上提供了路由、SSR、API 路由等全栈能力
• Next.js 的文件路由让创建页面变得极其简单
• 服务端组件可以直接读数据库，客户端组件处理用户交互
• 用 npx create-next-app 一行命令即可创建项目