Next.js

用于构建全栈 Web 应用的 React 框架，自动配置打包器与编译器

开发框架 AI 开发免费开源

访问官网 GitHub 文档

核心功能

界面仍用 React 组件编写，Next.js 负责补上路由、渲染、构建等能力，并把打包器、编译器这类底层工具自动配好。适合需要服务端渲染、静态导出或前后端一体交付的 React 项目。

功能亮点

目录即路由

在 app 下建 page.tsx 就得到一个页面，同级 layout.tsx 自动包裹该段下的所有路由

四条命令覆盖全流程

next dev 起开发服务器、next build 产出生产构建、next start 跑生产服务器

打包器已默认换成 Turbopack

无需额外配置即启用；确有需要时加 --webpack 参数回到 Webpack 构建

TypeScript 零配置接入

改个文件后缀再执行 next dev，框架会自动补装依赖并写入推荐的 tsconfig 配置

两套路由长期并行

App Router 内置 React canary 以支持 Server Components，Pages Router 保持向后兼容

适用场景

• 对 SEO 与首屏速度有要求的 React 站点，用服务端渲染直出 HTML
• 前后端一体交付的业务系统，页面与服务端逻辑放在同一个 app 目录里管理
• 希望省掉打包器、编译器配置成本，直接从一条命令拿到可用工程的 React 团队

安装配置

bash

系统要求：Node.js 20.9 及以上；支持 macOS、Windows（含 WSL）与 Linux。

用 CLI 创建（最快的方式）——

npx create-next-app@latest

跳过所有提问、直接用推荐默认项（TypeScript、Tailwind CSS、ESLint、App Router、Turbopack，导入别名 @/*）:
pnpm create next-app@latest my-app --yes
cd my-app
pnpm dev

交互式创建:
pnpm create next-app

手动安装到项目里:
pnpm i next@latest react@latest react-dom@latest

随后在 package.json 中加入脚本:
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint",
    "lint:fix": "eslint --fix"
  }
}

启动开发服务器后访问 http://localhost:3000

使用方法

bash

// app/layout.tsx —— 根布局，必须含 <html> 与 <body>
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

// app/page.tsx —— 首页，访问 / 时与 layout.tsx 一同渲染
export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

# 启动开发服务器，然后编辑 app/page.tsx 即可看到实时更新
npm run dev