想不到 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, emotion和relay。 為了打造 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 就能獲取資料，不再需要使用特殊函數 getServerSideProps 或 getStaticProps。可以將任何 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

• nextjs.org/blog/next-12