簡閱 Next.js 12 版本新功能

想不到 Next.js 的開發速度這麼快,距離上一個版本 v11 才過了 2~3 個月而已呀。這一次版本的主要變動有以下這些:

  • Rust Compiler:~3x faster Fast Refresh and ~5x faster builds
  • Middleware (beta):Enabling full flexibility in Next.js with code over configuration
  • React 18 Support:Native Next.js APIs are now supported, as well as Suspense
  • <Image /> AVIF Support:Opt-in for 20% smaller images
  • Bot-aware ISR Fallback:Optimized SEO for web crawlers
  • Native ES Modules Support:Aligning with the standardized module system
  • URL Imports (alpha):Import packages from any URL, no installs required
  • React Server Components (alpha):Try it today, including SSR streaming

Rust Compiler

這邊我只會提到幾個我覺得有意思的東西,第一個是使用了 Rust Complier,是基於 SWC 來實作的,可以看到 SWC 也被 Deno 所選擇使用,可以比過去使用 Babel 更快 17 倍。但是我比較好奇跟近期 Vue 領域很紅的 Vite 相比會差距多少。在 Next.js 的 GitHub Issue 中有過討論是否支援 Vite,但是看起來目前應該是不會。特別可以提到的是,為了使用 Rust Complier,甚至還自己寫了全新的 CSS parser 來實現 styled-jsx 轉換,並且會支援過去的 Babel 設定,也計劃將會支援 styled-components, emotionrelay。 為了打造 Rust Complier 甚至邀聘了 SWC 的建立者 DongYoon Kang 和 Parcel 的貢獻者 Maia Teegarden,看得出來是相當用心的在打造。

另外也能將 Rust Complier 使用在 Minify

// next.config.js

module.exports = {
  swcMinify: true
}

Middleware

新版本打造了類似 Koa 的 Middleware 機制,只要寫在 pages/_middleware.js 即可。

// pages/_middleware.js

export function middleware(req, ev) {
  return new Response('Hello, world!')
}

預先支援 React 18

個人認為這也是滿重要的一塊,React 18 將會接入 Suspense 和 Streaming Render 的功能,這對於渲染上有相當大的幫助和改善。可以使用以下設定開啟

// next.config.js
module.exports = {
  experimental: {
    concurrentFeatures: true
  }
}

React Server Components

React Server Components 看允許我們可以在伺服器端就先渲染,完全不需要使用任何 client-side JavaScript 就能達到。

// next.config.js
module.exports = {
  experimental: {
    concurrentFeatures: true,
    serverComponents: true
  }
}

個人覺得很重要的一塊是,Next.js 將可以允許我們在 component level 就能獲取資料,不再需要使用特殊函數 getServerSidePropsgetStaticProps。可以將任何 Next.js 頁面重命名為 .server.js 以建立 Server component 並直接在您的 Server component 中導入 client components。這些 client components 將 hydrate 並變得可互動,因此您可以新增諸如點讚之類的功能。

支援 ES Modules 和 URL Imports

將全面支援 ES modules,另外也將支援使用 URL Imports 的功能。一旦偵測到 URL,Next.js 會自動建立 next.lock 來記錄來源,並且會在本地建立快取來儲存,以利線下開發。可以使用以下設定來加入可允許的 URL 前綴。

module.exports = {
  experimental: {
    urlImports: ['https://cdn.skypack.dev']
  }
}

然後直接使用 URL

import confetti from 'https://cdn.skypack.dev/canvas-confetti'

Reference

Did you find this article valuable?

Support 攻城獅 by becoming a sponsor. Any amount is appreciated!