Next.js 新版本 v13.4 来了

Next.js v13.4 真的来了

2023 年 5 月 5 日，Tim Neutkens 在 NextJS 官网发布了最新的文章来宣告最新版本Next.js正式发布。

今天，就让笔者来分享一下关于Next.js最新版本v13.4的一些消息吧。

Next.js ？

为了方便不熟悉Next.js的朋友阅读本文，笔者先简单介绍一下Next.js是什么。

Next.js by Vercel - The React Framework for the Web：Next.js 是一个基于 React 的轻量级框架，用于构建高性能的 Web 应用程序和静态网站。

它采用了服务器端渲染（SSR）和静态生成（SSG）的技术，可以在客户端和服务器端之间实现快速导航和无缝的数据传输。Next.js 支持自动代码分割、热重载和静态文件服务，并且与许多流行的技术栈和部署平台兼容。

它还提供了一系列丰富的功能，例如动态导入、API 路由、静态优化和预渲染等，可以大大提高开发人员的生产力和开发效率。通过使用 Next.js，开发人员可以轻松构建出具备优秀性能、可维护性和可扩展性的现代 Web 应用程序。

Next.js创立的目标就是提供一个易用的基于React的服务端渲染应用解决方案，乃至创建一个更加动态、个性化和全球化的网络。

最新版本

六个月前，开发团队发布了Next.js v13版本，而最新版本的Next.js已经更新到了v13.4！并且相对于之前的内容有了一些评论两极分化的改动和更新。

首先来看看以下更新内容：

APP Router 稳定版
- React 服务器组件
- 嵌套路由和嵌套布局
- 简化数据获取
- 流渲染和Suspense
- 更好的内置 SEO 功能
Turbopack 测试版
Server Action 测试版

在Next.js发布之初（2016 年）便提供了基于目录的约定式路由方案，亦被称为“基于文件系统的路由”，此方案一直是Next.js的核心功能。

随着社区的发展和基于Next.js应用的普及，开发人员发现旧的方案很难实现自定义布局中诸如布局嵌套、单组件的自定义加载和错误状态处理等功能的需求。

在v13.4中，开发者团队发布了一个新的路由器系统：基于新的app/目录创建新的路由系统，开发者不必使用自定义的_app文件来设置全局共享布局，而是转移到了app路由下的layout.ts文件下，并且各个层级的布局可以相互嵌套。

举个例子：

// New: App Router ✨
// app/layout.js
//
// The root layout is shared for the entire application
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

// app/dashboard/layout.js
//
// Layouts can be nested and composed
export default function DashboardLayout({ children }) {
  return (
    <section>
      <h1>Dashboard</h1>
      {children}
    </section>
  );
}

此外，除非显式地在文件最上方声明'use client';来告知编译器这是一个客户端组件，否则所有在app/目录下的组件都是服务端组件。

服务端组件的简单示例：

// app/page.js

export default async function Page() {
  const res = await fetch('https://api.example.com/...');
  // The return value is *not* serialized
  // You can use Date, Map, Set, etc.
  const data = res.json();

  return '...';
}

获取数据的函数将会仅在服务端运行，数据获取将会很明显地取决于开发人员的需求，开发者可以获取数据并且组成任何组件（包括项目内组件和第三方支持的服务端组件）。

更多内容，请阅读官方文档：Getting Started: Installation | Next.js。

至于Turbopack和Server Action，二者都还处于Beta版本。前者号称最快的打包工具，开发者可以通过next dev --turbo加快本地开发模式下的编译速度，并且很快这个功能就将推进到next build --turbo（官方团队放话）。

后者则是随着React对于表单状态管理和数据缓存、验证等需求的思索产生的服务端解决方案（此前一直是客户端来处理），这将运行开发者在服务器上变更数据，直接调用函数而无需创建基于客户端和服务端的 API 层。

听起来很美好，但现在还不是时候，大多数开发者追求的还是稳定，让子弹先飞一会吧。

最后

好了，今天的分享就先到这里，后续笔者将用Next.js实现自己的应用程序，同时也会发一些相关的知识分享，欢迎大家一起讨论👏🏻👏🏻

Next.js ？

最新版本

最后

Friends