Next.js 12.2で、私たちはNext.jsの未来の基盤を築いています：
- Middleware（安定版）: アプリケーション全体の動的ルーティング
- オンデマンドISR（安定版）: 再デプロイなしでコンテンツを更新
- Edge API Routes（実験的）: 高性能なAPIエンドポイント
- Edge SSR（実験的）: Edge環境でのサーバーサイドレンダリング
- SWCプラグイン（実験的）: 独自プラグインによるコンパイル拡張
next/imageの改善: 新しいnext/future/imageコンポーネントを含む
今すぐnpm i next@latestを実行してアップデートしてください。
Middleware（安定版）
Middlewareが12.2で安定版となり、ユーザーフィードバックに基づいてAPIが改善されました。
Middlewareを使用すると、リクエストが完了する前にコードを実行できます。受信リクエストに基づいて、リライト、リダイレクト、ヘッダーの追加、クッキーの設定などでレスポンスを変更できます。
import { NextRequest, NextResponse } from 'next/server';
// "beta"クッキーがあるリクエストの場合
// /betaにリライトします
export function middleware(req: NextRequest) {
const isInBeta = JSON.parse(req.cookies.get('beta') || 'false');
req.nextUrl.pathname = isInBeta ? '/beta' : '/';
return NextResponse.rewrite(req.nextUrl);
}
// 単一値またはマッチの配列をサポート
export const config = {
matcher: '/',
};Middlewareの最新APIへの更新方法については、移行ガイドをご覧ください。
Vercelで無料で試すか、next startを使用してセルフホスティング時に利用できます。
オンデマンドISR（安定版）
オンデマンドインクリメンタル静的再生成（ISR）を使用すると、再デプロイせずにサイトのコンテンツを更新できます。ヘッドレスCMSやコマースプラットフォームでデータが変更された際に、すぐにサイトを更新できます。コミュニティから最も要望の多かった機能の1つで、安定版となったことを嬉しく思います。
export default async function handler(req, res) {
// 有効なリクエストか確認
if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
return res.status(401).json({ message: '無効なトークン' });
}
try {
await res.revalidate('/path-to-revalidate');
return res.json({ revalidated: true });
} catch (err) {
// エラーが発生した場合、Next.jsは最後に正常に生成された
// ページを表示し続けます
return res.status(500).send('再検証エラー');
}
}インクリメンタル静的再生成は、Next.jsビルドAPI（next build）をサポートするすべてのプロバイダーで動作します。Vercelにデプロイすると、オンデマンド再検証は約300msでグローバルに伝播します。
詳細はドキュメントを参照するか、デモで実際の動作をご覧ください。
Edge API Routes（実験的）
Next.jsでは、API RoutesにEdge Runtimeを使用できるようになりました。Edge RuntimeはNode.jsよりも軽量で、低遅延のための高速起動を実現します。さらに、Edge API Routesはサーバーからのストリーミングレスポンスをサポートします。
API Routeのランタイムはconfigで設定でき、nodejs（デフォルト）またはexperimental-edgeを指定できます：
import type { NextRequest } from 'next/server';
export default (req: NextRequest) => {
return new Response(`Hello, from ${req.url} I'm now an Edge API Route!`);
};
export const config = {
runtime: 'experimental-edge',
};Edge Runtimeは軽量なため、高速起動を実現するために制限があります。例えば、fsなどのNode.js固有のAPIはサポートされていません。そのため、API Routesのデフォルトランタイムはnodejsのままです。
詳細はドキュメントをご覧ください。
Edge SSR（実験的）
Next.jsでは、サーバーレンダリングにEdge Runtimeを使用できるようになりました。
前述のように、Edge RuntimeはNode.jsよりも軽量で、低遅延のための高速起動を実現します。React 18と組み合わせると、ページのストリーミングサーバーレンダリングが可能になります。
Next.jsはデフォルトでNode.jsをサーバーサイドレンダリングのランタイムとして使用します。12.2以降、React 18を使用している場合、Edge Runtimeを選択できます。
next.config.jsでグローバルにランタイムを設定できます：
module.exports = {
experimental: {
runtime: 'experimental-edge',
},
};デフォルトのページランタイムを変更すると、SSRストリーミングやサーバーコンポーネント機能を含むすべてのページに影響します。ページごとにこのデフォルトを上書きすることもできます：
export const config = {
runtime: 'nodejs',
};
export default function Home() {}ランタイム中にprocess.env.NEXT_RUNTIME環境変数を確認するか、webpackコンパイル中にoptions.nextRuntime変数を検査することで、使用中のランタイムを検出できます。
詳細はドキュメントをご覧ください。
next/imageの改善
next/future/imageコンポーネント（実験的）
現在のImageコンポーネントに関するフィードバックを受け、新しいnext/imageの早期プレビューを共有できることを嬉しく思います。この新しい改良版イメージコンポーネントは、クライアントサイドJavaScriptを減らし、画像のスタイリングを簡素化します：
<div>や<span>ラッパーなしで単一の<img>をレンダリング- 標準の
styleプロップをサポート追加 layout、objectFit、objectPositionプロップを削除（styleまたはclassNameを使用）IntersectionObserver実装を削除（ネイティブの遅延読み込みを使用）loader設定を削除（loaderプロップを使用）- 注：まだ
fillモードはないため、widthとheightプロップが必要
ネイティブのloading="lazy"はReactのハイドレーションやクライアントサイドJavaScriptを待つ必要がないため、パフォーマンスが向上します。
詳細はドキュメントをご覧ください。
リモートパターン（実験的）
next/imageでは、組み込みの画像最適化APIを使用する際にリモート画像のワイルドカードを指定できる実験的な設定オプションremotePatternsをサポートしました。これにより、ドメイン名の完全一致のみを行う既存のimages.domains設定よりも強力なマッチングが可能になります。
module.exports = {
experimental: {
images: {
remotePatterns: [
{
// `src`プロパティのホスト名は`.example.com`で終わる必要があります
// そうでない場合、400 Bad Requestが返されます
protocol: 'https',
hostname: '**.example.com',
},
],
},
},
};詳細はドキュメントをご覧ください。
画像最適化の無効化
ゼロコンフィグの画像最適化APIは、リクエスト時に画像をオンデマンドで最適化するためにサーバーが必要なため、next exportの使用を妨げていました。これまで、next exportをターゲットとするユーザーは、サードパーティの画像最適化プロバイダーを使用するようにloaderを設定する必要がありましたが、利用可能なプロバイダーがない場合の明確な解決策はありませんでした。本日より、next exportユーザーは新しい設定プロパティを使用して、すべてのnext/imageインスタンスの画像最適化を無効にできるようになりました：
module.exports = {
experimental: {
images: {
unoptimized: true,
},
},
};SWCプラグイン（実験的機能）
Next.jsコンパイラは、本番環境向けにJavaScriptコードを変換および最小化するためにSWCを使用します。SWCはNext.js 12.0で導入され、ローカル開発とビルドのパフォーマンスの両方を向上させました。
コンパイル時にSWCの変換動作をカスタマイズするために、プラグイン（WebAssemblyで記述）を追加できるようになりました：
module.exports = {
experimental: {
swcPlugins: [
['css-variable/swc', { displayName: true, basePath: __dirname }],
],
},
};詳細については、ドキュメントを確認してください。
React 18サポートの改善
styled-componentsやemotionなどのCSS-in-JSライブラリのサポートが改善され、よりスムーズなアップグレード体験と破壊的変更なしで利用可能になりました。- AMPおよびHTMLのポスト最適化（CSS、フォントの最適化）が適切にサポートされるようになりました。
next/headがReact 18をサポートするようになりました。- スクリーンリーダーやその他の支援技術にページ遷移を適切に通知するために使用されるNext.jsのルートアナウンサーが、React 18をサポートするようになりました。
その他の改善点
- Next.jsコンパイラでのEmotion変換のサポート。
@emotion/babel-pluginのほとんどの機能がサポートされるようになったため、importMapを使用していない限り、これを削除できます。詳細については、ドキュメントを確認してください。 - Next.jsコンパイラでの
styled-components変換のサポートが改善され、cssPropオプションを含むデフォルトオプションのカスタマイズが可能になりました。詳細については、ドキュメントを確認してください。 - JavaScript ESモジュールのサポートが向上し、
next/imageやnext/linkなどのコンポーネントを適切にimportできるようになりました。 next/linkに<a>を子として手動で追加する必要がなくなりました。これで、後方互換性のある方法でこの動作を選択できます。browsersListを変更してモダンなJavaScriptのみを提供する実験的なサポートを追加しました。next.config.jsのexperimentalオプションでbrowsersListForSwc: trueとlegacyBrowsers: falseを設定することで、この動作を選択できます。- 新しい
@swc/helpersの最適化により、バンドル間の重複が防止され、最小構成で約2KB、大規模なアプリではさらにバンドルサイズが削減されます。 - Next.jsのインストールサイズを大幅に削減しました。pnpmにモノレポを移行することで、これを行い、重複するパッケージを削除しながら、使用するプリコンパイル済みバージョンを作成できます。これにより、インストールサイズが14MB削減されます。
- Next.jsのセルフホスティングを改善する取り組みの一環として、実験的な
outputStandalone: true設定をoutput: 'standalone'に安定化しています。この設定により、必要なファイル/アセットのみを含めることでデプロイメントサイズが大幅に削減され、ビルドされたデプロイメントパッケージにnode_modulesをすべてインストールする必要がなくなります。この設定は、with-dockerの例で実際に見ることができます。
レイアウトRFCと高度なルーティングサポート
見逃した方のために、先月レイアウトRFCを発表しました。これは2016年の導入以来、Next.jsにとって最大の更新であり、以下を含みます：
- ネストされたレイアウト: ネストされたルートで複雑なアプリケーションを構築。
- サーバーコンポーネント向け設計: サブツリーナビゲーションに最適化。
- データフェッチングの改善: ウォーターフォールを回避しながらレイアウトでフェッチ。
- React 18機能の使用: ストリーミング、トランジション、サスペンス。
- クライアントとサーバーフルーティング: SPAのような動作を持つサーバー中心のルーティング。
- 100%段階的に採用可能: 破壊的変更なしで徐々に採用可能。
- 高度なルーティング規則: オフスクリーンスタッシング、インスタントトランジションなど。
詳細については、RFCを確認するか、フィードバックを提供してください。
貢献者への感謝
Next.jsは、2,000人以上の個々の開発者、Google ChromeやMetaなどの業界パートナー、そしてVercelのコアチームの共同作業の結果です。
このリリースは、以下の方々の貢献によってもたらされました：@huozhi, @ijjk, @kwonoj, @ViolanteCodes, @akrabdev, @timneutkens, @jpveilleux, @stigkj, @jgoping, @oof2win2, @Brooooooklyn, @CGamesPlay, @lfades, @molebox, @steven-tey, @SukkaW, @Kikobeats, @balazsorban44, @erikbrinkman, @therealmarzouq, @remcohaszing, @perkinsjr, @shuding, @hanneslund, @housseindjirdeh, @RobertKeyser, @styfle, @htunnicliff, @lukeshumard, @sagnik3, @pixelass, @JoshuaKGoldberg, @rishabhpoddar, @nguyenyou, @kdy1, @sidwebworks, @gnoff, @gaspar09, @feugy, @mfix-stripe, @javivelasco, @Chastrlove, @goncharov-vlad, @NaveenDA, @Firfi, @idkwhojamesis, @FLCN-16, @icyJoseph, @ElijahPepe, @elskwid, @irvile, @Munawwar, @ykolbin, @hulufei, @baruchadi, @imadatyatalah, @await-ovo, @menosprezzi, @gazs, @Exortions, @rubens-lopes, @woochul2, @stefee, @stmtk1, @jlarmstrongiv, @MaedahBatool, @jameshfisher, @fabienheureux, @TxHawks, @mattbrandlysonos, @iggyzap, @src200, @AkifumiSato, @hermanskurichin, @kamilogorek, @ben-xD, @dawsonbooth, @Josehower, @crutchcorn, @ericmatthys, @CharlesStover, @charlypoly, @apmatthews, @naingaungphyo, @alexandrutasica, @stefanprobst, @dc7290, @DilwoarH, @tommarshall, @stanhong, @leerob, @appsbytom, @sshyam-gupta, @saulloalmeida, @indicozy, @ArianHamdi, @Clariity, @sebastianbenz, @7iomka, @gr-qft, @Schniz, @dgagn, @sokra, @okbel, @tbvjaos510, @dmvjs, @PepijnSenders, @JohnPhamous, @kyliau, @eric-burel, @alabhyajindal, @jsjoeio, @vorcigernix, @clearlyTHUYDOAN, @splatterxl, @manovotny, @maxproske, @nvh95, @frankievalentine, @nuta, @bagpyp, @dfelsie, @qqpann, @atcastle, @jsimonrichard, @mass2527, @ekamkohli, @Yuddomack, @tonyspiro, @saurabhmehta1601, @banner4422, @falsepopsky, @jantimon, @henriqueholtz, @ilfa, @matteobruni, @ryscheng, @hoonoh, @ForsakenHarmony, @william-keller, @AleksaC, @Miikis, @zakiego, @radunemerenco, @AliYusuf95, @dominiksipowicz。