Next.js 12

Next.js Conf 2021の告知メールで、Next.js史上最大のアップデートと言われたNext.js12です^next12。静的ホスティングサービスで有名なVercel (旧 now.sh) が提供するReactのフレームワークです。Next.js12からReact18の機能が一部使えるようになりました。

SSR Streaming (Suspense), React Server Component

React18のSuspenseやReact Server Componentが使えるようになりました。ただしまだフラグが必要で、next.config.jsに以下の追加が必要です。

next.config.js
1
module.exports = {
2
  experimental: {
3
    concurrentFeatures: true,
4
    serverComponents: true,
5
  },
6
}

使い方はReact18で説明するやり方とやや被るので、気になる方はそちらを読んでいただくか、こちらのブログで綺麗にまとまっているので、読んでみてください^{react18_features}。こちらのブログではコンポーネントを遅延読み込みさせるときに、ES2020のDynamic Importを使う例で書かれています。

Middleware

Vercelには元々Functionという機能があり、処理の一部をAWS Lambda上で実行できる機能がありました。Next.js12からはさらにCDNのEdge部分で処理できるMiddlewareという機能が追加されました^{next12_middleware}。こちらはCloudflare Workerを使っているようです^{middleware_cloudflare_worker}。これを利用するときは、VercelのEdge Functionsと連携する必要があります (Netlifyで使うならEdge Handlers)。

Middlewareのサンプルとして、Basic認証やIPブロック, ABテストなどのコードが公開されており、気軽に試すことができます^{middleware_sample}。

例えばBasic認証を追加したい場合はpages配下に_middleware.tsを作成して、以下のようなコードを書きます^{middleware_basic_auth_sample}。

_middleware.ts
1
// NextRequestでcookiesや地理情報, IPアドレスなどのヘッダー情報を取得できる
2
import { NextRequest, NextResponse } from 'next/server'
3

4
export function middleware(req: NextRequest) {
5
  const basicAuth = req.headers.get('authorization')
6

7
  if (basicAuth) {
8
    const auth = basicAuth.split(' ')[1]
9
    const [user, pwd] = Buffer.from(auth, 'base64').toString().split(':')
10

11
    // 認証が成功したら次のページに進める
12
    if (user === '4dmin' && pwd === 'testpwd123') return NextResponse.next()
13
  }
14

15
  // 認証が失敗したら401を返す
16
  return new Response('Auth required', {
17
    status: 401,
18
    headers: { 'WWW-Authenticate': 'Basic realm="Secure Area"'},
19
  })
20
}

URL Imports

実験機能ですが、ESModuleをURLを介してインポートできるようにもなりました。ESModuleを提供するすべてのCDNで機能します^{next12_import}。

1
// next.config.js
2
module.exports = {
3
  experimental: {
4
    urlImports: ['https://cdn.skypack.dev']
5
  }
6
}

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

その他のアップデートや修正

画像で言うと、AVIFをサポートするようになりました。WebPよりも20%小さい画像になります。また、imagesオプションが追加され、以下のような書き方ができるようになりました。このように書くと、ブラウザがAVIFに対応していればAVIF形式の画像を、対応してないならWebPを、WebPも対応してないなら元画像を表示するようになります^{next12_avif_support}。

1
module.exports = {
2
  images: {
3
    formats: ['image/avif', 'image/webp']
4
  }
5
}

画像関連で追加すると、next/imageの挙動が変わりました。以前のバージョンではdivタグに画像が囲まれるのですが、Next.js12からはspanタグに変わります^{nextjs12_image_breaking}。また、送信する画像のバリエーション (大きさ) も変わっているみたいです。

開発面でいうと、RustコンパイラのSWCを組み込むようになりました。結果として、ホットリロードが最大3倍、本番モードでのビルドが最大5倍速くなったそうです^{nextjs12_hot_reload}。