Next.js 入门指南

什么是 Next.js

Next.js 是一个基于 React 的全栈框架，提供了文件路由、服务端渲染、静态生成等强大功能。

App Router

Next.js 13+ 引入了 App Router，使用 app/ 目录管理路由：

• app/page.tsx → 首页
• app/blog/page.tsx → /blog
• app/blog/[slug]/page.tsx → /blog/xxx

服务端组件 vs 客户端组件

默认情况下，App Router 中的所有组件都是服务端组件。如果需要使用状态、事件等交互功能，在文件顶部添加 "use client"。

"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Tailwind CSS

Next.js 原生支持 Tailwind CSS，创建项目时勾选即可。

总结

Next.js 是目前搭建 React 应用的最佳选择之一，值得花时间学习。