Next.js 13最近在Next conf宣布，具有多个新（和进化）功能，这些功能将使我们的软件公司（和Devs）（如我们（itmtb.com））更轻松地提高质量，效率，为软件公司（和Devs）编写和维护前端代码的过程。和代码的可读性。

其中一些功能：

默认情况下服务器端组件：

还记得使用getStaticProps，getStaticPaths和getServerSideProps吗？好吧，他们将在接下来的13号中过时。现在这是一个好一步吗？在大多数情况下，是的。以下面的简单代码为例：

除了使代码更可读，服务器端组件带来其他优势，例如减少客户端javascript捆绑包。

在具有很多依赖性的大型生产应用程序中，对于开发人员而言，减少捆绑尺寸的挑战是一个痛苦的挑战，这也不会损害功能。使用服务器端组件，大部分依赖项永远不会达到客户端，从而大大降低了捆绑包的大小。

客户端组件仍然具有其目的，并且可以通过简单地将'use client'作为第一行而成为客户端。每当需要重新渲染或使用useEffect时，您都可以轻松地制作组件客户端。

一个很棒的布局系统：

Next.js 13在路线级别引入了一个新的布局系统。

例如，我们现在可以在/blog路线中的所有页面上具有自定义布局。只需将布局放在layput.{js/jsx/ts/tsx}中的blog文件夹中的pages（或next in next.13中的app）目录。

您甚至可以具有自定义错误组件，也可以基于路由加载组件。这绝对会使开发人员的体验变得更好，更轻松。布局甚至保留状态并且不重新渲染。

在下一个13中对布局的更深入解释：

Turbopack：

说实话，webpack一直是网络的重要组成部分，但是随着时间的流逝，它表明了它的缺点。它具有不可固定的issues的相当一部分，并且在用javascript编写的捆绑器的表演中获得了限制。

Turbopack，撰写的邦德勒（Bundler），用铁锈声称解决了这个问题。根据Vercel的说法，它确实如此：

• 比WebPack更新700倍
• 比Vite快10倍更新
• 4倍的冷速度比webpack快

基准是辩论本身的话题，就像那些声称涡轮饼比Abiaoqian快10倍的话题：

埃文你

@youyuxi

只是为了添加一些上下文 - 在此基准中，即使在使用SWC进行React变换之前，与Vite相比，Turbo仅为2倍（与市场上的10倍相比）。因此，差异一开始就没有那么剧烈。

11:22 AM- 2022年10月29日

尽管如此，它比Vite快（比WebPack快），并且显示了很多希望。

图像和字体：

Next.js 13自此以来的next/image更好：

• 速度更快，因为它更少的javascipt到客户端，并且不需要水合。
• 默认情况下需要alt标签才能获得更好的可访问性。
• 易于样式。

Next.js 13还引入了font-system，您可以通过该font-system使用任何Google字体，而无需从浏览器发送请求向Google发送请求。字体在构建时间下载并在您的项目中自托管。这可以提高隐私和性能。

SEO：

分享博客台或网站页面时，您会注意到以下一张卡：

此卡是使用页面<meta>标签生产的。图像是使用
生成的
<meta property="og:image" content="img_url/path" />

。 Vercel创建了一个新的库@vercel/og，可与Next.js 13一起创建动态社交卡。

您可以使用@vercel/og明确创建个人资料卡：

import { ImageResponse } from '@vercel/og';
export const config = {
  runtime: 'experimental-edge',
};
export default async function handler() {
  return ImageResponse(
    (
      <div
        style={{
          backgroundColor: '#fff',
          backgroundImage: 'radial-gradient(circle at 25px 25px, lightgray 2%, transparent 0%), radial-gradient(circle at 75px 75px, lightgray 2%, transparent 0%)',
          backgroundSize: '100px 100px',
          height: '100%',
          width: '100%',
          textAlign: 'center',
          alignContent: 'center',
          alignItems: 'center',
          justifyContent: 'center',
          flexDirection: 'column',
          display: 'flex',
        }}
      >
        <img
          alt="Vercel"
          width={255}
          height={225} 
src= "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTE2IiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTU3LjUgMEwxMTUgMTAwSDBMNTcuNSAweiIgLz48L3N2Zz4="
          style={{ margin: '0 75px' }}
        />
        <div
          style={{
            fontSize: 60,
            marginTop: 30,
            lineHeight: 1.8,
          }}
        >
          Vercel Edge Network
        </div>
      </div>
    ),
    {
      width: 1200,
      height: 600,
    }
  );
}

上面的代码为我们提供了下面的this url卡。
（Full code for the Next project）

后端更新：

Next.js是一个全堆栈框架，也带来了一些后端更改：

• Middlewares
• 您现在可以使用中间件来处理rewrite和redirect

最后的想法：

某些功能（例如next/font）仍处于beta中，可能需要一些时间才能准备好生产。另外，考虑到下一步发生的重大变化，迁移可能并不容易。

尽管下一个提供了migration guide from v12 to v13，但从较旧版本中迁移可能仍然很棘手。

但是对于新项目，Next.js 13似乎很有希望。对于开发人员和公司，无论是用户体验，开发人员的体验还是维护，它几乎都会更好。