天天看點
傳回

Next.js 13.2 正式釋出

作者：Echa攻城獅
Next.js 13.2 正式釋出

大家好，我是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 13.2 正式釋出
Next.js 13.2 正式釋出

我們所說的架構是指 Next.js 處理 React 所需的工具和配置，并為您的應用程式提供額外的結構、特性和優化。

Next.js 13.2 正式釋出

您可以使用 React 建構您的 UI，然後逐漸采用 Next.js 功能來解決常見的應用程式需求，例如路由、資料擷取、內建 - 同時改善開發人員和最終使用者的體驗。

無論您是個人開發人員還是大型團隊的一員，您都可以利用 React 和 Next.js 建構完全互動式、高度動态和高性能的 Web 應用程式。

Web 應用程式的建構塊

在建構現代應用程式時，您需要考慮一些事項。如：

  • 使用者界面- 使用者将如何使用您的應用程式并與之互動。
  • 路由- 使用者如何在應用程式的不同部分之間導航。
  • 資料擷取- 您的資料所在的位置以及如何擷取資料。
  • 渲染- 何時何地渲染靜态或動态内容。
  • 內建- 您使用哪些第三方服務（CMS、身份驗證、支付等）以及您如何連接配接到它們。
  • 基礎設施- 部署、存儲和運作應用程式代碼的位置（無伺服器、CDN、* Edge 等）。
  • 性能- 如何為最終使用者優化您的應用程式。
  • 可擴充性——您的應用程式如何随着您的團隊、資料和流量的增長而适應。
  • 開發人員體驗- 您的團隊建構和維護您的應用程式的經驗。

對于應用程式的每個部分，您需要決定是自己建構解決方案還是使用其他工具，例如庫和架構。

Next.js 編譯器、壓縮、打包、拆分

Next.js 處理大部分代碼轉換和底層基礎設施，使您的應用程式更容易投入生産。

這之是以成為可能，是因為 Next.js 有一個用Rust（一種低級程式設計語言）和 SWC（一個可用于編譯、縮小、捆綁等的平台）編寫的編譯器。

Next.js 13.2 正式釋出

Next.js 編譯

壓縮指開發人員編寫的代碼針對人類可讀性進行了優化。此代碼可能包含代碼運作所不需要的額外資訊，例如注釋、空格、縮進和多行。

Next.js 13.2 正式釋出

Next.js 壓縮

打包指開發人員将他們的應用程式分解為子產品、元件和功能，這些子產品、元件和功能可用于建構更大的應用程式。導出和導入這些内部子產品以及外部第三方包會建立一個複雜的檔案依賴網絡。

Next.js 13.2 正式釋出

Next.js 打包

打包是解決依賴關系網絡并将檔案（或子產品）合并（或“打包”）為浏覽器優化捆綁包的過程，目的是減少使用者通路網頁時對檔案的請求數量。

拆分開發人員通常将他們的應用程式拆分為多個頁面，這些頁面可以從不同的 URL 通路。這些頁面中的每一個都成為應用程式的唯一入口點。

代碼拆分是将應用程式的包拆分為每個入口點所需的較小塊的過程。目标是通過僅加載運作該頁面所需的代碼來改進應用程式的初始加載時間。

Next.js 13.2 正式釋出

用戶端和伺服器

在 Web 應用程式的上下文中，用戶端是指使用者裝置上的浏覽器，它向伺服器發送請求以擷取您的應用程式代碼。然後它将從伺服器接收到的響應轉換為使用者可以與之互動的界面。

Next.js 13.2 正式釋出

用戶端渲染與預渲染

再标準的 React 應用程式中，浏覽器從伺服器接收一個空的 HTML shell 以及用于建構 UI 的 JavaScript 指令。這稱為用戶端渲染，因為初始渲染工作發生在使用者裝置上。

Next.js 13.2 正式釋出

相比之下，Next.js預設預渲染每個頁面。預渲染意味着 HTML 是在伺服器上預先生成的，而不是全部由使用者裝置上的 JavaScript 完成。

實際上，這意味着對于完全用戶端渲染的應用程式，使用者在渲染工作完成時會看到一個空白頁面。與預渲染應用相比，使用者将看到建構的 HTML：

Next.js 13.2 正式釋出

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

具體如下：

Next.js 13.2 正式釋出
Next.js 13.2 正式釋出

引入 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 倍

如下圖：

Next.js 13.2 正式釋出

根據介紹，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 13.2 正式釋出

最後咱們一起回顧 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 改進

Next.js 13.2 正式釋出

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>;
}

最後

一台電腦,一個鍵盤,盡情揮灑智慧的人生;幾行數字,幾個字母,認真編寫生活的美好;

一 個靈感,一段程式,推動科技進步,促進社會發展。

創作不易，喜歡的老鐵們加個關注，點個贊，打個賞，後面會不定期更新幹貨和技術相關的資訊，速速收藏，謝謝！你們的一個小小舉動就是對小編的認可，更是創作的動力。

Next.js
上一篇: 夢幻“飛船”，九十四年前的1929年7月12日，當時世界上最大的飛機道尼爾Do.X首飛成功。同年的10月20日，它搭載了
下一篇: 摩托羅拉Rizr縱向卷軸屏手機外媒AndroidAuthority上手了在MWC2023亮相的摩托羅拉縱向卷軸屏概念手機

繼續閱讀