Next.js 15版本的关键更新解读-原创手记-慕课网

这一更新强调了 Next.js 15 中引入的关键更新和改进，旨在优化开发工作流程，提高性能，并应对重要变化。通过新的 codemod CLI 进行自动化升级，同时显著优化 Turbopack，并且增强服务器操作的安全性等功能，Next.js 15 提供了一系列工具简化流程。以下是对最重要特性和更新的详细说明。

你可以访问关于 Next.js 15 的概览第一部分，链接在这里 LINK 🧑‍💻

集成Codemod CLI实现无缝升级

自动化代码转换工具（codemod）随每个主要的 Next.js 版本一起提供，以帮助简化不兼容更改的升级过程。新的增强型代码转换 CLI 进一步简化了升级过程。要升级到最新稳定版或预发布版，可以运行以下命令：这些工具和命令能够帮助您简化更新过程。

npx @next/codemod@canary, 升级到 rc 命令

这个工具会更新你的依赖项，展示可用的代码转换（codemod）工具，并引导你应用这些工具。命令行中指定的发行标签（例如 @rc，@canary）决定了升级所使用的版本。

Turbopack 开发工具

TurboPack 用于本地开发将在 Next.js 15 正式发布之后达到稳定，仍作为一个可选特性。您现在可以使用以下命令测试：

> 下一个 — Turbo

通过社区测试和内部努力，自第一个 Next.js 15 发行候选版本以来，已经解决了 54 个 GitHub 问题。最近的优化工作主要集中在冷启动编译性能上，这带来了以下结果：

内存使用降低25–35%
含有数千模块的大页面编译速度可以快30–50%

进一步的改进正在进行，包括持久缓存、减少内存使用以及为下一个构建命令使用Turbopack，目前已有96%的测试通过。

异步请求API。

为了准备未来的优化，我们正在将依赖于请求特定数据（如 headers、cookies、params 和 searchParams）的 API 迁移到异步处理方式。比如，下面是一个例子：

    import { cookies } from 'next/headers';  

    export async function AdminPanel() {  
      const cookieStore = await cookies();  
      // 获取名为'token'的cookie值
      const token = cookieStore.get('token');  
    }

此更改影响了诸如 cookies、headers、draftMode 和 params 等 API，这些 API 包括位于 layout.js、page.js 等文件中的。虽然这些 API 仍然可以同步访问但会显示警告信息，但我们建议您进行升级。

请运行以下 codemod 工具以帮助迁移（代码转换工具）。

npx @next/codemod@canary next-async-request-api .
运行此命令来更新API请求为异步处理。

如需更多细节，请查阅升级指南。

增强的服务器操作安全：

服务器操作是可以在客户端调用的服务器端函数。即使这些函数没有被引入，它们仍然是公开可访问的HTTP端点，这可能会无意地暴露。为解决这个问题，我们引入了一些安全增强措施：

未使用的代码移除： 未使用的服务器动作不会向客户端暴露其 ID。
安全的 ID： 每次构建生成不可预测的随机 ID，让猜测动作端点变得更难。

使用服务器;

export async function 更新用户操作(表单数据) {}
export async function 删除用户操作(表单数据) {}

静态路由标志

在开发过程中，现在 Next.js 会显示一个静态路由指示，区分静态路由和动态路由，从而帮助优化性能。提供页面渲染方式的视觉提示。

所有路线的渲染策略也可以在 next build 的输出信息中查看。

新组件

新的 <Form> 组件扩展了标准的 HTML <form> 元素的功能，提供了预取、客户端导航和渐进增强。它特别适用于像搜索表单这样的导航到新页面的表单。

    import Form from 'next/form';  

    export default function Page() {  
      return (  
        <Form action="/search">  
          <input name="query" placeholder="请输入查询" />  
          <button type="submit">搜索</button>  
        </Form>  
      );  
    }

功能有:

预取： 预取布局和加载UI以实现更快的导航。
客户端导航： 在表单提交时保留共享布局和客户端状态。
渐进增强： 即使JavaScript尚未完全加载，表单也能通过全页面导航正常工作。

支持 next.config.ts 配置文件

Next.js 现在支持 TypeScript 配置文件（ next.config.ts ），提供了类型安全，并且支持基于 NextConfig 类型的自动完成功能（例如：配置文件中的类型定义）。

    import type { NextConfig } from 'next';  

    const nextConfig: NextConfig = {  
      // 配置项  
    };  

    export default nextConfig;

instrumentation.js (版本)

instrumentation.js 文件及其 register() 接口已达到稳定状态。此功能可用于监控性能、跟踪错误，并且可以与诸如 OpenTelemetry 之类的可观察性库集成。

此外，onRequestError 钩子允许捕获并记录服务器错误周围的上下文，并将其报告给监控与跟踪工具。

    export async function onRequestError(err, request, context) {  
      await fetch('https://...', {  
        method: 'POST',  
        body: JSON.stringify({ 错误消息: err.message, request, context }),  
        headers: { 'Content-Type': 'application/json' },  
      });  
    }  

    export async function register() {  
      // 初始化您的可观测性提供商的SDK
    }

开发与构建改进:

服务器组件（HMR）

为了提高开发性能，HMR 对服务器组件已进行了改进。现在，HMR 可以复用之前的 fetch 响应，减少开发过程中的 API 调用开销。

更快的静态构建速度

静态生成已得到优化，通过利用初始渲染生成客户端导航数据和 HTML，以减少构建时间。此外，静态生成工作者现在在页面之间共享 fetch 缓存，以减少重复请求。

高级静态生成管理

现在提供了一些实验性功能，以提供更多对静态生成的控制选项。这些选项包括控制重试次数、并发工作的线程数和页面处理的阈值。我们建议只在特定的高级场景中使用这些选项，因为它们可能会增加资源消耗，并可能导致内存溢出的潜在风险。

    // nextConfig 是用于配置 Next.js 应用程序中实验性功能的对象
    const nextConfig = {  
      experimental: {  
        // 静态生成重试次数
        staticGenerationRetryCount: 1,  
        // 静态生成最大并发数
        staticGenerationMaxConcurrency: 8,  
        // 静态生成每个工人的最小页面数
        staticGenerationMinPagesPerWorker: 25  
      },  
    };  

    export default nextConfig;

自托管优化

当你自己托管应用时，现在可以对缓存控制策略（特别是 ISR 页面相关的）拥有更多的控制。主要进行了两项改进：

现在可以将 expireTime 的值设置在 next.config 中。
默认缓存时间现在已设置为一年。

此外，图片优化变得更加简单。不再需要手动安装 sharp —— 当 Next.js 以独立模式运行时，它会自动使用 sharp。

支持 ESLint 9 版本

随着 ESLint 8 在 2024 年 10 月 5 日停止支持，Next.js 开始支持 ESLint 9，并且保持向后兼容性。如果你的项目还没有使用新的 ESLint 配置格式，Next.js 将自动使用 ESLINT_USE_FLAT_CONFIG=false 以帮助过渡。例如 --ext 和 --ignore-path，已被移除，以配合未来的 ESLint 10 的更改。

总结。

Next.js 15 继续通过新增功能如 <Form> 组件、支持 next.config.ts 中的 TypeScript 以及稳定发布的 instrumentation.js 来增强开发体验。此外，还在多个方面对自建服务器、图片优化和静态页面生成进行了改进。

这些更新旨在简化开发，提升性能，并确保未来兼容 JavaScript 和 Node.js 生态系统。我们鼓励开发人员审查重大变更并利用提供的迁移工具以确保顺利过渡到 Next.js 15。

电报频道：https://t.me/clubReact/电报频道：/ Instagram主页：https://www.instagram.com/onix_react/Instagram主页：/ 脸书小组：https://www.facebook.com/groups/947784626278139/脸书小组：/ Threads主页：https://www.threads.net/@onix_react?hl=enThreads主页：/ GitHub主页：https://github.com/Onix-Systems/onix-reactGitHub主页：