Next13 特性 | Serendipity

type

status

date

slug

summary

安装

Next13特性

文件路由系统的改变

Next12及之前的

Next13

增加了增加了一个 app 目录，每一层路由必须建一个文件夹，在该文件夹中建立 page.tsx 作为该路由主页面

app文件夹所支持的特性:

Layouts: • 轻松地在路由之间共享UI，同时保留状态并避免昂贵的重新渲染。简单说，现在路口可以持久化了

Server Components: • 将服务器优先作为大多数动态应用程序的默认设置

Streaming: 显示即时加载状态和流在单位的UI，因为他们被渲染。

Support for Data Fetching: 异步服务器组件和扩展获取API支持组件级获取

Layouts

app目录可以很容易地布局复杂的接口，这些接口可以跨导航维护状态，避免昂贵的重新渲染，并启用高级路由模式。此外，您还可以嵌套布局，并将应用程序代码与路由(如组件、测试和样式)组合在一起。

目录结构

Next.js 提供了一组特殊文件来创建在嵌套路由中具有特定行为的 UI：

page.js：创建路由的唯一 UI 并使路径可公开访问。

route.js

：为路由创建服务器端 API 端点（在 next@canary 中可用）。

layout.js：为片段及其子片段创建共享 UI。布局包裹页面或子段。

template.jslayout.js：与类似，只是在导航上挂载了一个新的组件实例。除非您需要这种行为，否则请使用布局。

loading.js React Suspense Boundary：为片段及其子片段创建加载 UI。将页面或子段包装在中，在加载时显示加载 UI。

error.js：为段及其子段创建错误 UI。在React Error Boundary中包装页面或子段，如果发现错误则显示错误 UI。

global-error.jserror.jslayout.jstemplate.jshead.js：类似于、和中的错误。

not-found.jsnotFound：创建 UI 以显示何时在路由段内抛出函数。

Server Components

app目录下的所有组件默认都是React Server组件，包括特殊文件和配置的组件。这允许您自动采用服务器组件，而不需要额外的工作，并获得开箱即用的出色性能。

详细关于 React Server Components的作用：

Introducing Zero-Bundle-Size React Server Components – React Blog

2020 has been a long year. As it comes to an end we wanted to share a special Holiday Update on our research into zero-bundle-size React Server Components. To introduce React Server Components, we have prepared a talk and a demo. If you want, you can check them out during the holidays, or later when work picks back up in the new year. React Server Components are still in research and development. We are sharing this work in the spirit of transparency and to get initial feedback from the React…

https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html

Client Compoents

客户端组件使您能够向应用程序添加客户端交互性。在Next.js中，它们在服务器上被预渲染，在客户端上被注水。

在头部添加 'use client'; 标明使用客户端组件

Streaming

借助 Next.js 中的服务器组件和嵌套布局，您可以立即呈现页面中不需要特定数据的部分，并显示正在获取数据的页面部分的加载状态。使用这种方法，用户不必等待整个页面加载完毕就可以开始与之交互。

Data Fetching

将这种组件进行封装再加入Suspence即可实现Streaming，后面会将

a powerful new way to fetch data and handle promises inside components

重要!!!，通过fetch的形式来实现三种渲染模式

静态站点生成 (SSG)、服务器端呈现 (SSR) 和增量静态重新生成 (ISR)

💡

In the app directory, you can fetch data inside layouts, pages, and components – including support for streaming responses from the server.

用于实现Streaming

Introducing Turbopack (Alpha)

将 Turbopack alpha 与 Next.js 13 结合使用会产生：

更新速度比 Webpack 快 700 倍

更新速度比 Vite 快 10 倍

比 Webpack快 4 倍的冷启动

next/image

Next.js 13 引入了一个强大的新图像组件，让您无需布局偏移即可轻松显示图像，并按需优化文件以提高性能。

新的图像组件：

发送更少的客户端 JavaScript

更容易设计和配置

默认情况下更容易访问需要alt标签

与 Web 平台保持一致

更快，因为本机延迟加载不需要水合作用

@next/font

Next.js 13 引入了一个全新的字体系统：

自动优化您的字体，包括自定义字体

删除外部网络请求以改善隐私和性能

任何字体文件的内置自动自托管

使用 CSSsize-adjust属性自动实现零布局偏移

next/link

next/link不再需要手动添加<a>为孩子

参考链接

Blog - Next.js 13 | Next.js (nextjs.org)

安装