実際に扱う際は最新の情報にアクセスしてください。2021の告知メールで、Next.js史上最大のアップデートと言われたNext.js12ですnext12。提供するReactのフレームワークです。Next.js12からReact18の機能が一部使えるようになりました。Componentが使えるようになりました。フラグが必要で、next.config.jsに以下の追加が必要です。},6}使い方はReact18で説明するやり方とやや被るので、気になる方はそちらを読んでいただくか、こちらのブログで綺麗にまとまっているので、読んでみてくださいreact18_features。Importを使う例で書かれています。Lambda上で実行できる機能がありました。Next.js12からはさらにCDNのEdge部分で処理できるMiddlewareという機能が追加されましたnext12_middleware。Workerを使っているようですmiddleware_cloudflare_worker。ABテストなどのコードが公開されており、気軽に試すことができますmiddleware_sample。Basic認証を追加したい場合はpages配下に_middleware.tsを作成して、以下のようなコードを書きますmiddleware_basic_auth_sample。Imports実験機能ですが、ESModuleをURLを介してインポートできるようにもなりました。ESModuleを提供するすべてのCDNで機能しますnext12_import。画像で言うと、AVIFをサポートするようになりました。WebPよりも20%小さい画像になります。imagesオプションが追加され、以下のような書き方ができるようになりました。このように書くと、ブラウザがAVIFに対応していればAVIF形式の画像を、対応してないならWebPを、WebPも対応してないなら元画像を表示するようになりますnext12_avif_support。}5}画像関連で追加すると、next/imageの挙動が変わりました。以前のバージョンではdivタグに画像が囲まれるのですが、Next.js12からはspanタグに変わりますnextjs12_image_breaking。変わっているみたいです。開発面でいうと、RustコンパイラのSWCを組み込むようになりました。結果として、ホットリロードが最大3倍、本番モードでのビルドが最大5倍速くなったそうですnextjs12_hot_reload。Pilefortです。東京でエソジニアをしてます。Frameworkです。GitHubやTwitterで見かけた面白い記事やニュースをまとめるためのものです。何かの役に立てば幸いです。2022年の1月から8月ぐらいまでに登場したり、大幅なアップデートがあったWebサービスや開発ツール、ライブラリ、フレームワークを紹介した本です。https://booth.pm/ja/items/4157010XMind8ファイルをMarkdownファイルに変換するツールを作りました。(最新版だと一部メソッドが削除されてるため)。2021年に登場したり、大幅なアップデートがあったWebサービスや開発ツール、ライブラリ、フレームワークを紹介した本です。https://pilefort.booth.pm/items/3633323サイトマップNotes業務や趣味での気づき・メモScraps雑記。ネットで見つけた面白い記事やニュースSnippets記事にするまでもないけど、便利なコマンドや豆知識Works。