为什么 Next.js 15 正在改变 Web 应用程序开发呢？-原创手记-慕课网

NextJS 15 Release Candidate (RC) 引入了一系列新功能和改进，旨在增强 web 应用程序的开发体验和性能。在继承了前一版本的优点的同时，此次发布也带来了许多创新功能，承诺简化工作流程并优化应用性能。以下是 NextJS 15 RC 中的关键更新的详细概述。

NextJS是什么呢？它是一个基于React的框架。

Next.js 是一个基于 ReactJS 库构建的开源 web 开发框架，它能够创建具备服务器端渲染（SSR）、静态站点生成（SSG）、增量静态重生成（ISR）、简化路由、图片优化、代码分割和中间层处理等功能的高性能和可扩展的应用。

由Vercel开发和维护，Next.js 通过提供标准结构和内置解决方案来简化开发过程，使使用 Next.js 的开发公司能够专注于写 React 代码而不是配置工具，允许这些公司更专注于编写 React 代码而不是配置工具，解决了常见的 Web 开发问题。

Next.js 15 RC 的新特性

尝试最新的 NextJS 15（或 NextJS 15 的最新版本），使用以下命令即可。

npm install next@rc react@rc react-dom@rc（安装next、react和react-dom的预发行版本）

NextJS 开发者们，你们有福了！现在有一个好消息，可以启动你们的下一个项目了！现在 CLI 工具新增了一个 —empty 标志，可以去除所有多余的部分。只需一个命令，你就能创建一个干净的“Hello World”页面作为你的起点。

npx create-next-app@rc --empty

支持 React 19 RC 版本

Next.js 15 RC 完全支持 React 19 RC 的预览版，包括新的 React 编译器，该编译器目前处于试验阶段。这一集成有望带来显著的性能提升以及更高效的 hydration 错误处理。React 编译器旨在自动优化代码，以减少需要手动使用类似 useMemo 和 useCallback 这样的钩子来优化代码的需求。

优化的缓存策略

在 Next.js 14.2 中引入了可配置的失效时间 staleTimes，用于客户端路由缓存，使 Next.js 开发者能够更精确地控制缓存失效。Next.js 15 RC 中的一个重大变化是对缓存策略进行了彻底改革。默认情况下，fetch 请求、GET 路由处理程序和客户端导航不再缓存。

这样就保证了用户看到的数据总是最新的，降低向用户展示过时信息的风险。现在NextJS开发团队在缓存策略上有更多的掌控，从而能够更好地优化应用性能。

要为特定请求启用缓存，您可以使用 cache:‘force-cache’ 选项来实现。

    fetch('https://...', { cache: 'force-cache' });
    // 强制从缓存中获取数据

这里我们使用 fetch 函数，并设置缓存策略为强制从缓存中获取数据。

部分预渲染功能（还在试验中）

Next.js 15 引入了一个名为部分预渲染 (PPR) 的实验功能。基于 Next.js 14，PPR 允许开发人员可以逐步采用混合渲染方式。

使用 PPR，你可以用 Suspense 边界包裹动态 UI 组件，并为特定的布局和页面启用部分预渲染。当请求进来时，Next.js 会立即提供一个静态 HTML 壳，然后在同一 HTTP 请求中渲染并流式传输动态部分。要使用 PPR，请在 next.config.js 中将 experimental.ppr 配置选项设置为 ‘incremental’。

    const nextConfig = {  
      experimental: {  
        ppr: 'incremental',  
      },  
    };  

    module.exports = nextConfig;

一旦所有部分启用了PPR，你就可以将ppr设置为true，在整个应用程序中启用它。

新的 next/after API（实验性）

名为 next/after 的 API 是 Next.js 15 RC 中的另一个实验性功能。此功能允许开发人员在不阻塞主响应的同时执行次要任务或清理操作。这一增加为处理响应后的逻辑提供了更多的灵活性，使代码管理更加简洁高效。潜在的应用场景包括分析日志记录、资源清理，或者在初始响应之后获取额外的数据。

要使用它，只需在 next.config.js 中添加 experimental.after 即可：

const nextConfig = {  
  experimental: {  
    after: true,  // 之后: true （注释：表示实验性功能是否启用）
  },  
};  

module.exports = nextConfig;

下面是一个使用 next/after 的例子：注释：next/after 保留原文形式。

    import { unstable_after as after } from 'next/server';  

    export default function Layout({ children }) {  
    // 次要任务  
    after(() => {  
    console.log('流式响应已完成');  
    });  
    // 主要任务  
    return <>{children}</>;  
    }

create-next-app 更新动态

用于生成新的 Next.js 项目的 create-next-app 工具在 Next.js 15 RC 版本中，得到了全新的设计。此外，现在可以使用一个标志启用 TurboPack，默认情况下该标志未启用。

TurboPack 是一个高性能的 JavaScript 捆绑器，旨在取代 Webpack，提供更快的构建时间和更顺畅的开发流程。这次更新简化了设置过程，并提升了整体开发体验，让开发更加愉快。

开启 Turbopack:

    "scripts": {  
    "dev": "开发环境启动，使用 --turbo 参数",  
    "build": "构建应用",  
    "start": "启动应用",  
    "lint": "进行代码检查"  
    }

捆绑外部库（稳定版本）

Next.js 15 在 App Router 和 Pages Router 中引入了稳定的配置选项来优化外部包的打包。这些改进旨在提升应用程序的冷启动速度，并为开发人员提供更多控制外部依赖项在应用程序中的包含方式。

补水问题改进

水化错误，由于服务器端渲染和客户端渲染内容之间的不匹配而发生，一直是 Next.js 中常见的问题。在 Next.js 14.1 的改进基础上，Next.js 15 进一步提升了 Next.js 开发者在遇到水化错误时的开发体验。现在，水化错误视图包含了更详细的错误信息、源代码片段和解决建议，让调试变得更加高效。

最后的想法

虽然 Next.js 15 RC 还不是正式的重大版本发布，企业和开发者不应等待探索其潜力。利用 Next.js 15 RC 版本进行新特性的实验和测试，可以更好地拥抱机会。这为正式发布后的平稳过渡和快速采用打下良好基础。通过提前使用 Next.js 15 RC，你可以更好地利用其全部功能，一旦正式版本发布。

Next.js 15 RC 带来了一系列新功能和改进，使使用 Next.js 的开发团队能够轻松构建高性能动态网页应用。从支持 React 19 RC 版本到缓存更新、部分预渲染和优化开发体验，这次发布的 Next.js 15 为 Next.js 未来的开发奠定了基础。

一如既往，仔细评估这些新特性，彻底测试它们，并向Next.js团队提供反馈至关重要。通过与社区的合作，我们可以引领Next.js的发展方向，并构建更强大、更高效的web应用。

厌倦了缓慢和卡顿的网页应用吗？是时候升级到NextJS开发服务的时刻到了！Solutelabs是一家ReactJS开发公司，能够将您的网站变成高性能机器。真的，想要看看有什么可能吗？真的，让我们一起打造您网站的未来。