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

```javascript
// next.config.js

module.exports = {
  swcMinify: true
}
```

## Middleware

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

```javascript
// pages/_middleware.js

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

## 預先支援 React 18

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

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

### React Server Components

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

```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 前綴。

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

然後直接使用 URL

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

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