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