Next.js
Next.js 是一个基于 React 的全栈框架，用于构建高性能、可扩展的 Web 应用。它简化了开发流程，支持多种渲染模式，适合各种项目需求。
注意：
目前 Pages 对 Next.js 版本的支持为 13.5+、14、15，最低版本为 13.5+。
核心特点
多渲染模式：支持 SSG（静态生成）、SSR（服务端渲染）、ISR（增量静态再生）和 CSR（客户端渲染），灵活适配静态和动态场景。
文件式路由：通过文件和文件夹结构自动生成路由（Pages Router 或 App Router），简化页面管理。
API 路由：内置 API 功能，轻松创建后端接口。
性能优化：自动代码分割和快速刷新，提升加载速度和开发体验。
TypeScript 支持：原生支持 TypeScript，增强代码可靠性。
优势
快速构建 SEO 友好、性能优越的应用。
统一前后端开发体验，降低学习成本。
适合从静态博客到复杂动态应用的各种场景。
快速开始
在 EdgeOne Pages 上开始部署 Next.js 的项目：
如果您已经有一个使用 Next.js 的项目，可以通过 git 仓库导入的方式创建项目
直接使用我们提供的一个 Next.js 示例项目，点击 一键部署 将项目部署至 Pages
或者从 Pages 的模板库里面选择 Next.js 的模板进行部署
Pages 对 Next.js 的支持
Pages 支持 Next.js 的旧版 Pages Router，但还是建议使用 App Router。
下表是 Pages 目前支持 Next.js 的关键特性。Pages 也会尽早支持更多的 Next.js 功能，但实验性功能可能尚未完全稳定。
Next.js 特性 | 支持情况 |
App Router | ✅ |
Pages Router | ✅ |
Server-Side Rendering (SSR) | ✅ |
Incremental Static Regeneration (ISR) | ✅ |
Static Site Generation (SSG) | ✅ |
React Server Components | ✅ |
Response Streaming | ✅ |
Route Handlers | ✅ |
Experimental framework features | 部分支持 |
Redirects and rewrites |
服务端渲染 (SSR)
服务端渲染允许您在服务器上动态渲染页面。每次用户发起请求时，服务器通过使用 getServerSideProps（Pages Router）或 App Router 中的服务器组件动态获取数据（如用户会话、查询参数）来动态生成 HTML。
默认构建设置如下：
构建命令:
npm run build输出目录:
.next
增量静态再生 (ISR)
增量静态再生是 SSG 的扩展，结合了 SSG 和 SSR 的优点，数据有更新时无需重新构建整个站点。ISR 为开发者带来三大优势：更佳的性能、更高的安全性以及更短的构建时间。
在构建时生成静态页面的过程中想要启用 ISR，可以使用 getStaticProps（Pages Router）或 App Router 的 revalidate 选项，通过 revalidate 设置定期（例如每 60 秒）或者按需调用 revalidatePath 方法来重新生成。
注意：
revalidatePath 方法目前属于实验性功能，可能尚未完全稳定。
默认构建设置如下：
构建命令:
npm run build输出目录:
.next
静态站点导出（SSG）
如果您不需要 Next.js 提供的任何动态功能，则可以使用它来生成完全静态的站点。配置为静态导出模式，可尝试修改 next.config.js 如下：
/** @type {import('next').NextConfig} */const nextConfig = {output: 'export', // 启用静态导出images: {unoptimized: true // 静态导出时需要禁用图片优化},trailingSlash: true, // 添加尾部斜杠，提高兼容性};
默认构建设置如下：
构建命令:
npm run build输出目录:
out
流式渲染
Pages 支持通过 React Server Components (RSC) 和 来使用流式渲染。
借助 Suspense 组件，页面内容可以从服务器逐步“流式”传输到客户端，而不是等待整个页面完全渲染后再一次性发送。这可以显著改善用户体验，尤其是在数据获取较慢或页面复杂的情况下。
代码示例（在 page.tsx 中）：
import { Suspense } from 'react';import { PostFeed, Weather } from './Components';export default function Posts() {return (<section><Suspense fallback={<p>加载帖子中...</p>}><PostFeed /> {/* 这个组件会异步获取数据并流式渲染 */}</Suspense><Suspense fallback={<p>加载天气中...</p>}><Weather /></Suspense></section>);}
PostFeed 和 Weather 可以独立流式渲染，如果一个慢，另一个不会阻塞。