Next.js 15 新特性文档

Next.js 15 是一个重要的版本更新,引入了许多新特性和改进,旨在提升开发效率、性能和用户体验。以下是 Next.js 15 的主要新特性及其详细说明。


1. React 19 支持

Next.js 15 全面支持 React 19,包括其新特性如 Actions、React Compiler 等。

主要特性:

  • React Compiler(实验性) :自动优化代码,减少手动使用 useMemouseCallback 的需求,提升性能并降低错误率。
  • 新钩子 :如 useActionStateuseFormStatususeOptimistic,简化状态管理和表单处理逻辑。
  • 向后兼容性:支持 Pages Router 使用 React 18,同时 App Router 使用 React 19,确保平滑过渡。

2. 缓存策略改进

Next.js 15 对缓存机制进行了重大调整,默认行为更加灵活。

主要变化:

  • Fetch 请求和 GET 路由处理程序默认不再缓存 :开发者需显式配置缓存策略(如 cache: 'force-cache')。
  • 客户端路由缓存 :Page 组件的默认缓存行为被取消,开发者可通过 staleTimes 配置自定义缓存时间。

代码示例:

javascript

复制

java 复制代码
// next.config.js
const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 60, // 动态路由缓存 60 秒
      static: 300, // 静态路由缓存 300 秒
    },
  },
};

module.exports = nextConfig;

3. 异步请求 API

Next.js 15 将依赖请求特定数据的 API(如 cookiesheadersparamssearchParams)改为异步,以减少渲染阻塞并提升性能。

代码示例:

javascript

复制

javascript 复制代码
import { cookies } from 'next/headers';

export async function AdminPanel() {
  const cookieStore = await cookies();
  const token = cookieStore.get('token');
  // ...
}

4. Turbopack Dev 稳定版

Turbopack 是 Next.js 15 中的新一代打包工具,现已进入稳定阶段。

性能提升:

  • 本地服务器启动速度提升 76.7%
  • 代码更新速度提升 96.3%
  • 初始路由编译速度提升 45.8% (无缓存时)。

5. 部分预渲染(PPR,实验性)

PPR 允许在同一页面中结合静态和动态渲染,优化性能和数据新鲜度。

适用场景:

  • 静态内容可以立即加载,而动态内容通过流式传输逐步加载。

6. 新组件与 API

主要新增:

  • <Form> 组件 :扩展了 HTML <form> 元素,支持预取、客户端导航和渐进增强,减少手动配置。
  • unstable_after API(实验性) :允许在响应完成后执行次要任务(如日志记录、分析),而不阻塞主响应。
  • forbiddenunauthorized API(实验性) :支持更细粒度的认证错误处理。

7. 开发者体验改进

主要改进:

  • 静态路由指示器:开发模式下显示静态路由,帮助优化性能。
  • 错误调试增强:改进的 hydration 错误视图和源映射,提供更清晰的错误提示和修复建议。
  • TypeScript 支持 :支持 next.config.ts 文件,提供类型安全和自动补全。

8. 安全与自托管优化

主要改进:

  • Server Actions 安全性增强:通过死代码消除和安全动作 ID,减少未使用的 Server Actions 暴露。
  • 自托管改进 :增强对 Cache-Control 指令的控制,优化图像处理(自动使用 sharp)。

9. 性能与构建优化

主要改进:

  • 静态生成速度提升:减少慢速网络请求的影响,优化构建时间。
  • ESLint 9 支持:提升代码质量和开发效率。

总结

Next.js 15 通过 React 19 支持、缓存策略优化、Turbopack 稳定化等特性,显著提升了开发效率和性能。无论是新项目还是现有项目升级,这些改进都值得尝试。更多详细信息可参考 Next.js 官方博客


附录:代码示例汇总

Fetch 请求缓存配置

javascript 复制代码
async function fetchCachedData() {
  const res = await fetch('https://api.example.com/data', {
    cache: 'force-cache', // 强制缓存
  });
  return res.json();
}

客户端路由缓存配置

javascript 复制代码
// next.config.js
const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 60, // 动态路由缓存 60 秒
      static: 300, // 静态路由缓存 300 秒
    },
  },
};

module.exports = nextConfig;

异步请求 API

javascript 复制代码
import { cookies } from 'next/headers';

export async function AdminPanel() {
  const cookieStore = await cookies();
  const token = cookieStore.get('token');
  // ...
}

相关推荐
zwjapple6 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20208 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem9 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊9 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术9 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing9 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止9 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall9 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴9 小时前
简单入门Python装饰器
前端·python
袁煦丞10 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作