更新履歴

Next.js公式examples集を分類（2023年7月版）
Next.js公式examples集を分類（2022年7月版）
Next.js公式examples集を分類（2021年7月版）
Next.js公式examples集を分類（2021年1月版）
Next.js公式examples集を分類（2020年7月版）

※2023年10月更新
app routerを使っているサンプルの情報を更新しました。

サンプルの場所

Next.js公式リポジトリのexamples内ディレクトリ
https://github.com/vercel/next.js/tree/canary/examples

はじめに

Next.jsの公式サンプルは前回（2022年7月版）から24本増えて合計341本あります。新たに追加されたサンプルには(new)がついています。（2023/07/05)
しかし、このままではどれを見たらいいのかわからないので主観で分類してみました。
基礎、中級、上級と付いているのは、主に難易度順にNext.jsの機能を使っているサンプルです。

(公式) 公式ドキュメント で説明するのに使われているサンプル等。

サンプルのインストール方法。

npx create-next-app --example [サンプル名] [アプリ名]
もしくは、
yarn create next-app --example [サンプル名] [アプリ名]
もしくは、
pnpm create next-app --example [サンプル名] [アプリ名]

具体例
npx create-next-app --example with-vitest with-vitest-app
yarn create next-app --example with-vitest with-vitest-app
pnpm create next-app --example with-vitest with-vitest-app

サンプル名はexamplesのを使用します。
アプリ名は自由につけられます。

オプション

-e, --example [name]|[github-url]
サンプル名の代わりにGithubにあるexamplesのURLを指定することも出来ます。

具体例

examplesのhello-worldをインストールしたい時。
この場合はappnameがサブフォルダとして作られ、その場所に作成されます。
npx create-next-app -e hello-world appname
もしくは、
yarn create next-app -e hello-world appname

-e オプションの省略

examples名をそのまま使うのなら -e、 --example オプションを省略可能です。その代わりインストールするフォルダ名はそのサンプル名で固定されます。
npx create-next-app hello-world
もしくは、
yarn create next-app hello-world

現在のディレクトリにインストールする方法です。

npx create-next-app -e hello-world .
もしくは、
yarn create next-app -e hello-world .

※npmはnpm create-next-app [アプリ名] とcreateの後ろに-（ハイフン）がつく。
※yarnはyarn create next-app [アプリ名] とcreateの後ろに-（ハイフン）がつかない。

サンプルが app router を使われているかどうか

Markdown表 app router項目の解説

• app router

app routerを使っているサンプル

• app router と pages router両方

app routerとpages routerの両方を使っているサンプル

• route-groups (フォルダ名)

• Catch-all Segments [フォルダ名]

• Optional Catch-all Segments [[フォルダ名]]

• 除外 _フォルダ名

app/_libs のように先頭にアンダースコアをつけたフォルダはルーティングの対象から除外されます。

このフォルダ内にはルーティングとは関係のないファイルを置いたりします。

※空欄はpages routerを使用しているサンプルです。

※app routerを使用しているサンプルの見つけ方
Next.jsの exampleを ダウンロードして treeコマンドでフォルダ構成を表示して、appフォルダをgrep検索します。

前回の記事から新規追加されたサンプル（もしくは、名前が変更されたサンプル）

※ Next.js公式examples集を分類（2022年7月版） 以降に追加されたサンプルです。

前回より(2022年7月)より追加されたサンプル	説明	app router
(New)analyze-bundles	@next/bundle-analyzerを使用して出力バンドルを分析する方法を示します。
(New)api-routes-apollo-server-and-client	Apollo ServerとApollo Clientを使用して、GraphQLサーバーから必要なデータを簡単に取得するexampleです。Apolloはデータの取得や変更だけでなくクエリとその結果を分析してクライアント側のキャッシュを構築し、さらにクエリや変更が実行されるたびに最新の状態に保ちます。Next.jsとApollo Serverの統合は、apollo-server-integration-nextというコミュニティパッケージを使用して実装されています。このexampleでは、ApolloをNext.jsのデータ取得メソッドとシームレスに統合し、サーバーでクエリを取得してブラウザでハイドレートしています。
(New)api-routes-apollo-server-and-client-auth	api-routes-apollo-server-and-client このサンプルに認証を追加しています。
(New)app-dir-i18n-routing	Next.jsは、アプリディレクトリ内での国際化ルーティングをデフォルトでサポートしていませんが、自分で簡単に実装することができます。このサンプルでは、Edge上で国際化ルーティングを実装する方法を示しています。	app router Catch-all Segments [フォルダ名]
(New)app-dir-mdx	create-next-appでブートストラップされたNext.jsプロジェクトです。"bootstrapped"とは、プロジェクトを開始するために必要な最小限のコードや設定を提供することを意味します。create-next-appは、Next.jsプロジェクトを簡単に作成するためのツールであり、プロジェクトの最初のセットアップを簡素化するために、Next.jsアプリケーションの最小限の構成を提供します。	app router
(New)authsignal	AuthsignalをNext.jsに統合して、メールのマジックリンクを使用したパスワードレスログインとサーバーサイドリダイレクトを実装しています。ログインセッションはクッキーを使用して管理されます。セッションデータは、@hapi/ironを使用して暗号化されます。
(New)cloudflare-turnstile	CloudflareのスマートCAPTCHA代替機能であるTurnstileを使用して、Next.jsプロジェクトを保護する方法を示しています。Turnstileは、CAPTCHAを表示せずに、Cloudflareを介さずに任意のウェブサイトに埋め込むことができます。
(New)cms-dotcms	Next.jsとdotCMSを使った静的生成ブログのサンプルです。dotCMSをデータソースとしてNext.jsの静的生成機能を紹介します。
(New)cms-enterspeed	Next.jsとEnterspeedを使った静的生成ブログのサンプルです。Enterspeedをデータソースとして使ったNext.jsの静的生成機能を紹介します。
(New)cms-keystonejs-embedded	KeystoneJSを使用した静的ブログのスタータープロジェクトです。開発モードでコンテンツを作成および編集するための強力な管理UIや、静的にビルドされたページによる高速な本番サイト、自動生成されたGraphQL APIを介したクライアント側からのデータアクセス 等の機能があります。
(New)cms-kontent-ai	Next.jsとKontent.aiを使った静的生成ブログのサンプルです。Kontent.aiをデータソースとして使ったNext.jsの静的生成機能を紹介します。
(New)cms-payload	Next + Payloadサーバーレスデモです。payloadcms/next-payloadを利用して、NextJSアプリと同じリポジトリにPayloadをサーバーレスでデプロイできます。	app router route-groups (フォルダ名) Catch-all Segments [フォルダ名]
(New)cms-sitefinity	Next.jsとSitefinity CMSを使った静的生成ブログのサンプルです。既存のcms-sitefinityにTypeScriptを加えました、このサンプルでは、Sitefinity CMSをデータソースとして、Next.jsの静的生成機能を紹介しています。
(New)cms-webiny	Next.jsとWebinyを使った静的生成ブログのサンプルです。Webinyをデータソースとして使ったNext.jsの静的生成機能を紹介します。
(New)custom-server	TypeScript + Nodemonによるカスタムサーバーのサンプルです。Nodemonを使用してNext.jsのユニバーサルコードに影響を与えることなくサーバーコードをライブリロードする一方で、サーバーとクライアントの両方でTypeScriptを使用しています。
(New)evm-multichain-dapp	EVMマルチチェーンDappsを構築するためのNext.jsパブリックテンプレートです。
(New)github-pages	このサンプルでは、静的にエクスポートされたNext.jsアプリケーションをGitHub Pagesにデプロイすることができます。	app router
(New)hello-world-esm	Next.jsの最も基本的なアイデアを示しています。ネイティブESMモードで実行されており、2つのページがあります。pages/index.tsxは/リクエストに応答し、pages/about.tsxは/aboutに応答します。next/linkを使用すると、ユニバーサルルーティング機能を備えたハイパーリンクを追加できます。dayディレクトリは、サブディレクトリを持つことができます。
(New)image-legacy-component	Next.jsで最適化されたレスポンシブ画像を提供するためにLegacy Image Componentを使用する方法です。indexページ（pages/index.js）には、内部画像と外部画像があります。next.config.jsでは、domainsプロパティを使用して外部画像を有効にしています。他のページは異なるレイアウトを示しています。
(New)middleware	Next.jsでミドルウェアを使用して、リクエストが完了する前にコードを実行する方法です。indexページ（pages/index.tsx）には、リダイレクト、リライト、または通常の動作を持つページへのリンクのリストがあります。ミドルウェアファイル（middleware.ts）では、エクスポートされた構成にマッチャーを定義することで、すでにルートがフィルタリングされています。すべてのリクエストでミドルウェアを実行する場合は、マッチャーを削除できます。
(New)middleware-matcher	Next.jsのミドルウェアを特定のページにのみマッチングするように構成する方法です。indexページ（pages/index.ts）には、マッチングされたかどうかを示す動的ページへのリンクのリストがあります。ミドルウェアファイル（middleware.ts）には、特別なマッチャー構成キーがあり、マッチングされたページを細かく制御できます。ただし、ミドルウェアは常に最初に実行され、サーバーサイドで_nextルートに常にマッチングされることに注意してください。
(New)modularize-imports	インポートのモジュール化のサンプルです。modularizeImports設定オプションの使い方です。
(New)next-css	Next.jsの組み込みCSSインポートおよびCSSモジュールサポートを使用する方法です。
(New)next-forms	Next.jsでフォームを作成する方法です。	app
(New)next-offline	next-offline プラグインを使用する方法です。
(New)radix-ui	このサンプルでは、いくつかの基本的なRadix UIコンポーネントを紹介しています。
(New)react-remove-properties	Next.jsのreactRemovePropertiesオプションを使用して、Reactプロパティを削除する方法です。
(New)remove-console	Next.js の removeConsole オプションを使って、console.error 以外のすべての console.* 呼び出しを削除するのとすべてのログを表示しない方法です。
(New)reproduction-template-app-dir	Next.jsリポジトリのapp/ディレクトリのバグを報告するときに使うNext.jsテンプレートです。	app router
(New)with-apivideo	このサンプルはビデオアップローダーと再生アプリを使用して、Next.jsとapi.video、ビデオファーストAPIで構築されています。
(New)with-aws-amplify	NextJSとAWS Amplifyを使用してサーバーレンダリングされたWebアプリケーションを構築する方法です。AWS Amplifyを使用して、アプリに必要なAWSクラウドリソースを生成、管理、および消費します。NextJSアプリには、動的および静的ルートがあり、着信リクエストに基づいてサーバー上でデータをロードします。
(New)with-axiom	next-axiomパッケージを介してAxiomとNext.jsプロジェクトを使用する方法です。カスタムのwithAxiomラッパーを使用して、nextの設定オブジェクト、ミドルウェア、およびAPI関数をラップします。ログオブジェクトは、フロントエンド、ミドルウェア、およびAPI関数から使用できます。
(New)with-azure-cosmos	Azure Cosmos DBは、モダンなアプリ開発のためのフルマネージドNoSQLおよびリレーショナルデータベースです。Azure Cosmos DBは、1桁ミリ秒のレスポンスタイム、自動的で即時のスケーラビリティを提供し、あらゆるスケールで速度を保証します。SLAに裏付けされた可用性とエンタープライズグレードのセキュリティにより、ビジネスの継続性が保証されます。
(New)with-babel-macros	babel-macros の設定と使い方を説明します。babel-macros を使えば、設定しなくてもマクロとしてエクスポートする babel プラグインを簡単に追加できます。
(New)with-cloudinary	Next.js、Cloudinary、Tailwindを使って画像ギャラリーサイトを作成します。
(New)with-cookies-next	クッキーの取得、設定、および削除を行います。これはクライアント側とサーバー側の両方で動作します。クライアント側の任意の場所で使用でき、getServerSidePropsでサーバーサイドレンダリングに使用でき、APIハンドラーで使用できます。
(New)with-grafbase	GrafbaseをNext.jsで使用する方法です。Grafbase CLIによって動力化されたローカルGraphQLバックエンドからの取得と、型安全なクエリを作成するためのGraphQL Code Generatorが特徴です。Grafbaseは、グラフデータベースを提供する企業です。Grafbaseは、グラフデータベースを使用することで、複雑なデータの関係性を簡単に表現し、データの検索や分析を高速化することができます。Grafbaseは、GraphQLを使用してグラフデータベースにアクセスすることができ、GraphQLの柔軟性とグラフデータベースのパフォーマンスを組み合わせることができます。Grafbaseは、多くのWebアプリケーションやモバイルアプリケーションで使用されており、高速で信頼性が高く、柔軟性があります。	app router Catch-all Segments [フォルダ名]
(New)with-material-ui	Material UI を使用したサンプルです。
(New)with-next-ui	ReactのNextUIと一緒にNext.jsを使用する方法です。これはこのUIツールキットをフレームワークと統合する方法です。
(New)with-opentelemetry	OpenTelemetryは、アプリケーションの簡単なインストルメンテーションのためのツールのコレクションです。instrumentation.tsファイルを使用して、Next.jsのインストルメンテーションを設定できます。OpenTelemetryによって生成されたトレースを収集および検査するには、実行中のOpenTelemetryコレクターとバックエンドが必要です。	app router と pages router両方
(New)with-postgres	Next.js プロジェクトで Postgres.js を使用するサンプルです。
(New)with-react-ga4	カスタムAppコンポーネントを使用してreact-ga4を最も基本的な方法で使用しています。このサンプルをテストするために、utils / analytics.jsファイルでトラッキングIDを変更してください。2023年7月以降、react-gaは新しいデータの処理を停止するため、このサンプルはreact-ga4を使用するように更新されました。
(New)with-react-query	React Queryの使用方法です。TanStack公式サンプル query/examples/react/nextjs
(New)with-sfcc	Next.js、Salesforce commerce cloud、およびTailwindを使用してヘッドレスeコマースアプリケーションを作成する方法です。Salesforce Commerce Cloudは、オンラインストアの構築、管理、拡張を行うためのクラウドベースのeコマースプラットフォームです。Salesforce Commerce Cloudは、多くの機能を提供し、カスタマイズ可能であり、高度なセキュリティ機能を備えています。また、Salesforce Commerce Cloudは、マーケティング、販売、カスタマーサポートなどの機能を統合し、顧客体験を向上させることができます。Salesforce Commerce Cloudは、多くの企業で使用されており、高速で信頼性が高く、柔軟性があります。
(New)with-supabase	Supabase Authはクッキーを使用し、ユーザーのセッションをNext.jsアプリ全体で利用できるようにします。このサンプルには、クライアントコンポーネント、サーバーコンポーネント、ルートハンドラー、サーバーアクション、およびミドルウェアが含まれます。	app router
(New)with-tigris	TypeScriptクライアントを使ってNext.jsとTigrisで作られたシンプルなTodoアプリです。Tigrisは、データ分析およびビジネスインテリジェンスのためのクラウドベースのプラットフォームです。Tigrisを使用することで、データの収集、分析、可視化、共有を簡単に行うことができます。Tigrisは、多くのデータソースに対応しており、データの統合や変換を自動化することができます。また、Tigrisは、高度な分析機能を提供し、データの傾向やパターンを特定することができます。Tigrisは、多くの企業で使用されており、高速で信頼性が高く、柔軟性があります。
(New)with-turbopack	Turbopackは、VercelのWebpackとNext.jsのクリエイターによってRustで書かれた、JavaScriptとTypeScriptに最適化された新しいインクリメンタルバンドラです。大規模なアプリケーションでは、TurbopackはViteより10倍、Webpackより700倍高速に更新されます（ベンチマーク）。最大のアプリケーションでは、更新速度がViteより20倍速くなることもあります。このプレイグラウンドは、Next.js v13 App Directory Playgroundのミラーであり、Next.js開発サーバーとしてTurbopackを使用しています（next dev --turbo）。Turbopackは現在ベータ版であり、まだ本番用には準備ができていませんのでご注意ください。	app router と pages router両方 route-groups (フォルダ名) Catch-all Segments [フォルダ名]
(New)with-turbopack-loaders	Turbopackは、webpackのローダーAPIのサブセットをサポートしており、Turbopackでコードを変換するためにwebpackローダーを使用できます。このサンプルでは、Next.jsをwebpackローダーを使用して実行するときに設定する方法を示しています。依存関係をインストールして開発サーバーを起動してください。
(New)with-vanilla-extract	appディレクトリを使用したVanilla Extractの使用方法です。Vanilla Extractは、CSS in JSライブラリであり、TypeScriptに対応しています。Vanilla Extractを使用することで、CSSをJavaScriptで記述することができ、TypeScriptの型チェックを利用することができます。また、Vanilla Extractは、CSSの自動プレフィックス付けや、CSSの最適化などの機能を提供し、高速で信頼性が高く、柔軟性があります。Vanilla Extractは、多くのWebアプリケーションで使用されており、ReactやNext.jsなどのフレームワークとの統合も容易です。	app router
(New)with-windicss	WindiCSSとNext.jsの組み合わせた使用方法です。Windi CSSは、Tailwind CSSに似たCSSフレームワークであり、CSSをJavaScriptで記述することができます。Windi CSSを使用することで、CSSのクラス名を簡素化し、CSSの再利用性を高めることができます。また、Windi CSSは、CSSの自動プレフィックス付けや、CSSの最適化などの機能を提供し、高速で信頼性が高く、柔軟性があります。Windi CSSは、多くのWebアプリケーションで使用されており、Vue.jsやReactなどのフレームワークとの統合も容易です。
(New)with-xata	Xataをデータレイヤーとして使用する方法です。このテンプレートでは、Xataデータベースに接続するAPIルート、型安全なコード生成、アクセシビリティ対応、ダーク/ライトモード、CSSトランジションのためのprefers-reduce-motionの尊重などが提供されます。Xataは、サーバーレスのデータベースプラットフォームであり、AWS Lambdaと統合されています。Xataを使用することで、データの収集、保存、クエリを簡単に行うことができます。また、Xataは、高度なセキュリティ機能を備えており、データの暗号化やアクセス制御などを提供します。Xataは、多くのWebアプリケーションで使用されており、高速で信頼性が高く、柔軟性があります。
(New)with-yarn-workspaces	ワークスペースは、Yarn 1.0からデフォルトで利用可能になりました、このパッケージアーキテクチャを設定する方法です。これにより、複数のパッケージを設定し、1回のyarn installですべてを一度にインストールできます。このサンプルでは、3つのワークスペースがあります。web-app：Next.jsアプリ、foo：通常のノードモジュール、bar：Next.jsによってコンパイルされるReactコンポーネント（詳細については、packages/web-app/next.config.jsを参照してください）。

Next.js公式examples集

Next.jsの入門 0 最初	説明	app router
hello-world	（基礎)（公式） Next.jsの基礎中の基礎です。

Next.jsの基礎 1 易しい	説明	app router
basic-css	（基礎)（公式） CSS in JSの基本的な使い方のサンプルです、Next.jsでcssファイル（装飾）の基本的な使用方法です。
basic-export	（基礎) コマンドnext exportの使用方法です。 build時にこのコマンドを使うと静的なHTMLファイルを生成し（動的ルーティングの場合はその分だけのファイルを作成）、正しいディレクトリに配置します。静的なHTMLファイルを作るのでサーバー側にnode.js環境が不要になります。
dynamic-routing	（基礎)（公式1） （公式2）動的ルーティングの使用方法です。 Next.jsではページ名を角括弧(ブラケット、[]の事)で囲う事で動的なルーティングを自動的に作成できます。	Catch-all Segments [フォルダ名]
environment-variables	（基礎)（公式） Next.jsでの環境変数の使い方です。
head-elements	（基礎)（公式） Next.jsでHTMLのヘッド要素を追加、変更する方法を学びます。
layout-component	（基礎)（公式1）（公式2） ページ内でコンポーネントを使う基本的なレイアウトの組み方を学びます。
nested-components	（基礎) コンポーネントをネスト（入れ子：例えばHTMLタグで囲んだ中にHTMLタグを入れる）して利用する使用方法です。
using-router	（基礎)（公式1）（公式2） コンポーネントの代わりにnext/routerを使ってページをリンクします。
with-app-layout	（基礎)_app.jsを使用してすべてのページにグローバルレイアウトを実装します。
with-loading	（基礎)（公式） ページ切替時に時間がかかる時、Loading画面を表示する技術です。

Next.jsの基礎 2 普通	説明	app router
(New)app-dir-mdx	create-next-appでブートストラップされたNext.jsプロジェクトです。"bootstrapped"とは、プロジェクトを開始するために必要な最小限のコードや設定を提供することを意味します。create-next-appは、Next.jsプロジェクトを簡単に作成するためのツールであり、プロジェクトの最初のセットアップを簡素化するために、Next.jsアプリケーションの最小限の構成を提供します。	app router
(New)github-pages	このサンプルでは、静的にエクスポートされたNext.jsアプリケーションをGitHub Pagesにデプロイすることができます。	app router
(New)hello-world-esm	Next.jsの最も基本的なアイデアを示しています。ネイティブESMモードで実行されており、2つのページがあります。pages/index.tsxは/リクエストに応答し、pages/about.tsxは/aboutに応答します。next/linkを使用すると、ユニバーサルルーティング機能を備えたハイパーリンクを追加できます。dayディレクトリは、サブディレクトリを持つことができます。ネイティブESMモードとは、Next.js v12で導入された、ECMAScriptモジュール（ESM）をネイティブにサポートするモードのことです。これにより、Node.jsのバージョンに依存せずに、ESMを使用してNext.jsアプリケーションを構築することができます。また、ESMを使用することで、ビルド時間の短縮やパフォーマンスの向上などのメリットがあります。
(New)middleware	Next.jsでミドルウェアを使用して、リクエストが完了する前にコードを実行する方法です。indexページ（pages/index.tsx）には、リダイレクト、リライト、または通常の動作を持つページへのリンクのリストがあります。ミドルウェアファイル（middleware.ts）では、エクスポートされた構成にマッチャーを定義することで、すでにルートがフィルタリングされています。すべてのリクエストでミドルウェアを実行する場合は、マッチャーを削除できます。
(New)middleware-matcher	Next.jsのミドルウェアを特定のページにのみマッチングするように構成する方法です。indexページ（pages/index.ts）には、マッチングされたかどうかを示す動的ページへのリンクのリストがあります。ミドルウェアファイル（middleware.ts）には、特別なマッチャー構成キーがあり、マッチングされたページを細かく制御できます。ただし、ミドルウェアは常に最初に実行され、サーバーサイドで_nextルートに常にマッチングされることに注意してください。
(New)modularize-imports	インポートのモジュール化のサンプルです。modularizeImports設定オプションの使い方です。
(New)next-css	Next.jsの組み込みCSSインポートおよびCSSモジュールサポートを使用する方法です。
(New)next-forms	Next.jsでフォームを作成する方法です。	app
(New)next-offline	next-offline プラグインを使用する方法です。
(New)with-yarn-workspaces	ワークスペースは、Yarn 1.0からデフォルトで利用可能になりました、このパッケージアーキテクチャを設定する方法です。これにより、複数のパッケージを設定し、1回のyarn installですべてを一度にインストールできます。このサンプルでは、3つのワークスペースがあります。web-app：Next.jsアプリ、foo：通常のノードモジュール、bar：Next.jsによってコンパイルされるReactコンポーネント（詳細については、packages/web-app/next.config.jsを参照してください）。
active-class-name	（公式） Next独自のLinkを使ってclassNameでプロパティを設定する使用方法です。
api-routes	（公式1）（公式2） 基本的なAPIルートの使用方法です。
catch-all-routes	（公式） ページをデータから自動的に作成してくれる機能です。
data-fetch	（公式） サーバーとクライアントでデータをフェッチするのが非常に簡単になります。
fast-refresh-demo	（基礎)（公式） 編集結果を即座に反映させる機能です。
headers	（公式） Next.jsのヘッダーを使用して、カスタムHTTPヘッダーをNext.jsアプリに追加する方法です。
progressive-render	プログレッシブサーバーサイドレンダリングを実装するアプリの使用方法です。
redirects	（公式1）（公式2） 受信したリクエストパスを別の宛先パスにリダイレクトする方法です。
rewrites	（公式1）（公式2） 着信要求パスを別の宛先パスにマップする方法です。
with-absolute-imports	（公式） 絶対インポートを使用したアプリの使用方法です。
with-context-api	アプリでreact context apiを使用する方法です。
with-dynamic-import	（公式1） （公式2）モジュールを動的にインポートする方法です。
with-env-from-next-config-js	（公式） next.config.jsを使って環境変数をビルド時に設定します。
with-eslint	Next.jsでデフォルトで使用可能になったESlintの使用方法です。
with-http2	HTTP2サーバーを使った最も基本的な使用方法です。
with-next-page-transitions	ページ間移動時において読み込み状態を簡単に追加します。
with-portals-ssr	（React 公式) portal ポータル (portal) は、親コンポーネントの DOM 階層外にある DOM ノードに対して子コンポーネントをレンダーするための公式の仕組みを提供します。
with-portals	（React 公式) portal Next.jsでReactPortals機能を使用する方法です。
with-prefetching	ページをプリフェッチ（事前読み込み)するサンプルアプリです。
with-react-helmet	next.jsとreact-helmetを組み合わせる方法の最小限の使用方法 ドキュメントヘッドへのすべての変更を管理します。
with-react-hook-form	Form処理 react-hook-formの使用方法です。
with-shallow-routing	（公式） ShallowRoutingExampleの使用方法です。
with-static-export	（公式1）（公式2） APIからデータをフェッチするNext.jsアプリケーションを静的HTMLファイルにエクスポートして、ページの動的リストを生成する方法です。	app router
with-typescript-graphql	GraphQLとtypescriptの使用方法です。
with-typescript-types	TypeScript型システムをNext.jsに統合する方法です。
with-typescript	（公式） タイプスクリプトを使って型を適用します。
with-vercel-fetch	@vercel/fetch の使用方法です。
with-zones	（公式1）（公式2）（公式3） マルチゾーン機能を使用して、複数のアプリを1つのアプリとして使用できます。

Next.jsの基礎 3 中級、上級	説明	app router
(New)react-remove-properties	Next.jsのreactRemovePropertiesオプションを使用して、Reactプロパティを削除する方法です。
(New)remove-console	Next.js の removeConsole オプションを使って、console.error 以外のすべての console.* 呼び出しを削除するのとすべてのログを表示しない方法です。
(New)with-babel-macros	babel-macros の設定と使い方を説明します。babel-macros を使えば、設定しなくてもマクロとしてエクスポートする babel プラグインを簡単に追加できます。
(New)with-cookies-next	クッキーの取得、設定、および削除を行います。これはクライアント側とサーバー側の両方で動作します。クライアント側の任意の場所で使用でき、getServerSidePropsでサーバーサイドレンダリングに使用でき、APIハンドラーで使用できます。
(New)with-turbopack	Turbopackは、VercelのWebpackとNext.jsのクリエイターによってRustで書かれた、JavaScriptとTypeScriptに最適化された新しいインクリメンタルバンドラです。大規模なアプリケーションでは、TurbopackはViteより10倍、Webpackより700倍高速に更新されます（ベンチマーク）。最大のアプリケーションでは、更新速度がViteより20倍速くなることもあります。このプレイグラウンドは、Next.js v13 App Directory Playgroundのミラーであり、Next.js開発サーバーとしてTurbopackを使用しています（next dev --turbo）。Turbopackは現在ベータ版であり、まだ本番用には準備ができていませんのでご注意ください。	app router と pages router両方 route-groups (フォルダ名) Catch-all Segments [フォルダ名]
(New)with-turbopack-loaders	Turbopackは、webpackのローダーAPIのサブセットをサポートしており、Turbopackでコードを変換するためにwebpackローダーを使用できます。このサンプルでは、Next.jsをwebpackローダーを使用して実行するときに設定する方法を示しています。依存関係をインストールして開発サーバーを起動してください。
with-route-as-modal	このサンプルでは、ルートに基づいてモーダルを条件付きで表示する方法を示しています。
with-web-worker	WebWorkerは、javascriptでマルチスレッド（複数の処理を同時に行う）を行うための仕組み。 worker-pluginを利用してWebWorkersでコードを実行する方法です。
with-webassembly	WebAssemblyは、ブラウザでプログラムを高速実行するためにブラウザ上で動くバイナリコードの新しいフォーマット。WebAssemblyの使用方法です。

状態管理（最新、話題な）	説明	app router
(New)with-react-query	React Queryの使用方法です。TanStack公式サンプル query/examples/react/nextjs
with-jotai	Jotaiは非常に使いやすいReactの状態管理ライブラリです。
with-recoil	状態管理 Recoilは Facebookによって提唱された状態管理ライブラリです。コンポーネントをまたいだStateを、自由にいくつでも持つことができます。
with-zustand	ZustandはFluxとReduxの流れを汲む React 向け軽量ステート管理ライブラリです。グローバルストアが必要な場合は、APIが競合ライブラリの中でおそらく最も簡単です。

状態管理 Redux関連	説明	app router
with-redux-observable	Redux関連
with-redux-persist	Redux関連
with-redux-saga	Redux関連
with-redux-thunk	Redux関連
with-redux-wrapper	Redux関連
with-redux	Redux関連	app router
with-rematch	rematchはreduxを利用したユーティリティなので、store.jsやwithRematchなどの要素はwith-reduxのサンプルと非常によく似ています。もしreduxがNext.jsとどのように統合されているか知らない場合は、with-reduxのサンプルを先に見てください。RematchはReduxの拡張機能なので、多くの要素は同じです。

状態管理 mobx関連	説明	app router
with-mobx-state-tree	MobXによる状態管理
with-mobx	MobXは、機能的反応プログラミング（TFRP)を透過的に適用することで、状態管理をシンプルかつスケーラブルにする、実戦的ライブラリです。

状態管理 その他	説明	app router
convex	Convex は、共有ステートを保存し、それをあらゆる場所で同期することを簡単出来ます。
with-kea	状態管理フレームワーク
with-overmind	状態管理 Overmindは、状態管理のオーケストレーションを最小限に抑え、開発だけに集中できるような開発環境を目指している
with-reflux	React公式 一方向のデータフローを持つアプリケーションストアの管理にrefluxを使用する方法です。
with-unstated	unstated-nextReact状態管理ライブラリ
with-xstate	ステートマシンや状態遷移を扱えるJavaScriptのライブラリ XStateをNext.jsに統合する方法です。 JavaScriptとTypeScriptの有限状態マシンと最新のWeb用のステートチャートです。

テスト関連	説明	app router
with-cypress	（公式） Cypress はフロントエンドのテストツールでエンドツーエンドテスト、統合テスト、ユニットテストが出来ます。
with-jest-babel	Next.jsとBabelで動作するようにJestを設定する方法を説明します。Next.js 12のリリース以降、Next.jsはJest with SWCのための設定を内蔵しています。最新の実装は with-jest のサンプルをご覧ください。
with-playwright	（公式） Playwright を理解するためのサンプルです。Playwrightは簡単にChrome、Safari、Firefox各ブラウザをNext.js上から実行できるようになります。
with-vitest	（公式） Next.jsでVitestを使用する方法を理解するためのサンプルです。	app router と pages router両方
with-jest	（公式） テスト	app router と pages router両方
with-mocha	テスト
with-tesfy	A/Bテストと機能フラグ

開発便利ツール モック関連	説明	app router
with-msw	Mock Service Workerは、ブラウザとノード用のAPIモックライブラリ

tRPC	説明	app router
with-trpc	従来のRESTやGraphQLに代わる新技術の一つです。 tRPCは、スキーマやコード生成無しに、完全にタイプセーフなAPIを簡単に構築し利用出来るようになります。TypeScriptと静的型付けがWebプログラミングのベストプラクティスとなりつつある中、APIは大きな壁となっています。その壁を乗り越えるためにAPIのエンドポイントを静的に型付けをし、クライアントとサーバ間（あるいはサーバとサーバ間）でそれらの型を共有するためのより良い方法が必要となります。tRPCを導入すれば、TypeScriptの能力をフルに活用したタイプセーフなAPIを構築するためのシンプルなライブラリが利用できるようになります。現在、TypeScriptでタイプセーフなAPIを実装する方法としては、GraphQLが主流となっています。しかし、GraphQLはAPIを実装するための言語にとらわれない仕様として設計されているため、TypeScriptのような言語の力をフルに活用することが出来ません。プロジェクトがフルスタックのTypeScriptで構築されている場合、コード生成に頼らず、クライアントとサーバーの間で直接型を共有することができるようになります。

モノレポ関連	説明	app router
with-turbo	Turborepoは Vercelが開発したモノレポ環境を作るビルドツールです。

form関連	説明	app router
with-formspree	フォームライブラリであるFormspreeを理解するためのサンプルです。

CMS関連 Data Fetching	説明	app router
blog-starter	（公式1）（公式2） Next.jsとMarkdownを使用して静的に生成されたブログの使用方法です。
cms-agilitycms	（公式1）（公式2） AgilityCMS
cms-buttercms	（公式1）（公式2） ButterCMS
cms-contentful	（公式1）（公式2）（公式3） Contentful	app
cms-cosmic	（公式1）（公式2） Cosmic
cms-datocms	（公式1）（公式2）（公式3） DatoCMS
cms-graphcms	（公式1）（公式2）（公式3） GraphCMS
cms-prepr	（公式1）（公式2）（公式3） Next.jsとPreprを使用して静的に生成するブログの使用方法です。
cms-prismic	（公式1）（公式2）（公式3） Prismic
cms-sanity	（公式1）（公式2）（公式3） Sanity
cms-storyblok	（公式1）（公式2）（公式3） Storyblok
cms-takeshape	（公式1）（公式2）（公式3） TakeShape
cms-wordpress	（公式1）（公式2）（公式3） WordPress

CMS関連	説明	app router
(New)cms-dotcms	Next.jsとdotCMSを使った静的生成ブログのサンプルです。dotCMSをデータソースとしてNext.jsの静的生成機能を紹介します。
(New)cms-enterspeed	Next.jsとEnterspeedを使った静的生成ブログのサンプルです。Enterspeedをデータソースとして使ったNext.jsの静的生成機能を紹介します。
(New)cms-keystonejs-embedded	KeystoneJSを使用した静的ブログのスタータープロジェクトです。開発モードでコンテンツを作成および編集するための強力な管理UIや、静的にビルドされたページによる高速な本番サイト、自動生成されたGraphQL APIを介したクライアント側からのデータアクセス 等の機能があります。
(New)cms-kontent-ai	Next.jsとKontent.aiを使った静的生成ブログのサンプルです。Kontent.aiをデータソースとして使ったNext.jsの静的生成機能を紹介します。
(New)cms-payload	Next + Payloadサーバーレスデモです。payloadcms/next-payloadを利用して、NextJSアプリと同じリポジトリにPayloadをサーバーレスでデプロイできます。	app router route-groups (フォルダ名) Catch-all Segments [フォルダ名]
(New)cms-sitefinity	Next.jsとSitefinity CMSを使った静的生成ブログのサンプルです。既存のcms-sitefinityにTypeScriptを加えました、このサンプルでは、Sitefinity CMSをデータソースとして、Next.jsの静的生成機能を紹介しています。
(New)cms-webiny	Next.jsとWebinyを使った静的生成ブログのサンプルです。Webinyをデータソースとして使ったNext.jsの静的生成機能を紹介します。
cms-builder-io	（公式）(無料、有料あり) Builder.io はGUIでブロックを組み合わせてWebページの開発をします。非開発者でも簡単にページを作成、更新、ドラッグ&ドロップで作成できるコンポーネントです。
cms-makeswift	（公式）(無料、有料あり) Makeswiftを使用して、Next.jsで静的に生成されたページをGUIで変更してページを作成していきます。
cms-plasmic	(無料、有料あり) Plasmic ヘッドレスCMS ビジュアルページビルダーです、俗に言うノーコードでページを作成していきます。
cms-tina	（公式） (無料、クラウドは将来有料化 ) TinaCMS ヘッドレスCMS ビジュアルページビルダーです、俗に言うノーコードでページを作成していきます。
cms-umbraco-heartcore	（公式）(無料、クラウドは有料) Umbraco Heartcore ヘッドレスCMS ビジュアルページビルダーです、俗に言うノーコードでページを作成していきます。
cms-drupal	Next.jsとDrupal（オープンソースのCMS)を使用して静的に生成するブログの使用方法です。
cms-ghost	Next.jsとGhost（コンテンツ、ニュースレター、メンバー、支払い機能)（有料)を使用して静的に生成するブログの使用方法です。
with-netlify-cms	Gitワークフロー用のオープンソースのコンテンツ管理システム

CSS関連 Chakra UI編	説明	app router
with-chakra-ui	tailwind CSSに非常によく似たCSSです。 なのでtailwind CSSとよく比較されます。プロトタイプ（試作品）を作る場合等にオススメです。tailwindCSSの特徴を持ち更に簡易化しています、デフォルトで簡易なコンポーネント（ボタンやフォーム）を提供しているのでプロトタイプの製作が簡単です。しかしその分tailwindCSSと比べ自由度は低いです。 中身は CSS-in-JSのemotionをtailwind CSS風にしています。

CSS関連 tailwind CSS編	説明	app router
(New)with-windicss	WindiCSSとNext.jsの組み合わせた使用方法です。Windi CSSは、Tailwind CSSに似たCSSフレームワークであり、CSSをJavaScriptで記述することができます。Windi CSSを使用することで、CSSのクラス名を簡素化し、CSSの再利用性を高めることができます。また、Windi CSSは、CSSの自動プレフィックス付けや、CSSの最適化などの機能を提供し、高速で信頼性が高く、柔軟性があります。Windi CSSは、多くのWebアプリケーションで使用されており、Vue.jsやReactなどのフレームワークとの統合も容易です。
with-tailwindcss-emotion	（公式） emotion(CSS-in-JS)を使用しているプロジェクトにtailwindcssを追加する場合のサンプルです。
with-tailwindcss	（公式1）（公式2） 完全なユーティリティファーストなCSS 次世代型のCSSとして注目されています。 Chakra UIとは違い他のCSS-in-JSに依拠していません。 Chakra UIとよく比較されます。装飾に関してはフルカスタマイズできます。自由度は高いですがデフォルトなコンポーネント（ボタンやフォーム）は提供していません。

CSS関連 CSS-in-JS styled-jsx編	説明	app router
with-styled-jsx-plugins	CSS styled-jsxプラグインを使用
with-styled-jsx-scss	PostCSS、SASS（SCSS)、LESS、またはstyled-jsxを備えたその他のプリプロセッサを使用できます。
with-styled-jsx	（公式）styled-jsxの使用方法です。

CSS関連 CSS-in-JS emotion編	説明	app router
with-emotion-swc	EmotionはCSS in JSフレームワークです。重要なCSSを抽出してインライン化します。
with-emotion-vanilla	emotionの基本的な使用方法 emotion（TypeScriptと相性の良い後発のCSS-in-Jsライブラリ)
with-emotion	（公式）CSS in JS SSR中にサーバーデータを直接Next.jsページに渡す

CSS関連 CSS-in-JS その他	説明	app router
(New)with-vanilla-extract	appディレクトリを使用したVanilla Extractの使用方法です。Vanilla Extractは、CSS in JSライブラリであり、TypeScriptに対応しています。Vanilla Extractを使用することで、CSSをJavaScriptで記述することができ、TypeScriptの型チェックを利用することができます。また、Vanilla Extractは、CSSの自動プレフィックス付けや、CSSの最適化などの機能を提供し、高速で信頼性が高く、柔軟性があります。Vanilla Extractは、多くのWebアプリケーションで使用されており、ReactやNext.jsなどのフレームワークとの統合も容易です。	app router
with-cssed	CSS-in-JSライブラリであるcssedをNext.jsで使用する方法を理解するためのサンプルです。
with-styled-components-babel	CSS in JSのライブラリ これを利用するとコンポーネント単位で装飾が可能になります。
with-aphrodite	（公式） CSS in JS aphroditeを使用したアプリの使用方法です。
with-compiled-css	styled-jsxの代わりにコンパイル済みをビルド時の CSS-in-JS スタイリング ソリューションとして使用する方法です。
with-cxs	（公式）CSS in JS minimal CSS in JS cxsを使用したアプリの使用方法です。
with-filbert	CSS in JS ソリューション（フレームワーク)filbert-jsでNext.jsを使用する
with-goober	小さなcss-in-js
with-linaria	（公式）CSS linariaを使用したアプリの使用方法です。
with-react-with-styles	CSS in JS
with-stitches	限りなくゼロに近いランタイム、SSR、マルチバリアントのサポート、そしてクラス最高のデベロッパーエクスペリエンスを備えたCSS-in-JS。
with-styled-components-rtl	CSS in JS 右から左にすると、サイト内のすべての要素を「反転」して、右から左に読む文化（たとえば、アラビア語)のニーズに合わせることができます。
with-styled-components	（公式） CSS in JS CSSstyled-components
with-styletron	（公式） CSS in JS スタイルソリューション
with-typestyle	styled-jsx以外のスタイリングソリューションを使用する方法です。このスタイリングソリューションは、ユニバーサルスタイルをサポートしています。つまり、最初のレンダリングに必要なスタイルをHTML内で提供し、残りのスタイルをクライアントで読み込むことができます。この例では、typestyleを使用しています。このためサーバーサイドでレンダリングされたスタイルをに挿入しています。

CSS関連 フレームワーク	説明	app router
with-rbx-bulma-pro	Bulma is simply a collection of CSSclasses.
with-react-bootstrap	react-bootstrap react用に再構築されたbootstrap
with-reactstrap	reactstrapの使用方法 reactstrapはBootstrapのコンポーネントです。

CSS関連 その他	説明	app router
with-yoga	Yoga Design Systemを使用する方法を理解するためのサンプルです。このサンプルはこのUIツールキットとNext.jsフレームワークの統合を目的にしています。
with-fela	（公式） CSS in JS
with-next-sass	Sass/Scssモジュールサポートの使用方法です。
with-react-jss	React-JSSは、新しいHooks APIを使ってJSSをReactに統合します。JSSとデフォルトのプリセットがすでに組み込まれています。
with-react-md-typescript	マテリアルデザインをScssで使用する方法です。
with-react-md	マテリアルデザインをScssで使用する方法です。

UI関連	説明	app router
(New)radix-ui	このサンプルでは、いくつかの基本的なRadix UIコンポーネントを紹介しています。
(New)with-axiom	next-axiomパッケージを介してAxiomとNext.jsプロジェクトを使用する方法です。カスタムのwithAxiomラッパーを使用して、nextの設定オブジェクト、ミドルウェア、およびAPI関数をラップします。ログオブジェクトは、フロントエンド、ミドルウェア、およびAPI関数から使用できます。
(New)with-material-ui	Material UI を使用したサンプルです。
(New)with-next-ui	ReactのNextUIと一緒にNext.jsを使用する方法です。これはこのUIツールキットをフレームワークと統合する方法です。
with-geist-ui	GeistはVercelデザイン由来のReact UIライブラリです。
with-mantine	MantineはReactのUIライブラリです。シンプルなプロジェクトでNext.jsでの使い方を学びます。
using-preact	高速で小型のReactと言われるpreactを使用するサンプルです。
with-ant-design	Ant Design of ReactとともにNext.jsを使用する方法です。	app
with-grommet	Grommet UI library
with-ionic-typescript	オープンソースのモバイル＆ディスクトップUIツールキットの使用方法です。
with-mdbreact	React Bootstrap UIキット
with-patternfly	RedHatが作っているUIフレームワークUIパターン集
with-rebass	UIコンポーネントRebassはReactのブートストラップです。
with-semantic-ui	CSSフレームワーク Semantic UI Reactと一緒にNext.jsを利用する方法

API Routes関連 GraphQL編	説明	app router
(New)api-routes-apollo-server-and-client	Apollo ServerとApollo Clientを使用して、GraphQLサーバーから必要なデータを簡単に取得するexampleです。Apolloはデータの取得や変更だけでなくクエリとその結果を分析してクライアント側のキャッシュを構築し、さらにクエリや変更が実行されるたびに最新の状態に保ちます。Next.jsとApollo Serverの統合は、apollo-server-integration-nextというコミュニティパッケージを使用して実装されています。このexampleでは、ApolloをNext.jsのデータ取得メソッドとシームレスに統合し、サーバーでクエリを取得してブラウザでハイドレートしています。
(New)api-routes-apollo-server-and-client-auth	api-routes-apollo-server-and-client このサンプルに認証を追加しています。
with-graphql-gateway	GraphQL Meshを使って、REST APIをベースにしたGraphQL Gatewayを作成します。
api-routes-apollo-server	ApolloはGraphQLクライアント
api-routes-graphql	（公式） GraphQL Server apollo-server-micro
with-apollo-and-redux	ApolloはGraphQLクライアント
with-apollo-neo4j-graphql	GraphQLとApolloでNeo4jデータベースを使用する方法です。
with-apollo	ApolloはGraphQLクライアント
with-graphql-hooks	GraphQLフックの使用方法。GraphQL Hooksは、最小限のフック優先のGraphQLクライアントになることを目的としたNearFormのライブラリです。
with-graphql-react	graphql-react最新のコンテキストを使用したReactのGraphQLクライアント
with-relay-modern	Facebookが開発 Next.jsの9.3で導入されたgetStaticProps, および9.4で導入されたIncremental Static Regenerationは、Relayと非常に相性がいい The production-ready GraphQL client for React.
with-urql	高度にカスタマイズ可能で用途の広いGraphQLクライアント

API Routes関連	説明	app router
api-routes-cors	（公式1）（公式2） CORS（Cross-Origin Resource Sharing) とは 追加のHTTPヘッダーを使用して、ある起点で実行されているWebアプリケーションに、異なる起点から選択されたリソースへのアクセスを許可するようにブラウザーに指示するメカニズム
api-routes-middleware	（公式1） （公式2） APIルート Next.jsのAPIエンドポイントを包み込むシンプルなミドルウェアを実装する方法です。
api-routes-rate-limit	APIの使用制限 APIをある一定回数で使用できなくする方法。
api-routes-rest	（公式） Next.jsのAPIエンドポイントでRESTを使用する方法です。

コンポーネント関連 storybook編	説明	app router
with-storybook-styled-jsx-scss	Storybookの使用方法 Styled-jsx (with SCSS)
with-storybook	UIコンポーネントを開発するためのオープンソースツール	app router

コンポーネント関連 その他	説明	app router
with-react-foundation	react-foundationはReactのコンポーネント集です。
with-skynexui-components	skynexui/components を使えば、styled-jsx の長所を生かし、コンポーネント・ユーティリティ第一のアプローチで、優れた設定可能なデフォルトを持つ独自の UI を作成することが可能になります。このライブラリーの焦点は、クロスプラットフォームでUIを書くための共通の「DSL」を提供することです。
with-orbit-components	Orbitは、Kiwi.comの特定のニーズに合わせて作成されたオープンソースのデザインシステムで、旅行プロジェクトのニーズにも対応しています。
with-paste-typescript	コンポーネントライブラリ
with-react-multi-carousel	react-multi-carouselは、複数のアイテムとSSR(Server-side Rendering)をサポートするReactカルーセルコンポーネントです。
with-stencil	ステンシルは、Webコンポーネント（より具体的にはカスタム要素)を生成するコンパイラです。ステンシルは、最も人気のあるフレームワークの最高の概念をシンプルなビルドタイムツールに組み合わせています。

スターターキット関連	説明	app router
blog	Blogのスターターキットです。
with-reflexjs	Reflexjsはスタイルプロップ、カラーモード、テーマ、バリアントを備えた迅速なUI開発のためのライブラリ＋スターターキット、テーマ、ブロックでGatsbyやNext.jsのサイトを迅速に構築することができます。

blog関連	説明	app router
with-edgedb	バックエンドにEdgeDBを使用して構築したシンプルなブログアプリケーションです。
blog-with-comment	Upstash（サーバーレスRedis)（無料、有料)とAuth0（認証)（無料、有料)を使用してNext.jsブログアプリケーションにコメント機能を追加します。

国際化	説明	app router
(New)app-dir-i18n-routing	Next.jsは、アプリディレクトリ内での国際化ルーティングをデフォルトでサポートしていませんが、自分で簡単に実装することができます。このサンプルでは、Edge上で国際化ルーティングを実装する方法を示しています。	app router Catch-all Segments [フォルダ名]
X with-next-multilingual	next-multilingualモジュールは、多言語アプリケーションに必要な標準機能に加えて、ローカライズされたURLとモジュール化された文字列管理を提供するNext.js独自の国際化対応モジュールです。
i18n-routing	（公式） 国際化されたルーティング
with-i18n-next-intl	国際化 next-intl の使用方法 Next.jsの国際化されたルーティング機能を補完
with-i18n-rosetta	汎用国際化ライブラリ	Catch-all Segments [フォルダ名]
with-lingui	LinguiJS-JavaScriptでのシームレスな国際化
X with-next-i18next	i18nextに基づく国際化をnext.jsアプリケーションに追加する最も簡単な方法です。 Learn more on next-i18next
with-next-translate	next-translate Next.jsページを翻訳するためのツールです。	app router Catch-all Segments [フォルダ名]
with-react-intl	FormatJSクライアントとサーバーでWebアプリを国際化します。

React Native関連	説明	app router
with-expo-typescript	Next.js、Expo、およびTypeScriptを使用してユニバーサルReactアプリを作成するためのスタータープロジェクトです。
with-expo	ExpoはReact Native のツールキットで、 React Native をより簡単に扱うことができます。
with-react-native-web	react-native-webを使用して、プラットフォームに依存しないReactNativeのコンポーネントとAPIをWebに取り込む方法です。

amp関連	説明	app router
amp-first	AMPファーストサイトのボイラープレートを設定
amp-story	Next.jsとAMP機能を使用してamp-storyを含むAMPページを作成する方法です。
amp	（公式1）（公式2） Next.jsとAMP機能を使用してAMPページを作成する方法。AMP(Accelerated Mobile Pages) とは、モバイルページを高速に表示させるための手法のこと（Webコンポーネントフレームワーク)

pwa関連	説明	app router
progressive-web-app	next-pwaを利用した PWA（プログレッシブウェブアプリ)の使用方法です。

画像関連	説明	app router
(New)image-legacy-component	Next.jsで最適化されたレスポンシブ画像を提供するためにLegacy Image Componentを使用する方法です。indexページ（pages/index.js）には、内部画像と外部画像があります。next.config.jsでは、domainsプロパティを使用して外部画像を有効にしています。他のページは異なるレイアウトを示しています。
(New)with-cloudinary	Next.js、Cloudinary、Tailwindを使って画像ギャラリーサイトを作成します。
image-component	（公式1）（公式2） 画像コンポーネントを使用して最適化されたレスポンシブ画像を提供する方法です。
svg-components	.babelrcを使用して、.svgファイルをインポートし、それらをReactコンポーネントとしてレンダリングするためのサポートを追加します。
with-three-js	threejsはWebGL レンダラを持つ軽量な 3D ライブラリ。このライブラリには Canvas 2D、SVG、CSS3Dのレンダラーも用意されています。

検索関連	説明	app router
with-elasticsearch	Elasticsearchは、RESTfulな分散型検索・分析エンジンです。Elastic Stackの中核として、データを一元的に管理し、高速検索、関連性の微調整、強力な分析機能を簡単に拡張することができます。このサンプルでは、Next.jsアプリの検索バックエンドとしてElasticsearchに接続し、使用する方法を説明します。
with-algolia-react-instantsearch	検索の実装と検索の分析

リッチテキスト関連	説明	app router
with-draft-js	React用のリッチテキストエディタの実装例です。 Rich TextEditor Framework for React

アニメーション関連	説明	app router
with-particles	美しいパーティクルアニメーションを作成するためにReact tsParticlesパッケージを使用したNext.jsアプリケーションサンプルです。
with-framer-motion	motionはオープンソースで本番環境に対応したモーションWeb上のReact用のライブラリ
with-gsap	アニメーションライブラリとしてGSAPを使用する方法です。

動画関連	説明	app router
(New)with-apivideo	このサンプルはビデオアップローダーと再生アプリを使用して、Next.jsとapi.video、ビデオファーストAPIで構築されています。
with-hls-js	HTTPライブストリーミングクライアントを実装するJavaScriptライブラリです。
with-mux-video	この使用方法では、APIファーストのビデオプラットフォームであるMuxVideoを使用しています。この使用方法では、Next.jsアプリケーションでのビデオのアップロードと再生を取り上げています。
with-videojs	デフォルトのスタイルの処理を含む、Video.jsとともにNext.jsを使用する方法です。

サイトマップ関連	説明	app router
with-next-sitemap	next-sitemapを使用してサイトマップを作成します。
with-sitemap	sitemap.xmlファイルを生成する方法です。

mdx関連	説明	app router
with-mdx-remote	next-mdx-remoteライブラリを使用して簡単なブログを構築する方法です。
with-mdx	MDXとはMarkdownドキュメントにJSXをシームレスに記述することができる。 next.jsアプリのトップレベルページとしてMDXを使用する方法です。

altJs関連 Reason編	説明	app router
with-reasonml-todo	Reasonは、JavaScriptとOCamlのエコシステムを活用した、シンプルで高速かつタイプセーフなコード。 ReasonMLおよびReasonReactコンポーネントを使用したサンプルアプリ
with-reasonml	Reasonは、OCamlの強力な型システムを採用したプログラミング言語で、JavaScriptやC系言語から来た人にも親しみやすい構文になっています。 ReasonMLおよびReasonReactコンポーネントを使用したサンプルアプリ

バックエンドサービス DB関連 postgres編	説明	app router
(New)with-postgres	Next.js プロジェクトで Postgres.js を使用するサンプルです。
(New)with-supabase	Supabase Authはクッキーを使用し、ユーザーのセッションをNext.jsアプリ全体で利用できるようにします。このサンプルには、クライアントコンポーネント、サーバーコンポーネント、ルートハンドラー、サーバーアクション、およびミドルウェアが含まれます。	app router

バックエンドサービス DB関連 Fauna編	説明	app router
with-fauna	Faunaというデータベースを使用して、GraphQLエンドポイントを利用する方法を理解するためのサンプルです。

バックエンドサービス DB関連 prisma編	説明	app router
with-prisma	Node.jsおよびTypeScript用の次世代ORMです。
with-reason-relay	GraphQLのバックエンドにPrisma + Nexusを使った使用方法です。

バックエンドサービス DB関連 mysql編	説明	app router
with-mysql	MySQLの使用方法です。

バックエンドサービス関連 Firebase編	説明	app router
with-firebase-authentication	（公式1）（公式2） （認証) サーバーレスAPIを使用したFirebase認証の使用方法です。 official example
with-firebase-cloud-messaging	FirebaseCloudMessagingの使用方法です。
with-firebase-hosting	Firebaseホスティングの使用方法です。
with-firebase	クライアントサイドアプリケーション用のFirebaseの簡単な設定です。

バックエンドサービス関連 AWS編	説明	app router
(New)with-aws-amplify "with-aws-amplify"	NextJSとAWS Amplifyを使用してサーバーレンダリングされたWebアプリケーションを構築する方法です。AWS Amplifyを使用して、アプリに必要なAWSクラウドリソースを生成、管理、および消費します。NextJSアプリには、動的および静的ルートがあり、着信リクエストに基づいてサーバー上でデータをロードします。

バックエンドサービス DB関連 その他	説明	app router
(New)with-azure-cosmos	Azure Cosmos DBは、モダンなアプリ開発のためのフルマネージドNoSQLおよびリレーショナルデータベースです。Azure Cosmos DBは、1桁ミリ秒のレスポンスタイム、自動的で即時のスケーラビリティを提供し、あらゆるスケールで速度を保証します。SLAに裏付けされた可用性とエンタープライズグレードのセキュリティにより、ビジネスの継続性が保証されます。
(New)with-grafbase	GrafbaseをNext.jsで使用する方法です。Grafbase CLIによって動力化されたローカルGraphQLバックエンドからの取得と、型安全なクエリを作成するためのGraphQL Code Generatorが特徴です。Grafbaseは、グラフデータベースを提供する企業です。Grafbaseは、グラフデータベースを使用することで、複雑なデータの関係性を簡単に表現し、データの検索や分析を高速化することができます。Grafbaseは、GraphQLを使用してグラフデータベースにアクセスすることができ、GraphQLの柔軟性とグラフデータベースのパフォーマンスを組み合わせることができます。Grafbaseは、多くのWebアプリケーションやモバイルアプリケーションで使用されており、高速で信頼性が高く、柔軟性があります。	app router Catch-all Segments [フォルダ名]
(New)with-xata	Xataをデータレイヤーとして使用する方法です。このテンプレートでは、Xataデータベースに接続するAPIルート、型安全なコード生成、アクセシビリティ対応、ダーク/ライトモード、CSSトランジションのためのprefers-reduce-motionの尊重などが提供されます。Xataは、サーバーレスのデータベースプラットフォームであり、AWS Lambdaと統合されています。Xataを使用することで、データの収集、保存、クエリを簡単に行うことができます。また、Xataは、高度なセキュリティ機能を備えており、データの暗号化やアクセス制御などを提供します。Xataは、多くのWebアプリケーションで使用されており、高速で信頼性が高く、柔軟性があります。
with-couchbase	(有料 ) Couchbaseは、データベースです。Next.jsアプリでCouchbaseに接続し、使用する方法を理解するためのサンプルです。
with-deta-base	Deta Baseという名前のアプリケーション その使用方法 NoSQL
with-knex	KnexはさまざまなSQLデータベースと連携するSQLクエリビルダーです。 Postgresデータベースに接続してクエリを実行する方法です。
with-mongodb-mongoose	MongoDBとMongooseを使用したアプリの使用方法 mongooseは、node.js上でmongoDBを扱うためのライブラリ	Catch-all Segments [フォルダ名]
with-mongodb	MongoDBを使用したアプリの使用方法です。
with-neo4j	APIルートでNeo4jというグラフデータベースを使用する方法です。
with-realm-web	Realm-Web SDK を使用して、swr を用いて realm の graphql エンドポイントに問い合わせを行います。 このサンプルでは、GraphQL のバックエンドとして MongoDB Realm を使用しています。
with-redis	Redisをデータストアとして使用する方法です。

バックエンドサービス関連 その他	説明	app router
with-nhost-auth-realtime-graphql	（公式）(Firebaseの代替)（認証) nhost（GraphQLを使用したオープンソースのFirebaseの代替) バックエンドにNhostを使った認証とGraphQLの使用方法

docker関連	説明	app router
with-docker-compose	Next.jsの開発環境と本番環境をDocker Composeで稼働させる方法を理解するためのサンプルです。
with-docker-multi-env	Next.jsでDockerを利用し、異なるenv値を持つ複数の環境にデプロイする方法を理解するためのサンプルです。
with-docker	（公式） APIルート

認証関連	説明	app router
(New)authsignal	AuthsignalをNext.jsに統合して、メールのマジックリンクを使用したパスワードレスログインとサーバーサイドリダイレクトを実装しています。ログインセッションはクッキーを使用して管理されます。セッションデータは、@hapi/ironを使用して暗号化されます。
auth-with-stytch	(無料、有料あり) Stytch + Next.jsのプロジェクトで、アプリケーションにパスワードが必要無いエレガントな認証を有効にします。
auth0	（公式） （認証)（無料、有料)認証サポートを簡単に追加する方法です。
with-iron-session	（公式） （認証)署名および暗号化されたCookieを使用してセッションデータを格納する認証システムを作成
with-magic	（公式）（認証)（無料、有料)Magic電子メールベースのマジックリンクを使用した、Cookieベースのパスワードなし認証を特徴としています。
with-passport-and-next-connect	（認証)Passport.jsでnext-connectおよびcookieベースの認証を使用して、基本的なCRUDアプリを作成します。
with-passport	（認証)ユーザー名とパスワードを使用したCookieベースの認証
with-supertokens	（公式） （認証) オープンソースの認証ライブラリ。SuperTokensで保護されたアプリケーションの簡単な設定
with-userbase	（公式） （認証)（無料、有料)Userbaseユーザーアカウントとデータの永続性を静的サイトに追加する最も簡単な方法です

セキュリティ関連	説明	app router
(New)cloudflare-turnstile	CloudflareのスマートCAPTCHA代替機能であるTurnstileを使用して、Next.jsプロジェクトを保護する方法を示しています。Turnstileは、CAPTCHAを表示せずに、Cloudflareを介さずに任意のウェブサイトに埋め込むことができます。
with-fingerprintjs-pro	(無料、有料あり ) デバイスのフィンガープリントを使用して詐欺、スパム、アカウントの乗っ取りを阻止します。
styled-jsx-with-csp	styled-jsxを使ってCSP(Content Security Policy)（クロスサイトスクリプティング (XSS) やデータインジェクション攻撃などのような、特定の種類の攻撃を検知し、影響を軽減するために追加できるセキュリティレイヤー)のstyle-srcディレクティブにnonce（暗号通信で用いられる、使い捨てのランダムな値のこと)を使用する方法です。
with-strict-csp	CSP(コンテンツセキュリティポリシー ) は、クロスサイトスクリプティング (XSS) やデータインジェクション攻撃などのような、特定の種類の攻撃を検知し、影響を軽減するために追加できるセキュリティレイヤー。 スクリプトハッシュを生成する厳密なCSPを使用したアプリの使用方法です。	app

決済代行システム関連	説明	app router
with-stripe-typescript	TypeScriptとreact-stripe-jsでStripeを使用した使用方法。 Stripe はインターネットビジネスのための決済プラットフォームです。	app

Custom Server関連	説明	app router
(New)custom-server	TypeScript + Nodemonによるカスタムサーバーのサンプルです。Nodemonを使用してNext.jsのユニバーサルコードに影響を与えることなくサーバーコードをライブリロードする一方で、サーバーとクライアントの両方でTypeScriptを使用しています。
ssr-caching	（公式1）（公式2） 一度SSRしたページをキャッシュして使用する使用方法です。

システム関連 babel polyfills etc.	説明	app router
with-custom-babel-config	（公式） カスタムBabel構成の使用方法です。
with-polyfills	ポリフィルを使用したアプリの使用方法 警告：このサンプルは、ポリフィルを追加するための推奨される方法ではなく、バンドルで問題を引き起こすことが知られています。
with-service-worker	Service Worker はブラウザが Web ページとは別にバックグラウンドで実行するスクリプトで、Web ページやユーザーのインタラクションを必要としない機能です。プッシュ通知やバックグラウンド同期

Script Component 関連	説明	app router
script-component	(中級) （公式） next/scriptを使用するさまざまなやり方を理解するためのサンプルです。
with-clerk	（公式1）（公式2） （認証)（無料、有料)ユーザー認証	app router Optional Catch-all Segments [[フォルダ名]]
with-facebook-pixel	（公式） FacebookPixelは広告効果の計測精度向上やFacebook広告の配信システム最適化を実現するツール	app router と pages router両方 _pages
with-google-analytics	（公式） GoogleアナリティクスとともにNext.jsを使用する方法です。
with-google-tag-manager	（公式） Googleタグマネージャーを使用したアプリの使用方法です。
with-segment-analytics	（公式） （有料、無料）分析機能を備えたアプリの使用方法です。	app

分析、解析、監視関連	説明	app router
(New)analyze-bundles	@next/bundle-analyzerを使用して出力バンドルを分析する方法を示します。
(New)with-opentelemetry	OpenTelemetryは、アプリケーションの簡単なインストルメンテーションのためのツールのコレクションです。instrumentation.tsファイルを使用して、Next.jsのインストルメンテーションを設定できます。OpenTelemetryによって生成されたトレースを収集および検査するには、実行中のOpenTelemetryコレクターとバックエンドが必要です。	app router と pages router両方
(New)with-tigris	TypeScriptクライアントを使ってNext.jsとTigrisで作られたシンプルなTodoアプリです。Tigrisは、データ分析およびビジネスインテリジェンスのためのクラウドベースのプラットフォームです。Tigrisを使用することで、データの収集、分析、可視化、共有を簡単に行うことができます。Tigrisは、多くのデータソースに対応しており、データの統合や変換を自動化することができます。また、Tigrisは、高度な分析機能を提供し、データの傾向やパターンを特定することができます。Tigrisは、多くの企業で使用されており、高速で信頼性が高く、柔軟性があります。
with-contentlayer	Contentlayerはコンテンツを検証しタイプセーフなJSONに変換しアプリケーションに簡単にインポートすることができるコンテンツプリプロセッサです。
with-joi	Joiおよびnext-Joiを利用して、Next.jsのAPI経路を検証する方法を理解するためのサンプルです。コネクトミドルウェアを使用したAPIルート（/api/people）と、通常のAPIルート（/api/cars）の両方のサンプルが含まれています。
with-flow	Flow静的型チェッカーFlowを使用したアプリの使用方法 flowはJavaScriptの静的タイプチェッカーです。
with-google-analytics-amp	AMPと組み合わせてGoogleアナリティクスとともにNext.jsを使用する方法です。
with-plausible	Plausibleは、軽量でオープンソースのウェブサイト分析ツールです。 Googleアナリティクスの代替
with-sentry	（公式） アプリケーション監視プラットフォーム

デスクトップアプリケーション関連	説明	app router
with-electron-typescript	デスクトップアプリケーションElectron application example with typescript
with-electron	デスクトップアプリケーションElectron application example

既存プロジェクトからの移行関連	説明	app router
custom-routes-proxying	（公式）このサンプルでは、Next.jsの新しいカスタムルート機能を使って、リクエストをアップストリームサーバーにプロキシする最も基本的な使用方法。pages/index.js、pages/about.js、pages/hello/[slug].jsの3つのページがあります。これらのページはすべてNext.jsと照合され、それ以外のパスはアップストリームサーバーにプロキシされます。このアプローチは、アプリケーションをインクリメンタルにNext.jsに移行しようとしているが、既存のアプリケーションにフォールバックする必要がある場合に非常に便利です。Next.jsアプリケーションにページを1つずつ追加し、移行していないページについては、移行できるようになるまでNext.jsが既存のアプリケーションにプロキシすることができます。

ブロックチェーン関連	説明	app router
(New)evm-multichain-dapp	EVMマルチチェーンDappsを構築するためのNext.jsパブリックテンプレートです。EVMとは、Ethereum Virtual Machineの略で、Ethereumプラットフォーム上でスマートコントラクトを実行するための仮想マシンです。EVMは、Solidityなどのスマートコントラクト言語で書かれたコードを実行し、Ethereumネットワーク上で分散アプリケーション（DApps）を実行するために使用されます。EVM multichain nextjs templateは、EVMマルチチェーンDAppsを構築するためのNext.jsパブリックテンプレートです。スマートコントラクトとは、ブロックチェーン上で自己実行可能なコードのことで、契約の自動化やトランザクションの実行など、様々な用途に使用されます。スマートコントラクトは、ブロックチェーン上で実行されるため、信頼性が高く、改ざんされることがないという特徴があります。Ethereumなどのブロックチェーンプラットフォームでは、スマートコントラクトを作成し、実行することができます。

その他	説明	app router
(New)reproduction-template-app-dir	Next.jsリポジトリのapp/ディレクトリのバグを報告するときに使うNext.jsテンプレートです。	app router
(New)with-react-ga4	カスタムAppコンポーネントを使用してreact-ga4を最も基本的な方法で使用しています。このサンプルをテストするために、utils / analytics.jsファイルでトラッキングIDを変更してください。2023年7月以降、react-gaは新しいデータの処理を停止するため、このサンプルはreact-ga4を使用するように更新されました。
(New)with-sfcc	Next.js、Salesforce commerce cloud、およびTailwindを使用してヘッドレスeコマースアプリケーションを作成する方法です。Salesforce Commerce Cloudは、オンラインストアの構築、管理、拡張を行うためのクラウドベースのeコマースプラットフォームです。Salesforce Commerce Cloudは、多くの機能を提供し、カスタマイズ可能であり、高度なセキュリティ機能を備えています。また、Salesforce Commerce Cloudは、マーケティング、販売、カスタマーサポートなどの機能を統合し、顧客体験を向上させることができます。Salesforce Commerce Cloudは、多くの企業で使用されており、高速で信頼性が高く、柔軟性があります。
markdoc	MarkdocはMarkdownベースの文書作成オーサリングフレームワークです。Markdownを使って柔軟かつ強力にドキュメントを作るライブラリです。
reproduction-template	Next.jsリポジトリのバグを報告する時に使用するテンプレートです。
with-ably	(無料、有料あり ) アプリケーションのあらゆるリアルタイム体験を簡単にパワーアップ。複雑なインフラストラクチャの管理やプロビジョニングは必要ありません。シンプルなAPIがすべてをリアルタイムに処理するので、あなたは自分のコードに集中することができます。
with-temporal	Temporalはオープンソースプラットフォームで、サービスやアプリケーションの正常な実行を保証します。
with-unsplash	Unsplashは世界各国のフォトグラファーによる20万点もの写真を保有するストックフォトサイトです。
with-mqtt-js	MQTT.jsは、node.jsおよびブラウザー用のJavaScriptで記述されたMQTTプロトコルのクライアントライブラリです。
with-next-seo	Next.jsでSEOを管理するのに役立つプラグインであるnext-seoを統合する方法です。
with-quill-js	powerfulrichtexteditor
with-react-toolbox	react-toolboxスタイルのモジュールを静的ファイルに抽出するためのコマンドラインツールで、ほぼすべてのスタックに統合できます。※リンク先で怪しい広告
with-slate	リッチテキストThisiseditablerichtext
with-stomp	Next.jsアプリケーション内でSTOMPを使用する方法。STOMPは、シンプルなテキスト指向のメッセージングプロトコルです。
with-why-did-you-render	Why-did-you-renderは、Reactにパッチを当てて、回避可能な再レンダリングについて通知します。(React Nativeでも動作します。) why-did-you-renderの簡単な使用方法。

削除、名前変更、非推奨、廃止、統合等	説明
blog-starter-typescript	廃止 blog-starterがTypeScriptを使用するようにリファクタリングしたのでこのサンプルは非推奨となりました。
cms-strapi	このサンプルは Strapi 公式デモアプリケーション strapi/nextjs-corporate-starter に移動しました。
custom-server-typescript	廃止 メインのカスタム サーバーのサンプルは TypeScript を使用するようにリファクタリングされているため、このサンプルは非推奨になりました。
page-transitions	廃止 with-next-page-transitions/に変更されました。
parameterized-routing	廃止 next.js/examples/dynamic-routingに変更されました。
with-aws-amplify-typescript	AWSAmplifyは、モバイルおよびフロントエンドのウェブデベロッパーがAWSを利用して安全でスケーラブルなフルスタックアプリケーションを構築できるようにするツールとサービスのセットです。
with-chakra-ui-typescript	廃止 next.js/examples/with-chakra-ui でTypeScript を使用するようにリファクタリングされたため、このサンプルは非推奨になります。
with-cookie-auth-fauna	廃止 このサンプルはnext.js/examples/with-faunaへ移動しました。
with-cookie-auth	廃止 次のサンプルを参考にしてください。next.js/examples/auth0 next.js/examples/with-passport next.js/examples/with-iron-session
with-dotenv	Next.js 9.4から環境変数の読み込みを自動的にサポートしています。
with-firebase-authentication-serverless	廃止 このサンプルは with-firebase-authenticationに変更されました。
with-glamorous	廃止 GlamorousはEmotionに置き換えられました。詳細については、paypal/glamorous#419を参照してください。EmotionのNext.jsのサンプル next.js/examples/with-emotion
with-global-stylesheet-simple	廃止 代わりにexamples/next-cssを使用してください。next.js/examples/next-css
with-global-stylesheet	廃止 代わりにexamples/next-cssを使用してください。next.js/examples/next-css
with-graphql-faunadb	このサンプルは next.js/examples/with-faunaへ移動しました。
with-markdown	廃止 Next.jsでMarkdownを使用する方法は、next.js/examples/blog-starter
with-mobx-react-lite	このサンプルはwith-mobxに移動しました。
with-mobx-state-tree-typescript	このサンプルはwith-mobx-state-treeに移動しました。
with-next-auth	このサンプルはnextauthjs/next-auth-exampleに移動しました。
with-next-css	廃止 このサンプルはnext.js/examples/next-cssへ移動しました。
with-next-offline	廃止 このサンプルの代わりにnext.js/examples/next-offlineを使用してください。
with-next-routes	Next.jsでは Dynamic routes がデフォルトでサポートされるようになりました。
with-now-env	Next.js 9.4から環境変数の読み込みを自動的にサポートしています。詳しくは環境変数のドキュメントをご覧ください。
with-pretty-url-routing	Dynamic routes はデフォルトでサポートされるようになりました。
with-redux-toolkit-typescript	このサンプルは、with-reduxへ移動しました。
with-redux-toolkit	このサンプルは、with-reduxへ移動しました。
with-sentry-simple	このサンプルは、next.js/examples/with-sentry に移動しました。
with-strict-csp-hash	このサンプルは next.js/examples/with-strict-csp に移動しました
with-styled-jsx-postcss	このサンプルは next.js/examples/with-styled-jsx-plugins に移動しました。
with-sw-precache	このサンプルよりも、next.js/examples/next-offline を使用してください。
with-typescript-styled-components	このサンプルはnext.js/examples/with-styled-components に移動しました。
with-universal-configuration-build-time	Next.js 9.4から環境変数の読み込みを自動的にサポートしています。
with-universal-configuration-runtime	Next.js 9.4から環境変数の読み込みを自動的にサポートしています。