Next.js 12.2
投稿者: Balázs Orbán @ balazsorban44, DongYoon Kang @ kdy1dev, Javi Velasco @ javivelasco, Jiachi Liu @ huozhi, JJ Kasper @ ijjk, Joe Haddad @ timer150, Maia Teegarden @ padmaia, Shu Ding @ shuding, Steven @ styfle, Tim Neutkens @ timneutkens, Tobias Koppers @ wSokra
12.2でNext.jsの未来の基盤を築いています：
- Middleware（安定版）: アプリケーション全体の動的ルーティング
- On-Demand ISR（安定版）: 再デプロイなしでコンテンツを更新
- Edge API Routes（実験的）: 高性能なAPIエンドポイント
- Edge SSR（実験的）: Edgeでアプリをサーバーレンダリング
- SWCプラグイン（実験的）: 独自のプラグインでコンパイルを拡張
- next/imageの改善: 新しいnext/future/imageコンポーネントを含む
npm i next@latestを実行して今すぐアップデートしてください。
Middleware（安定版）
12.2でMiddlewareが安定版になったことを発表できて嬉しく思います。ユーザーからのフィードバックに基づいてAPIが改善されました。
Middlewareを使用すると、リクエストが完了する前にコードを実行できます。受信リクエストに基づいて、書き換え、リダイレクト、ヘッダーの追加、またはCookieの設定によってレスポンスを変更できます。
import { NextRequest, NextResponse } from 'next/server';
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で無料でMiddlewareを試すか、next startを使用してセルフホスティングしてください。
On-Demand Incremental Static Regeneration（安定版）
On-Demand Incremental Static Regeneration（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: 'Invalid token' });
}
try {
await res.revalidate('/path-to-revalidate');
return res.json({ revalidated: true });
} catch (err) {
return res.status(500).send('Error revalidating');
}
}
Incremental Static RegenerationはNext.js Build 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 Server-Rendering（実験的）
Next.jsはサーバーレンダリングでEdge Runtimeの使用をサポートするようになりました。前述のとおり、Edge RuntimeはNode.jsよりも軽量なランタイムで、低レイテンシーのための高速起動を提供します。React 18と組み合わせて使用すると、ページのストリーミングサーバーレンダリングが可能になります。
Next.jsはサーバーサイドレンダリングページのデフォルトランタイムとしてNode.jsを使用します。12.2以降、React 18を使用している場合はEdge Runtimeの使用を選択できます。
next.config.jsでランタイムをグローバルに設定でき、nodejsまたはexperimental-edgeを指定できます：
module.exports = {
experimental: {
runtime: 'experimental-edge',
},
};
デフォルトページランタイムを変更すると、SSRストリーミングやServer Componentsの機能を含むすべてのページに影響します。
ランタイム設定をエクスポートすることで、ページごとにこのデフォルトを上書きすることもできます：
export const config = {
runtime: 'nodejs',
};
export default function Home() {}
ランタイム中にprocess.env.NEXT_RUNTIME環境変数を確認し、webpackコンパイル中にoptions.nextRuntime変数を調べることで、使用しているランタイムを検出できます。
詳細については、ドキュメントをご確認ください。
next/imageの改善
next/future/imageコンポーネント（実験的）
現在のImageコンポーネントに関するフィードバックをお聞きし、新しいnext/imageの早期プレビューを共有できることを嬉しく思います。この新しく改善されたImageコンポーネントは、必要なクライアントサイドJavaScriptが少なく、画像のスタイリング方法を簡素化します：
<div>や<span>ラッパーなしで単一の<img>をレンダリング- 標準的な
styleプロパティのサポートを追加
styleまたはclassNameを優先してlayout、objectFit、objectPositionプロパティを削除- ネイティブ遅延読み込みを優先してIntersectionObserver実装を削除
loaderプロパティを優先してloader設定を削除- 注意：（まだ）fillモードがないため、
widthとheightプロパティが必要
ネイティブloading="lazy"はReactハイドレーションとクライアントサイドJavaScriptを待つ必要がないため、パフォーマンスが向上します。
詳細については、ドキュメントをご確認ください。
Remote Patterns（実験的）
next/imageは、組み込みのImage Optimization APIを使用する際にリモート画像のワイルドカードを指定できる実験的な設定オプションremotePatternsをサポートするようになりました。これにより、ドメイン名の完全一致のみを実行する既存のimages.domains設定を超えて、より強力なマッチングが可能になります。
module.exports = {
experimental: {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: '**.example.com',
},
],
},
},
};
詳細については、ドキュメントをご確認ください。
Image Optimizationの無効化
ゼロ設定のImage Optimization APIは、リクエストに応じてオンデマンドで画像を最適化するサーバーが必要なため、next exportの使用を妨げます。今日まで、next exportをターゲットとするユーザーは、サードパーティのImage Optimizationプロバイダーを使用するようにローダーを設定する必要がありましたが、利用可能なプロバイダーがない場合の明確な解決策はありませんでした。
本日より、next exportユーザーは新しい設定プロパティでnext/imageのすべてのインスタンスのImage Optimizationを無効にできます：
module.exports = {
experimental: {
images: {
unoptimized: true,
},
},
};
SWCプラグイン（実験的）
Next.js CompilerはSWCを使用して、本番用のJavaScriptコードを変換および最小化します。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 CompilerでEmotionトランスフォームをサポート。
@emotion/babel-pluginのほとんどの機能がサポートされ、importMapを使用していない限り削除できます。詳細については、ドキュメントをご確認ください。
cssPropオプションを含むデフォルトオプションのカスタマイズを可能にすることで、Next.js Compilerでのstyled-componentsトランスフォームのサポートが向上しました。詳細については、ドキュメントをご確認ください。- JavaScript ES Modulesのサポートが向上し、
next/imageやnext/linkなどのコンポーネントを適切にimportできるようになりました。
next/linkは子として手動で<a>を追加する必要がなくなりました。後方互換性のある方法でこの動作を選択できるようになりました。browsersListを変更してモダンなJavaScriptのみを配信する実験的サポートを追加しました。next.config.jsの実験的オプションでbrowsersListForSwc: trueとlegacyBrowsers: falseを設定することで、この動作を選択できます。- 新しい
@swc/helpers最適化により、バンドル間での重複を防ぎ、最小構成で約2KB、大規模なアプリではさらに多くのバンドルサイズを削減します。
- Next.jsのインストールサイズを大幅に削減しました。モノレポを
pnpmに移行することでこれを実現し、使用する事前コンパイル版を作成する際に重複パッケージを削除できるようになりました。これによりインストールサイズが14MB削減されます。
- Next.jsのセルフホスティングを改善する継続的な取り組みの中で、実験的な
outputStandalone: true設定をoutput: 'standalone'に安定化しています。この設定は、必要なファイル/アセットのみを含めることでデプロイサイズを大幅に削減し、構築されたデプロイパッケージにすべてのnode_modulesをインストールする必要性を排除します。この設定はwith-dockerの例で実際に確認できます。
Layouts RFCと高度なルーティングサポート
見逃した場合に備えて、先月Layouts RFCを発表しました。これは2016年にNext.jsが導入されて以来最大のアップデートで、以下が含まれます：
- ネストされたレイアウト: ネストされたルートで複雑なアプリケーションを構築
- Server Components用に設計: サブツリーナビゲーション用に最適化
- データフェッチングの改善: ウォーターフォールを避けながらレイアウトでフェッチ
- React 18機能の使用: ストリーミング、トランジション、Suspense
- クライアントとサーバールーティング: 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, @jameshfishe