Next.js 13.2 正式发布

原创2023-02-28 07:30·Echa攻城狮

大家好，我是Echa。

好消息，2023年2月24号 Next.js 官方正式发布 v13.2 版本。距离Next.js v13.1 版本发布时间(2022年12月23号)，只有短短63天时间。距离Next.js v13（2022年10月26号），短短121天时间，平均每个版本发布相隔时间大概2个月时间。但其Github仓库的 star 数已超过 102k，并且在全球拥有超过 102w名用户。Next.js 官方研发团队真厉害，给咱们开发人员带来了很多方便，小编举起大拇指点赞。可以先回顾React 生态也包含了Next.js。

细聊2023年React生态

关于Next.js 官方正式推出 v13 版本时，光这一项特性：快 700 倍的基于 Rust 的 Webpack 替代品。当时前端技术圈内完全炸开了锅，接下来小编带着大家一五一十的详细描述，有兴趣的粉丝们继续往下阅读。

Next.js

官方网址：https://nextjs.org/

Github：https://github.com/topics/nextjs

Next.js 是一个非常灵活的 React 服务端渲染应用框架. 它提供了构建块来创建快速的 Web 应用程序，用于构建 SEO 非常友好的 SPA 应用.

特性

  • 支持两种预渲染方式, 静态生成和服务器端渲染.
  • 基于页面的路由系统, 路由零配置
  • 自动代码拆分. 优化页面加载速度.
  • 支持静态导出, 可将应用导出为静态网站.
  • 内置 CSS-in-JS 库 styled-jsx
  • 方案成熟, 可用于生产环境, 世界许多公司都在使用
  • 应用部署简单, 拥有专属部署环境 Vercel, 也可以部署在其他环境

Next.js 的美妙之处在于，您可以逐页选择最适合您的用例的渲染方法，无论是静态站点生成、服务器端渲染还是客户端渲染。



我们所说的框架是指 Next.js 处理 React 所需的工具和配置，并为您的应用程序提供额外的结构、特性和优化。

您可以使用 React 构建您的 UI，然后逐步采用 Next.js 功能来解决常见的应用程序需求，例如路由、数据获取、集成 - 同时改善开发人员和最终用户的体验。

无论您是个人开发人员还是大型团队的一员，您都可以利用 React 和 Next.js 构建完全交互式、高度动态和高性能的 Web 应用程序。

Web 应用程序的构建块

在构建现代应用程序时，您需要考虑一些事项。如：

  • 用户界面- 用户将如何使用您的应用程序并与之交互。
  • 路由- 用户如何在应用程序的不同部分之间导航。
  • 数据获取- 您的数据所在的位置以及如何获取数据。
  • 渲染- 何时何地渲染静态或动态内容。
  • 集成- 您使用哪些第三方服务（CMS、身份验证、支付等）以及您如何连接到它们。
  • 基础设施- 部署、存储和运行应用程序代码的位置（无服务器、CDN、* Edge 等）。
  • 性能- 如何为最终用户优化您的应用程序。
  • 可扩展性——您的应用程序如何随着您的团队、数据和流量的增长而适应。
  • 开发人员体验- 您的团队构建和维护您的应用程序的经验。

对于应用程序的每个部分，您需要决定是自己构建解决方案还是使用其他工具，例如库和框架。

Next.js 编译器、压缩、打包、拆分
Next.js 处理大部分代码转换和底层基础设施，使您的应用程序更容易投入生产。
这之所以成为可能，是因为 Next.js 有一个用Rust（一种低级编程语言）和 SWC（一个可用于编译、缩小、捆绑等的平台）编写的编译器。

Next.js 编译

压缩指开发人员编写的代码针对人类可读性进行了优化。此代码可能包含代码运行所不需要的额外信息，例如注释、空格、缩进和多行。

Next.js 压缩

打包指开发人员将他们的应用程序分解为模块、组件和功能，这些模块、组件和功能可用于构建更大的应用程序。导出和导入这些内部模块以及外部第三方包会创建一个复杂的文件依赖网络。


Next.js 打包


打包是解决依赖关系网络并将文件（或模块）合并（或“打包”）为浏览器优化捆绑包的过程，目的是减少用户访问网页时对文件的请求数量。

拆分开发人员通常将他们的应用程序拆分为多个页面，这些页面可以从不同的 URL 访问。这些页面中的每一个都成为应用程序的唯一入口点。

代码拆分是将应用程序的包拆分为每个入口点所需的较小块的过程。目标是通过仅加载运行该页面所需的代码来改进应用程序的初始加载时间。


客户端和服务器

在 Web 应用程序的上下文中，客户端是指用户设备上的浏览器，它向服务器发送请求以获取您的应用程序代码。然后它将从服务器接收到的响应转换为用户可以与之交互的界面。


客户端渲染与预渲染

再标准的 React 应用程序中，浏览器从服务器接收一个空的 HTML shell 以及用于构建 UI 的 JavaScript 指令。这称为客户端渲染，因为初始渲染工作发生在用户设备上。


相比之下，Next.js默认预渲染每个页面。预渲染意味着 HTML 是在服务器上预先生成的，而不是全部由用户设备上的 JavaScript 完成。

实际上，这意味着对于完全客户端渲染的应用程序，用户在渲染工作完成时会看到一个空白页面。与预渲染应用相比，用户将看到构建的 HTML：


Next.js 基础知识点小编点到为止，回归正传。我们一起回顾一下Next.js 官方隆重推出v13 版本，到底更新了哪些亮点内容：

  • app/ Directory (beta) 、Layouts、React Server Components、Streaming：更简单、更快、更少的客户端 JS。
  • Turbopack (alpha)：速度提高 700 倍的基于 Rust 的 Webpack 替代品。
  • 新的 next/image (stable)：native browser 延迟加载速度更快。
  • 新的 @next/font(beta)：具有零布局偏移的自动自托管字体。
  • 改进 next/link：Simplified API with automatic <a>。
npm i next@latest react@latest react-dom@latest eslint-config-next@latest

具体如下：

引入 Turbopack (alpha)

Next.js 13 中包含 Turbopack —— Webpack 的新的基于 Rust 的继任者。

“Webpack 已被下载超过 30 亿次。虽然它是构建 Web 不可或缺的一部分，但我们已经达到了基于 JavaScript 的工具所能达到的最大性能的极限。在 Next.js 12 中，我们开始过渡到 native Rust 驱动的工具。我们首先从 Babel 迁移，这导致转译速度提高了 17 倍。然后，我们替换了 Terser，这使得 minification 提高了 6 倍。现在是时候全身心投入到原生的捆绑工作中去了。”

将 Turbopack alpha 与 Next.js 13 一起使用可以：

  • 更新速度比 Webpack 快 700 倍
  • 更新速度比 Vite 快 10 倍
  • cold starts 速度比 Webpack 快 4 倍

如下图：

根据介绍，Turbopack 只捆绑开发中所需要的最小资产，所以启动时间非常快。在一个有 3000 个模块的应用程序中，Turbopack 的启动时间为 1.8 秒。Vite 需要 11.4 秒，Webpack 需要 16.5 秒。

再接着一起回顾 Next.js 官方正式发布v13.1 版本，到底更新了哪些亮点内容：

Next.js v13.1 包括对 page/（稳定）和 app/（beta 版）目录的改进：

  • app目录（Beta版）改进（appDirectory (Beta) Improvements）: 提高了可靠性和性能。
  • 内置模块转换（Built-in Module Transpilation）: 引入 next-transpile-modules 模块并与核心兼容。
  • Edge运行时（稳定）Edge Runtime (Stable): Edge的轻Node.js运行时。
  • Turbopack更新（Turbopack Updates）: 支持Tailwind CSS、next/image、@next/font等。
  • 中间件改进（Middleware Improvements）: 返回响应并设置请求头。
  • SWC导入分辨率（SWC Import Resolution）: 当使用桶文件时，适用于较小的JavaScript包。
  • 内存使用率提高、新模板等！（Memory usage improvements, new templates, and more!）

如下图：

最后咱们一起回顾 Next.js 官方正式发布v13.2 版本，更新了哪些亮点内容：

  • 内置 SEO 支持：Metadata API
  • 自定义 Route Handlers
  • 服务器组件支持 MDX
  • Rust 实现的 MDX Parser
  • Error Overlay 改进
  • Link 类型安全 (Beta)
  • 改进 Turbopack 与 Webpack loader 的兼容性 (Alpha)
  • Next.js Cache (Beta)

内置 SEO 支持：Metadata API

export const metadata = {
  openGraph: {
    title: 'Next.js',
    description: 'The React Framework for the Web',
    url: 'https://nextjs.org',
    siteName: 'Next.js',
    images: [
      {
        url: 'https://nextjs.org/og.png',
        width: 800,
        height: 600,
      },
    ],
    locale: 'en-US',
    type: 'website',
  },
};

自定义 Route Handlers

import { cookies } from 'next/headers';

export async function GET(request: Request) {
  const cookieStore = cookies();
  const token = cookieStore.get('token');

  return new Response('Hello, Next.js!', {
    status: 200,
    headers: { 'Set-Cookie': `token=${token}` },
  });
}

服务器组件支持 MDX

// This file allows you to provide custom React components
// to be used in MDX files. You can import and use any
// React component you want, including components from
// other libraries.
function H1({ children }) {
  // ...
}

function H2({ children }) {
  // ...
}

export function useMDXComponents(components) {
  return { h1: H1, h2: H2, ...components };
}

Rust 实现的 MDX Parser

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
    mdxRs: true,
  },
};

const withMDX = require('@next/mdx')();
module.exports = withMDX(nextConfig);

Error Overlay 改进

Link 类型安全 (Beta)

import Link from 'next/link'

// ✅
<Link href="/about" />
// ✅
<Link href="/blog/nextjs" />
// ✅
<Link href={`/blog/${slug}`} />

// ❌ TypeScript errors if href is not a valid route
<Link href="/aboot" />
// next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
    typedRoutes: true,
  },
};

module.exports = nextConfig;

改进 Turbopack 与 Webpack loader 的兼容性 (Alpha)

// next.config.js
module.exports = {
  experimental: {
    turbo: {
      loaders: {
        '.md': [
          {
            // Option format
            loader: '@mdx-js/loader',
            options: {
              format: 'md',
            },
          },
        ],
        '.svg': ['@svgr/webpack'],
      },
    },
  },
};
// next.config.js
module.exports = {
  experimental: {
    turbo: {
      resolveAlias: {
        underscore: 'lodash',
        mocha: { browser: 'mocha/browser-entry.js' },
      },
    },
  },
};

Next.js Cache (Beta)

// app/page.jsx

export default async function Page() {
  const [staticData, dynamicData, revalidatedData] = await Promise.all([
    // Cached until manually invalidated
    fetch(`https://...`),
    // Refetched on every request
    fetch(`https://...`, { cache: 'no-store' }),
    // Cached with a lifetime of 10 seconds
    fetch(`https://...`, { next: { revalidate: 10 } }),
  ]);

  return <div>...</div>;
}

最后

一台电脑,一个键盘,尽情挥洒智慧的人生;几行数字,几个字母,认真编写生活的美好;

一 个灵感,一段程序,推动科技进步,促进社会发展。

创作不易，喜欢的老铁们加个关注，点个赞，打个赏，后面会不定期更新干货和技术相关的资讯，速速收藏，谢谢！你们的一个小小举动就是对小编的认可，更是创作的动力。

举报
评论 0
    热门：