Next.js 13.3 近日正式发布，新版本添加了多个社区用户要求的受欢迎的功能，并会在下一个次要版本中将 App Router 标记为稳定，Next.js 13.3 具体更新内容包括：
基于文件的 Metadata API
在 Next.js 13.2 中，Next.js 公布了一个新的 Metadata API，允许用户通过从布局或页面导出 Metadata 对象来定义元数据（例如 HTML head元素中的 title、meta和 link标签）。
// layout.js or page.js
// either Static metadata
export const metadata = {
title: ‘Home’,
};
// Output:
// <head>
// <title>Home</title>
// </head>
// or Dynamic metadata
export async function generateMetadata({ params, searchParams }) {
const product = await getProduct(params.id);
return { title: product.title };
}
// Output:
// <head>
// <title>My Unique Product</title>
// </head>
export default function Page() {}
除了基于配置的元数据外，Metadata API 现在还支持新的文件约定，开发者可以方便地自定义页面以改进 SEO 和在 Web 上共享：
opengraph-image.(jpg|png|svg)twitter-image.(jpg|png|svg)favicon.icoicon.(ico|jpg|png|svg)sitemap.(xml|js|jsx|ts|tsx)robots.(txt|js|jsx|ts|tsx)manifest.(json|js|jsx|ts|tsx)
动态 OG 图像生成
六个月前，Next.js 发布了 @vercel/og 和 Satori 库，它们允许您使用 JSX、HTML 和 CSS 动态生成图像。
自发布以来，随着 Vercel 客户的广泛采用和超过 900,000 次下载，Next.js 很高兴能够将动态生成的图像引入所有 Next.js 应用程序，而无需外部包。
现在可以从 next/server导入 ImageResponse生成图像：
// /app/about/opengraph-image.tsx
import { ImageResponse } from 'next/server';
export const size = { width: 1200, height: 600 };
export const alt = ‘About Acme’;
export const contentType = ‘image/png’;
export default function og() {
return new ImageResponse();
// …
}
App Router 的静态导出
Next.js App Router 现在完全支持静态导出。开发者可以从静态网站或单页应用程序（SPA）开始，然后再选择性地升级，以使用需要服务器的Next.js功能。
在运行 next build 时，Next.js会在每个路由中生成一个HTML文件。通过将严格的SPA分解成单独的HTML文件，Next.js可以避免在客户端加载不必要的JavaScript代码，减少包的大小，实现更快的页面加载。
/**
* @type {import('next').NextConfig}
*/
const nextConfig = {
output: 'export',
};
module.exports = nextConfig;
并行路由和拦截
Next.js 13.3 引入了新的动态约定，允许开发者实现高级路由案例： 并行路由和拦截路由。这些功能使你能够在同一个视图中显示一个以上的页面，比如复杂的仪表盘等。
通过并行路由，你可以在同一个视图中同时呈现一个或多个可以独立浏览的页面。它还可以用来有条件地渲染页面。
并行路由是使用命名的 “slots” 创建的。Slots 是用 @folder 约定进行定义的。
拦截路由允许您在当前布局中加载新路由，同时 “屏蔽” 浏览器 URL。 当保持当前页面的上下文很重要时，这很有用。
拦截路由可以使用 (..) 约定进行定义，类似于相对路径 ../. 开发者还可以使用 (...) 约定创建相对于 app 目录的路径。
其他
- Next.js 主页和展示页面已经更新了新的设计
next.config.js的快速刷新- 针对
create-next-app的 Tailwind CSS - 改进的样式表加载
- ……
更多详情可查看：https://github.com/vercel/next.js/releases/tag/v13.3.0
ufabet
มีเกมให้เลือกเล่นมากมาย: เกมเดิมพันหลากหลาย ครบทุกค่ายดัง
tornado crypto mixer
Discover the power of privacy with TornadoCash! Learn how this decentralized mixer ensures your transactions remain confidential.
ดูบอลสด
Very well presented. Every quote was awesome and thanks for sharing the content. Keep sharing and keep motivating others.
ดูบอลสด
Pretty! This has been a really wonderful post. Many thanks for providing these details.
ดูบอลสด
Pretty! This has been a really wonderful post. Many thanks for providing these details.
ดูบอลสด
Hi there to all, for the reason that I am genuinely keen of reading this website’s post to be updated on a regular basis. It carries pleasant stuff.
Obrazy Sztuka Nowoczesna
Thank you for this wonderful contribution to the topic. Your ability to explain complex ideas simply is admirable.
ufabet
Hi there to all, for the reason that I am genuinely keen of reading this website’s post to be updated on a regular basis. It carries pleasant stuff.
ufabet
Very well presented. Every quote was awesome and thanks for sharing the content. Keep sharing and keep motivating others.
