このページ内容は2021年1月21日以降、再調査・再検証してません。実際に扱う際は最新の情報にアクセスしてください。
Next.js Conf 2021の告知メールで、Next.js史上最大のアップデートと言われたNext.js12ですnext12。静的ホスティングサービスで有名なVercel (旧 now.sh) が提供するReactのフレームワークです。Next.js12からReact18の機能が一部使えるようになりました。
React18のSuspenseやReact Server Componentが使えるようになりました。ただしまだフラグが必要で、next.config.jsに以下の追加が必要です。
next.config.js1module.exports = {2experimental: {3concurrentFeatures: true,4serverComponents: true,5},6}
使い方はReact18で説明するやり方とやや被るので、気になる方はそちらを読んでいただくか、こちらのブログで綺麗にまとまっているので、読んでみてくださいreact18_features。こちらのブログではコンポーネントを遅延読み込みさせるときに、ES2020のDynamic Importを使う例で書かれています。
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.ts1// NextRequestでcookiesや地理情報, IPアドレスなどのヘッダー情報を取得できる2import { NextRequest, NextResponse } from 'next/server'34export function middleware(req: NextRequest) {5const basicAuth = req.headers.get('authorization')67if (basicAuth) {8const auth = basicAuth.split(' ')[1]9const [user, pwd] = Buffer.from(auth, 'base64').toString().split(':')1011// 認証が成功したら次のページに進める12if (user === '4dmin' && pwd === 'testpwd123') return NextResponse.next()13}1415// 認証が失敗したら401を返す16return new Response('Auth required', {17status: 401,18headers: { 'WWW-Authenticate': 'Basic realm="Secure Area"'},19})20}
実験機能ですが、ESModuleをURLを介してインポートできるようにもなりました。ESModuleを提供するすべてのCDNで機能しますnext12_import。
1// next.config.js2module.exports = {3experimental: {4urlImports: ['https://cdn.skypack.dev']5}6}
1import confetti from 'https://cdn.skypack.dev/canvas-confetti'
画像で言うと、AVIFをサポートするようになりました。WebPよりも20%小さい画像になります。また、imagesオプションが追加され、以下のような書き方ができるようになりました。このように書くと、ブラウザがAVIFに対応していればAVIF形式の画像を、対応してないならWebPを、WebPも対応してないなら元画像を表示するようになりますnext12_avif_support。
1module.exports = {2images: {3formats: ['image/avif', 'image/webp']4}5}
画像関連で追加すると、next/imageの挙動が変わりました。以前のバージョンではdivタグに画像が囲まれるのですが、Next.js12からはspanタグに変わりますnextjs12_image_breaking。また、送信する画像のバリエーション (大きさ) も変わっているみたいです。
開発面でいうと、RustコンパイラのSWCを組み込むようになりました。結果として、ホットリロードが最大3倍、本番モードでのビルドが最大5倍速くなったそうですnextjs12_hot_reload。