Next.js 14：虽无新 API，但不乏重大变更

作者 | 丁晓昀、核子可乐

2023 Next.js Conf 大会已经于加利福尼亚州旧金山的 SFJazz 中心举行，众多行业专家和优秀演讲者汇聚一堂。本文梳理了本届 Next.js Conf 大会的重要内容。

要点汇总

• Turbopack 又提速了！
• Server Actions 迎来稳定版。
• Partial Prerendering 部分预渲染功能推出预览版。
• Next.js Learn 免费课现已上线。

Next.js 编译器进一步增强

自版本 13 以来，Next.js 团队就一直在孜孜不倦地提升本地开发性能。新版本又带来了增量化增强方法，而一系列改进的核心就体现在基于 Rust 的 Turbopack 引擎身上。通过快速刷新，本地服务器启动速度提高了 53.3%，代码更新速度提高了 94.7%。相应的稳定版也将按计划发布，有望带来更加可靠、高效的开发体验。

Server Actions 迎来稳定版

在 Next.js 14 当中，Server Actions 终于迎来稳定版。开发者无需为后端任务手动创建 API 路由，现在可以直接在 React 组件中定义服务器端功能，从而允许客户端与服务器间实现无缝交互，甚至可以在 App Router 模型当中合并错误处理、缓存、重新验证与重新定向。此次更新的意义在于简化开发者工作流程，同时增强用户与应用之间的交互。对于各位 TypeScript 用户来说，稳定版功能还能更好地保障客户端与服务器间实现类型安全。此次稳定升级凸显出 Next.js 项目为增强客户端与服务器间协作所做出的持续努力，也承诺带来更加精简、愈发强大的 Web 开发体验。

代码语言：javascript复制

// app/page.tsx
export default function Page() {
  async function create(formData: FormData) {
    'use server';
    await db.form.insertOne({ formData });
  }
  return (
    <form action={create}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

Partial Prerendering 部分预渲染 (预览版)

部分预渲染旨在将静态渲染的速度优势，与动态个性化响应的灵活性相结合。这项编译器优化依靠 Rewact Suspense 来提供快速的初始静态响应，同时可根据用户交互或其他触发器动态替换组件。新功能简化了渲染模型，无需学习新的 API，且目前正在积极开发当中。

代码语言：javascript复制

// app/page.tsx
export default function Page() {
  return (
    <main>
      <header>
        <h1>My Store</h1>
        <Suspense fallback={<CartSkeleton />}> // skeleton loads while data is being loaded from your database
          <ShoppingCart /> // Replaces the skeleton when data loading is finished
        </Suspense>
      </header>
      <Banner />
      <Suspense fallback={<ProductListSkeleton />}>
        <Recommendations />
      </Suspense>
      <NewProducts />
    </main>
  );
}

元数据改进

Next.js 14 解决了在传输页面内容的数据流之前，向浏览器发送相关视口、配色方案和主题的关键元数据这一难题。这项工作有助于防止屏闪或布局变化，从而增强用户体验。部分已弃用的元数据选项将被新选项取代，以进一步推动改造效果。

教育和社区

Next.js 的全新免费课程现已发布，涵盖从样式、字体与图像优化到数据库设置、错误处理等广泛主题。这批新增内容也再次证明，围绕 Next.js 建立的社区和教育资源仍在不断扩展。

教育社区：

https://nextjs.org/learn

重大变更

新版本还迎来了几项重大变更和弃用，为改进功能和简化开发体验铺平了道路。

• 最低 Node.js 版本要求已更新至 18.17。
• WASM Target 被移除。
• @next/font 被替换为 next/font。
• ImageResponse 导入由 next/server 变更为 next/og。
• next export 被弃用 ; 现在使用 output: 'export'。

主题演讲

受篇幅所限，下面推荐会议期间的部分精彩演讲。

“没有新 API”（No New APIs）

在这场主题演讲中，Guillermo Rauch 讨论了 Next.js 的发展和未来前景。演讲重点介绍了 Next.js 14 版本的定位，即提高性能并简化开发流程，而非引入新的 API。Guillermo 还谈到 Next.js 14 如何立足 React Server Components 等基础技术进行构建，并在预览中引入了名为“Partial Prerendering”部分预渲染的新功能，旨在加快初始与动态视觉效果且不影响开发者体验。

演讲链接：https://www.youtube.com/live/8q2q_820Sx4?si=fO_5hPPaKEPLKbiw&t=1387

Next.js 如何实现 React 的未来前景（How Next.js is Delivering React’s Vision for the Future）

Sam 讨论了 Next.js 如何实现 React 的未来愿景，而且特别关注了如何将服务器组件与 Server Actions 服务器操作集成至 Next.js 当中。他解释称，服务器组件和服务器操作提供“一流的数据获取和处理方式”，对 React 的固有强项可组合性做出有力补充。