このページ内容は2021年1月21日以降、再調査・再検証してません。実際に扱う際は最新の情報にアクセスしてください。

link
Next.js 12

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

link
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を使う例で書かれています。

link
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
}
link
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'
link
その他のアップデートや修正

画像で言うと、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


自己紹介
はじめまして Pilefortです。
東京でエソジニアをしてます。
興味のあるスタックは、JavaScript (React, Vue), TypeScript, Rust, WebAssembly, AWS, Pulumi, Serverless Frameworkです。
このブログでは、普段の業務や趣味で気になったことをまとめたり、フロントやAWS, GitHubやTwitterで見かけた面白い記事やニュースをまとめるためのものです。少しでも何かの役に立てば幸いです。
最近の活動
技術書典13 (2022.9.10 - 2022.9.25) で本を出しました。
2022年の1月から8月ぐらいまでに登場したり、大幅なアップデートがあったWebサービスや開発ツール、ライブラリ、フレームワークを紹介した本です。
うぇぶちぇんじろぐ2023part1
XMind8ファイルをMarkdownファイルに変換するツールを作りました。
公式のxmind-sdk-jsのバージョンを下げて作ってます (最新版だと一部メソッドが削除されてるため)。
技術書典12 (2022.1.22 - 2022.1.30) で本を出しました。
2021年に登場したり、大幅なアップデートがあったWebサービスや開発ツール、ライブラリ、フレームワークを紹介した本です。
うぇぶちぇんじろぐ2022
サイトマップ
Notes
業務や趣味での気づき・メモ
Scraps
雑記。ネットで見つけた面白い記事やニュース
Snippets
記事にするまでもないけど、便利なコマンドや豆知識
Works
同人誌一覧