编辑“︁Next.js”︁

{{NoteTA
|G1=IT
}}

'''Next.js''' 是一个基于 [[React]] 的开源 [[JavaScript]] 框架，用于构建服务器渲染（SSR）或静态生成的 [[Web应用]]。由 [[Vercel]] 公司开发和维护，Next.js 提供了开箱即用的功能，如路由、代码分割、静态导出和服务器端渲染，使得开发者能够快速构建高性能的现代 Web 应用。

== 核心特性 ==
Next.js 提供了多项强大的功能，使其成为构建现代 Web 应用的理想选择：

* '''服务器端渲染（SSR）'''：Next.js 支持在服务器端预渲染页面，提升首屏加载速度和 [[SEO]] 优化。
* '''静态站点生成（SSG）'''：支持生成静态 HTML 文件，适合内容不频繁变化的网站。
* '''混合渲染模式'''：允许开发者按页面选择渲染方式（SSR、SSG 或客户端渲染）。
* '''文件系统路由'''：基于文件目录自动生成路由，无需额外配置。
* '''API 路由'''：内置 API 路由功能，可直接在项目中编写后端逻辑。
* '''图像优化'''：自动优化图片，支持懒加载和多种格式转换。
* '''快速刷新（Fast Refresh）'''：开发时提供即时反馈，提升开发体验。

== 安装与使用 ==
要开始使用 Next.js，需要先安装 [[Node.js]] 和 [[npm]]（或 [[Yarn]]）。以下是创建一个新 Next.js 项目的步骤：

<syntaxhighlight lang="bash">
npx create-next-app@latest my-next-app
cd my-next-app
npm run dev
</syntaxhighlight>

运行后，Next.js 开发服务器会启动，默认访问 `http://localhost:3000`。

=== 基本页面示例 ===
Next.js 使用文件系统路由，在 `pages` 目录下创建的文件会自动成为路由。例如，创建 `pages/about.js` 会自动生成 `/about` 路由：

<syntaxhighlight lang="javascript">
// pages/about.js
export default function About() {
  return <h1>关于我们</h1>;
}
</syntaxhighlight>

== 渲染模式 ==
Next.js 支持多种渲染模式，开发者可以根据需求选择：

=== 静态生成（SSG） ===
适合内容不频繁变化的页面，在构建时生成 HTML：

<syntaxhighlight lang="javascript">
// pages/index.js
export default function Home({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

// 在构建时获取数据
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();
  return { props: { posts } };
}
</syntaxhighlight>

=== 服务器端渲染（SSR） ===
适合需要频繁更新或依赖用户请求的页面：

<syntaxhighlight lang="javascript">
// pages/profile.js
export default function Profile({ user }) {
  return <div>用户名: {user.name}</div>;
}

// 每次请求时获取数据
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/user');
  const user = await res.json();
  return { props: { user } };
}
</syntaxhighlight>

== 实际应用案例 ==
Next.js 被许多知名公司采用，包括：

* [[Hulu]] - 使用 Next.js 构建其流媒体平台
* [[Twitch]] - 用于部分前端页面
* [[Nike]] - 电子商务体验
* [[GitHub]] - 开发者文档站点

== 性能优化 ==
Next.js 内置了多项性能优化功能：

* '''自动代码分割'''：只加载当前页面需要的代码
* '''预取链接'''：鼠标悬停在链接上时预加载目标页面资源
* '''图像优化'''：通过 `next/image` 组件自动优化图片
* '''中间件'''：允许在请求完成前运行代码，可用于认证、重定向等

== 生态系统 ==
Next.js 拥有丰富的生态系统：

* [[Vercel]] - 官方托管平台，提供一键部署
* [[TypeScript]] - 内置支持
* [[CSS Modules]] - 开箱即用
* [[Sass]] - 支持通过插件使用
* [[GraphQL]] - 可与多种 GraphQL 客户端集成

== 与其他框架比较 ==
{| class="wikitable"
|+ Next.js 与其他框架比较
|-
! 特性 !! Next.js !! [[Create React App]] !! [[Gatsby]]
|-
| 服务器渲染 || ✔️ || ❌ || ❌
|-
| 静态生成 || ✔️ || ❌ || ✔️
|-
| 文件系统路由 || ✔️ || ❌ || ✔️
|-
| API 路由 || ✔️ || ❌ || ❌
|}

== 未来发展 ==
Next.js 持续演进，最新版本不断引入新功能，如：

* 增量静态再生（ISR）
* 边缘函数支持
* 改进的开发工具
* 更强大的数据获取方式

== 参见 ==
* [[React]]
* [[Vercel]]
* [[Web开发]]
* [[JavaScript框架]]

== 参考资料 ==
{{Reflist}}

[[Category:JavaScript框架]]
[[Category:Web开发]]
[[Category:前端开发]]