簡閱 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, 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

https://nextjs.org/blog/next-12

簡閱 Next.js 12 版本新功能

Comments

Software development

Debug Note - MacOS Monterey 強佔 5000 Port 的問題

More from this blog

如何開始入門軟體工程領域 - 名詞解釋（長期更新）

我的 MacBook Pro (Apple Silicon) 設定

ChatGPT 下的發展預想

一些覺得有用的工具蒐藏

LeetCode Solution, Medium, 607. Sales Person

Rust Compiler

Middleware

預先支援 React 18

React Server Components

支援 ES Modules 和 URL Imports

Reference

Command Palette

Comments

Software development

Debug Note - MacOS Monterey 強佔 5000 Port 的問題

More from this blog

Rust Compiler

Middleware

預先支援 React 18

React Server Components

支援 ES Modules 和 URL Imports

Reference