热门搜索:
您现在的位置是：首页 > 文章详情

Next.js 13.3 发布，添加多个新功能

日期：2023-04-09点击：211

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.ico
  • icon.(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

原文链接：https://www.oschina.net/news/236145/nextjs-13-3-released
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源。

相关文章

    文章评论

    共有0条评论来说两句吧...

    文章二维码

    扫描即可查看该文章

    点击排行

    推荐阅读

    最新文章