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

# 更新履歴
[Next.js公式examples集を分類（2023年7月版）](https://qiita.com/masakinihirota/private/c4c8931d7067349006ef)
[Next.js公式examples集を分類（2022年7月版）](https://qiita.com/masakinihirota/items/99054b9f9cf428881617)
[**Next.js公式examples集を分類（2021年7月版）**](https://qiita.com/masakinihirota/items/60c687427b1092cf072d)
[Next.js公式examples集を分類（2021年1月版）](https://qiita.com/masakinihirota/items/bbe6c2e2f548fdce03dc)
[Next.js公式examples集を分類（2020年7月版）](https://qiita.com/masakinihirota/items/39888f37000f0d17111b)



# サンプルの場所
[Next.js公式リポジトリ](https://github.com/vercel/next.js)の[examples内ディレクトリ](https://github.com/vercel/next.js/tree/canary/examples)

# はじめに
Next.jsの[公式サンプル](https://github.com/vercel/next.js/tree/canary/examples)は[前回(2021年1月版)](https://qiita.com/masakinihirota/items/bbe6c2e2f548fdce03dc)から9本増えて合計277本あります。新たに追加されたサンプルには(new)がついています。（2021/07/03)
しかし、このままではどれを見たらいいのかわからないので主観で分類してみました。

（基礎) Next.jsで基礎的な内容を扱っているサンプル。
（公式） [公式ドキュメント](https://nextjs.org/docs/) で説明するのに使われているサンプル等。

※今回の更新で一番目についたのはblogとCMSです。
前回はDB関連を増やしたので、今回はCMS（コンテンツマネージメントシステム)を増やしたという所でしょうか。

## 備考欄の記号の解説
**S** ＝ 「Open in StackBlitz」ボタン： ワンクリックでサンプルの実行を準備できる。
**D** ＝ 「Deploy」ボタン： ワンクリックでVercelにデプロイが完了する。

>StackBlitzとは、
フルスタックアプリケーションを作成、編集、デプロイして
ローカル環境よりも高速なパッケージインストールと高いセキュリティで
フルバックアップのアプリケーションを作成、編集、デプロイすることができます。

「Open in StackBlitz」ボタンを押せば1－2分でサンプルの完成品が出来上がります。

# インストール方法

npx create-next-app [サンプル名] [アプリ名]
もしくは、
yarn create next-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`

### examples使用例
examplesを使用するならば `--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の後ろに-（ハイフン）がつかない。

## degitを使ってソースのみを取得したい（npx create-next-appをつかってインストールまではしなくていい場合）
https://qiita.com/masakinihirota/items/418eec4422fd06690924

## 参考
[create-next-app - npm](https://www.npmjs.com/package/create-next-app)
[Create Next App | Next.js](https://nextjs.org/docs/api-reference/create-next-app)

## Next.js 日本語翻訳プロジェクト（非公式）
Next.js のドキュメントを翻訳する非公式プロジェクトです。
Nextjs-ja-translation/Nextjs-ja-translation-docs: (Unofficial) Japanese transition of Next.js documentation
https://github.com/Nextjs-ja-translation/Nextjs-ja-translation-docs
※現在、活動頻度は低下しているようです。

## Next.js日本語マニュアル（非公式）
はじめに | Next.js
https://nextjs-ja-translation-docs.vercel.app/docs/getting-started

# [Next.js公式examples集](https://github.com/vercel/next.js/tree/canary/examples)

|Next.jsの入門 0 最初 |	説明	 | 	備考	 |
|---|---|---|
|	[hello-world](https://github.com/vercel/next.js/tree/canary/examples/hello-world "hello-world") 	|	（基礎)[（公式）](https://nextjs.org/docs/api-reference/next/link) Next.jsの基本中の基本	|	S D	|

|Next.jsの基礎 1 易しい |	説明	 | 	備考	 |
|---|---|---|
|	[basic-css](https://github.com/vercel/next.js/tree/canary/examples/basic-css "basic-css") 	|	（基礎)[（公式）](https://nextjs.org/docs/basic-features/built-in-css-support) CSS in JSを使っている、cssファイルを使った基本的なNext.jsでの装飾方法	|	S D	|
|	[basic-export](https://github.com/vercel/next.js/tree/canary/examples/basic-export "basic-export") 	|	（基礎) コマンドnext exportの勉強 	|	S D	|
|	[dynamic-routing](https://github.com/vercel/next.js/tree/canary/examples/dynamic-routing "dynamic-routing") 	|	（基礎)[（公式）](https://nextjs.org/docs/routing/introduction) 動的ルーティングの使用方法	|	S D	|
|	[environment-variables](https://github.com/vercel/next.js/tree/canary/examples/environment-variables "environment-variables") 	|	（基礎)[（公式）](https://nextjs.org/docs/basic-features/environment-variables) 環境変数の使い方	|	S D	|
|	[head-elements](https://github.com/vercel/next.js/tree/canary/examples/head-elements "head-elements") 	|	（基礎)[（公式）](https://nextjs.org/docs/api-reference/next/head) ヘッド要素の使用方法	|	S D	|
|	[layout-component](https://github.com/vercel/next.js/tree/canary/examples/layout-component "layout-component") 	|	（基礎)[（公式）](https://nextjs.org/docs/api-reference/next/head) 一般的な使用方法	|	S D	|
|	[nested-components](https://github.com/vercel/next.js/tree/canary/examples/nested-components "nested-components") 	|	（基礎) コンポーネントをネストして利用する使用方法	|	S D	|
|	[using-router](https://github.com/vercel/next.js/tree/canary/examples/using-router "using-router") 	|	（基礎)[（公式）](https://nextjs.org/docs/routing/imperatively) <Link>コンポーネントの代わりにnext/routerを使ってページをリンクする	|	S D	|
|	[with-app-layout](https://github.com/vercel/next.js/tree/canary/examples/with-app-layout "with-app-layout") 	|	（基礎)_app.jsを使用してすべてのページにグローバルレイアウトを実装する	|	S D	|
|	[with-loading](https://github.com/vercel/next.js/tree/canary/examples/with-loading "with-loading") 	|	（基礎)[（公式）](https://nextjs.org/docs/api-reference/next/router) ページ切替時に時間がかかる時、Loading画面を表示する技術	|	S D	|

|Next.jsの基礎 2 普通 |	説明	 | 	備考	 |
|---|---|---|
|	[active-class-name](https://github.com/vercel/next.js/tree/canary/examples/active-class-name "active-class-name") 	|	[（公式）](https://nextjs.org/docs/api-reference/next/link) Next独自のLinkを使ってclassNameでプロパティを設定する使用方法	|	S D	|
|	[api-routes](https://github.com/vercel/next.js/tree/canary/examples/api-routes "api-routes") 	|	[（公式）](https://nextjs.org/docs/api-routes/introduction) 基本的なAPIルートの使用方法	|	S D	|
|	[catch-all-routes](https://github.com/vercel/next.js/tree/canary/examples/catch-all-routes "catch-all-routes") 	|	[（公式）](https://nextjs.org/docs/routing/dynamic-routes) ページをデータから自動的に作成してくれる機能	|	S D	|
|	[data-fetch](https://github.com/vercel/next.js/tree/canary/examples/data-fetch "data-fetch") 	|	[（公式）]() サーバーとクライアントでデータをフェッチするのが非常に簡単になります。	|	S D	|
|	[fast-refresh-demo](https://github.com/vercel/next.js/tree/canary/examples/fast-refresh-demo "fast-refresh-demo") 	|	（基礎)[（公式）](https://nextjs.org/docs/basic-features/fast-refresh) 編集結果を即座に反映させる機能	|	S D	|
|	[gh-pages](https://github.com/vercel/next.js/tree/canary/examples/gh-pages "gh-pages") 	|	Nextの最も基本的なアイデアの使用方法	|	|
|	[progressive-render](https://github.com/vercel/next.js/tree/canary/examples/progressive-render "progressive-render") 	|	プログレッシブサーバーサイドレンダリングを実装するアプリの使用方法	|	S D	|
|	[redirects](https://github.com/vercel/next.js/tree/canary/examples/redirects "redirects") 	|	[（公式）](https://nextjs.org/docs/migrating/incremental-adoption) 受信したリクエストパスを別の宛先パスにリダイレクトする方法	|	S D	|
|	[rewrites](https://github.com/vercel/next.js/tree/canary/examples/rewrites "rewrites") 	|	[（公式）](https://nextjs.org/docs/migrating/incremental-adoption) 着信要求パスを別の宛先パスにマップする方法	|	S D	|
|	[ssr-caching](https://github.com/vercel/next.js/tree/canary/examples/ssr-caching "ssr-caching") 	|	[（公式）](https://nextjs.org/docs/advanced-features/custom-server) 一度SSRしたページをキャッシュして使用する使用方法	|	S D	|
|	[with-absolute-imports](https://github.com/vercel/next.js/tree/canary/examples/with-absolute-imports "with-absolute-imports") 	|	[（公式）](https://nextjs.org/docs/advanced-features/module-path-aliases) 絶対インポートを使用したアプリの使用方法	|	S D	|
|	[with-context-api](https://github.com/vercel/next.js/tree/canary/examples/with-context-api "with-context-api") 	|	アプリでreact context apiを使用する方法	|	S D	|
|	[with-dynamic-app-layout](https://github.com/vercel/next.js/tree/canary/examples/with-dynamic-app-layout "with-dynamic-app-layout") 	|	app.jsを使用してページの_dynamicレイアウトを実装する方法	|	S D	|
|	[with-dynamic-import](https://github.com/vercel/next.js/tree/canary/examples/with-dynamic-import "with-dynamic-import") 	|	[（公式）](https://nextjs.org/docs/advanced-features/dynamic-import) モジュールを動的にインポートする方法	|	S D	|
|	[with-env-from-next-config-js](https://github.com/vercel/next.js/tree/canary/examples/with-env-from-next-config-js "with-env-from-next-config-js") 	|	[（公式）](https://nextjs.org/docs/api-reference/next.config.js/environment-variables) next.config.jsを使って環境変数をビルド時に設定します。	|	S D	|
|	[with-http2](https://github.com/vercel/next.js/tree/canary/examples/with-http2 "with-http2") 	|	HTTP2サーバーを使った最も基本的な使用方法	|	|
|	[with-next-page-transitions](https://github.com/vercel/next.js/tree/canary/examples/with-next-page-transitions "with-next-page-transitions") 	|	ページ間移動時において読み込み状態を簡単に追加	|	S D	|
|	[with-portals-ssr](https://github.com/vercel/next.js/tree/canary/examples/with-portals-ssr "with-portals-ssr") 	|	[（React 公式) portal](https://ja.reactjs.org/docs/portals.html) ポータル (portal) は、親コンポーネントのDOM階層の外側に存在するDOMノードに子をレンダリングするファーストクラスの方法を提供します。	|	S D	|
|	[with-portals](https://github.com/vercel/next.js/tree/canary/examples/with-portals "with-portals" ) 	|	[（React 公式) portal](https://ja.reactjs.org/docs/portals.html) 	Next.jsでReactPortals機能を使用する方法	|	S D	|
|	[with-prefetching](https://github.com/vercel/next.js/tree/canary/examples/with-prefetching "with-prefetching") 	|	ページをプリフェッチ（事前読み込み)するサンプルアプリ	|	S D	|
|	[with-react-helmet](https://github.com/vercel/next.js/tree/canary/examples/with-react-helmet "with-react-helmet") 	|	next.jsとreact-helmetを組み合わせる方法の最小限の使用方法 ドキュメントヘッドへのすべての変更を管理します。	|	S D	|
|	[with-shallow-routing](https://github.com/vercel/next.js/tree/canary/examples/with-shallow-routing "with-shallow-routing") 	|	[（公式）](https://nextjs.org/docs/routing/shallow-routing) ShallowRoutingExample	|	S D	|
|	[with-static-export](https://github.com/vercel/next.js/tree/canary/examples/with-static-export "with-static-export") 	|	[（公式）](https://nextjs.org/docs/advanced-features/static-html-export) APIからデータをフェッチするNext.jsアプリケーションを静的HTMLファイルにエクスポートして、ページの動的リストを生成する方法	|	S	|
|	[with-typescript-eslint-jest](https://github.com/vercel/next.js/tree/canary/examples/with-typescript-eslint-jest "with-typescript-eslint-jest") 	|	NextJS Typescriptボイラープレート	|	S D	|
|	[with-typescript-types](https://github.com/vercel/next.js/tree/canary/examples/with-typescript-types "with-typescript-types") 	|	TypeScript型システムをNext.jsに統合する方法	|	S	|
|	[with-typescript](https://github.com/vercel/next.js/tree/canary/examples/with-typescript "with-typescript") 	|	[（公式）](https://nextjs.org/docs/basic-features/typescript) タイプスクリプトを使って型を適用	|	S D	|
|	[with-zones](https://github.com/vercel/next.js/tree/canary/examples/with-zones "with-zones") 	|	[（公式）](https://nextjs.org/docs/advanced-features/multi-zones) マルチゾーン機能を使用して、複数のアプリを1つのアプリとして使用できます。	|	S	|

|Next.jsの基礎 3 中級、上級 |	説明	 | 	備考	 |
|---|---|---|
|	[with-route-as-modal](https://github.com/vercel/next.js/tree/canary/examples/with-route-as-modal "with-route-as-modal") 	|		この例では、ルートに基づいてモーダルを条件付きで表示する方法を示しています。|	S D	|
|	[with-typescript-graphql](https://github.com/vercel/next.js/tree/canary/examples/with-typescript-graphql "with-typescript-graphql") 	|	GraphQLとtypescriptの使用方法	|	S D	|
|	[with-web-worker](https://github.com/vercel/next.js/tree/canary/examples/with-web-worker "with-web-worker") 	|	WebWorkerは、javascriptでマルチスレッド（複数の処理を同時に行う）を行うための仕組み。 worker-pluginを利用してWebWorkersでコードを実行する方法	|	S D	|
|	[with-webassembly](https://github.com/vercel/next.js/tree/canary/examples/with-webassembly "with-webassembly") 	|	WebAssemblyは、ブラウザでプログラムを高速実行するためにブラウザ上で動くバイナリコードの新しいフォーマット。WebAssemblyの使用方法	|	S	|

|Next.jsの基礎 2021年7月追加分 |	説明	 | 	備考	 |
|---|---|---|
|	[(New) headers](https://github.com/vercel/next.js/tree/canary/examples/headers "headers") 	|	[（公式）](https://nextjs.org/docs/api-reference/next.config.js/headers) Next.jsのヘッダーを使用して、カスタムHTTPヘッダーをNext.jsアプリに追加する方法。	|	S D	|
|	[(New) with-eslint](https://github.com/vercel/next.js/tree/canary/examples/with-eslint "with-eslint") 	|	Next.jsでデフォルトで使用可能になったESlintの使用方法	|	S D	|
|	[(New) with-vercel-fetch](https://github.com/vercel/next.js/tree/canary/examples/with-vercel-fetch "with-vercel-fetch") 	|	@vercel/fetch の使用方法	|	S D	|

|スターターキット関連 |	説明	 | 	備考	 |
|---|---|---|
|	[(New) blog](https://github.com/vercel/next.js/tree/canary/examples/blog "blog") 	|	ポートフォリオ スターターキット	|	S D	|
|	[(New) with-reflexjs](https://github.com/vercel/next.js/tree/canary/examples/with-reflexjs "with-reflexjs") 	|	Reflexjsはスタイルプロップ、カラーモード、テーマ、バリアントを備えた迅速なUI開発のためのライブラリ＋スターターキット、テーマ、ブロックでGatsbyやNext.jsのサイトを迅速に構築することができます。	|	S D	|

|blog関連 |	説明	 | 	備考	 |
|---|---|---|
|	[(New) blog-with-comment](https://github.com/vercel/next.js/tree/canary/examples/blog-with-comment "blog-with-comment") 	|	Upstash（サーバーレスRedis)（無料、有料)とAuth0（認証)（無料、有料)を使用してNext.jsブログアプリケーションにコメント機能を追加します。	|	[Demo](https://blog-with-comment.vercel.app/)	|
|	[blog-starter-typescript](https://github.com/vercel/next.js/tree/canary/examples/blog-starter-typescript "blog-starter-typescript") 	|	Next.js、Markdown、TypeScriptを使用して静的に生成されたブログの使用方法	|	S D	|
|	[blog-starter](https://github.com/vercel/next.js/tree/canary/examples/blog-starter "blog-starter") 	|	[（公式）](https://nextjs.org/docs/basic-features/pages) Next.jsとMarkdownを使用して静的に生成されたブログの使用方法	|	[Demo](https://next-blog-starter.vercel.app/)  S D	|

|CMS関連 |	説明	 | 	備考	 |
|---|---|---|
|	[(New) cms-drupal](https://github.com/vercel/next.js/tree/canary/examples/cms-drupal "cms-drupal") 	|	Next.jsとDrupal（オープンソースのCMS)を使用して静的に生成するブログの使用方法	|	[Demo](https://cms-drupal.vercel.app) D	|
|	[(New) cms-ghost](https://github.com/vercel/next.js/tree/canary/examples/cms-ghost "cms-ghost") 	|	Next.jsとGhost（コンテンツ、ニュースレター、メンバー、支払い機能)（有料)を使用して静的に生成するブログの使用方法	|	D	|
|	[(New) cms-prepr](https://github.com/vercel/next.js/tree/canary/examples/cms-prepr "cms-prepr") 	|	[（公式）](https://nextjs.org/docs/basic-features/pages) Next.jsとPreprを使用して静的に生成するブログの使用方法	|	[Demo](https://next-blog-prepr.now.sh/)  D	|
|	[cms-agilitycms](https://github.com/vercel/next.js/tree/canary/examples/cms-agilitycms "cms-agilitycms") 	|	[（公式）](https://nextjs.org/docs/basic-features/pages) AgilityCMS	|	[Demo](https://next-blog-agilitycms.vercel.app/)  D	|
|	[cms-buttercms](https://github.com/vercel/next.js/tree/canary/examples/cms-buttercms "cms-buttercms") 	|	[（公式）](https://nextjs.org/docs/basic-features/pages) ButterCMS	|	[Demo](https://next-blog-buttercms.vercel.app/) D 	|
|	[cms-contentful](https://github.com/vercel/next.js/tree/canary/examples/cms-contentful "cms-contentful") 	|	[（公式）](https://nextjs.org/docs/basic-features/pages) Contentful	|	[Demo](https://next-blog-contentful.vercel.app/) D 	|
|	[cms-cosmic](https://github.com/vercel/next.js/tree/canary/examples/cms-cosmic "cms-cosmic") 	|	[（公式）](https://nextjs.org/docs/basic-features/pages) Cosmic	|	[Demo](https://cosmic-next-blog.vercel.app/) D	|
|	[cms-datocms](https://github.com/vercel/next.js/tree/canary/examples/cms-datocms "cms-datocms") 	|	[（公式）](https://nextjs.org/docs/basic-features/pages) DatoCMS	|	[Demo](https://next-blog-datocms.vercel.app/) D 	|
|	[cms-graphcms](https://github.com/vercel/next.js/tree/canary/examples/cms-graphcms "cms-graphcms") 	|	[（公式）](https://nextjs.org/docs/basic-features/pages) GraphCMS	|	[Demo](https://next-blog-graphcms.vercel.app/) D 	|
|	[cms-kontent](https://github.com/vercel/next.js/tree/canary/examples/cms-kontent "cms-kontent") 	|	[（公式）](https://nextjs.org/docs/basic-features/pages) Kontentを使用した静的ブログの作成例	|	[Demo](https://next-blog-kontent.vercel.app/) D 	|
|	[cms-prismic](https://github.com/vercel/next.js/tree/canary/examples/cms-prismic "cms-prismic") 	|	[（公式）](https://nextjs.org/docs/basic-features/pages) Prismic	|	[Demo](https://next-blog-prismic.vercel.app/) D 	|
|	[cms-sanity](https://github.com/vercel/next.js/tree/canary/examples/cms-sanity "cms-sanity") 	|	[（公式）](https://nextjs.org/docs/basic-features/pages) Sanity	|	[Demo](https://next-blog-sanity.vercel.app/) D 	|
|	[cms-storyblok](https://github.com/vercel/next.js/tree/canary/examples/cms-storyblok "cms-storyblok") 	|	[（公式）](https://nextjs.org/docs/basic-features/pages) Storyblok	|	[Demo](https://next-blog-storyblok.vercel.app/) D 	|
|	[cms-strapi](https://github.com/vercel/next.js/tree/canary/examples/cms-strapi "cms-strapi") 	|	[（公式）](https://nextjs.org/docs/basic-features/pages) Strapi	|	[Demo](https://next-blog-strapi.vercel.app/) D 	|
|	[cms-takeshape](https://github.com/vercel/next.js/tree/canary/examples/cms-takeshape "cms-takeshape") 	|	[（公式）](https://nextjs.org/docs/basic-features/pages) TakeShape	|	[Demo](https://next-blog-takeshape.vercel.app/) D 	|
|	[cms-wordpress](https://github.com/vercel/next.js/tree/canary/examples/cms-wordpress "cms-wordpress") 	|	[（公式）](https://nextjs.org/docs/basic-features/pages) WordPress	|	[Demo](https://next-blog-wordpress.vercel.app) D 	|
|	[with-netlify-cms](https://github.com/vercel/next.js/tree/canary/examples/with-netlify-cms "with-netlify-cms") 	|	Gitワークフロー用のオープンソースのコンテンツ管理システム	|	S	|

|CSS関連 Chakra UI編 |	説明	 | 	備考	 |
|---|---|---|
|	[with-chakra-ui-typescript](https://github.com/vercel/next.js/tree/canary/examples/with-chakra-ui-typescript "with-chakra-ui-typescript") 	|	chakra-uiとTypescriptを使用したアプリの使用方法	|	S D	|
|	[with-chakra-ui](https://github.com/vercel/next.js/tree/canary/examples/with-chakra-ui "with-chakra-ui") 	|	tailwind CSSに非常によく似たCSSです。 なのでtailwind CSSとよく比較されます。プロトタイプ（試作品）を作る場合等にオススメです。tailwindCSSの特徴を持ち更に簡易化しています、デフォルトで簡易なコンポーネント（ボタンやフォーム）を提供しているのでプロトタイプの製作が簡単です。しかしその分tailwindCSSと比べ自由度は低いです。 中身は CSS-in-JSのemotionをtailwind CSS風にしています。	|	S D	|

|CSS関連 tailwind CSS編 |	説明	 | 	備考	 |
|---|---|---|
|	[with-tailwindcss-emotion](https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss-emotion "with-tailwindcss-emotion") 	|	[（公式）](https://nextjs.org/docs/basic-features/built-in-css-support) emotion(CSS-in-JS)を使用しているプロジェクトにtailwindcssを追加する場合の例。 	|	D	|
|	[with-tailwindcss](https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss "with-tailwindcss") 	|	[（公式）](https://nextjs.org/docs/basic-features/built-in-css-support) 完全なユーティリティファーストなCSS 次世代型のCSSとして注目されています。 Chakra UIとは違い他のCSS-in-JSに依拠していません。 Chakra UIとよく比較されます。装飾に関してはフルカスタマイズできます。自由度は高いですがデフォルトなコンポーネント（ボタンやフォーム）は提供していません。|	S D	|

|CSS関連 CSS-in-JS styled-jsx編 |	説明	 | 	備考	 |
|---|---|---|
|	[with-styled-jsx-plugins](https://github.com/vercel/next.js/tree/canary/examples/with-styled-jsx-plugins "with-styled-jsx-plugins") 	|	CSS styled-jsxプラグインを使用 	|	D	|
|	[with-styled-jsx-scss](https://github.com/vercel/next.js/tree/canary/examples/with-styled-jsx-scss "with-styled-jsx-scss") 	|	PostCSS、SASS（SCSS)、LESS、またはstyled-jsxを備えたその他のプリプロセッサを使用できます。	|	S D	|
|	[with-styled-jsx](https://github.com/vercel/next.js/tree/canary/examples/with-styled-jsx "with-styled-jsx") 	|	[（公式）](https://nextjs.org/docs/basic-features/built-in-css-support)styled-jsxの使用方法	|	S D	|

|CSS関連 CSS-in-JS emotion編 |	説明	 | 	備考	 |
|---|---|---|
|	[(New) with-emotion-vanilla](https://github.com/vercel/next.js/tree/canary/examples/with-emotion-vanilla "with-emotion-vanilla") 	|	emotionの基本的な使用方法 emotion（TypeScriptと相性の良い後発のCSS-in-Jsライブラリ)	|	S D	|
|	[with-emotion](https://github.com/vercel/next.js/tree/canary/examples/with-emotion "with-emotion") 	|	[（公式）](https://nextjs.org/docs/basic-features/built-in-css-support)CSS in JS SSR中にサーバーデータを直接Next.jsページに渡す	|	S D	|

|CSS関連 CSS-in-JS その他 |	説明	 | 	備考	 |
|---|---|---|
|	[(New) with-compiled-css](https://github.com/vercel/next.js/tree/canary/examples/with-compiled-css "with-compiled-css") 	|	styled-jsxの代わりにコンパイル済みをビルド時の CSS-in-JS スタイリング ソリューションとして使用する方法	|	S D	|
|	[with-aphrodite](https://github.com/vercel/next.js/tree/canary/examples/with-aphrodite "with-aphrodite") 	|	[（公式）](https://nextjs.org/docs/basic-features/built-in-css-support) CSS in JS aphroditeを使用したアプリの使用方法	|	S D	|
|	[with-cxs](https://github.com/vercel/next.js/tree/canary/examples/with-cxs "with-cxs") 	|	[（公式）](https://nextjs.org/docs/basic-features/built-in-css-support)CSS in JS minimal CSS in JS cxsを使用したアプリの使用方法	|	S D	|
|	[with-filbert](https://github.com/vercel/next.js/tree/canary/examples/with-filbert "with-filbert") 	|	CSS in JS ソリューション（フレームワーク)filbert-jsでNext.jsを使用する	|	S D	|
|	[with-goober](https://github.com/vercel/next.js/tree/canary/examples/with-goober "with-goober") 	|	小さなcss-in-js	|	S D	|
|	[with-linaria](https://github.com/vercel/next.js/tree/canary/examples/with-linaria "with-linaria") 	|	[（公式）](https://nextjs.org/docs/basic-features/built-in-css-support)CSS linariaを使用したアプリの使用方法	|	S D	|
|	[with-react-with-styles](https://github.com/vercel/next.js/tree/canary/examples/with-react-with-styles "with-react-with-styles") 	|	CSS in JS	|	S D	|
|	[with-stitches](https://github.com/vercel/next.js/tree/canary/examples/with-stitches "with-stitches") 	|	限りなくゼロに近いランタイム、SSR、マルチバリアントのサポート、そしてクラス最高のデベロッパーエクスペリエンスを備えたCSS-in-JS。	|	S D	|
|	[with-styled-components-rtl](https://github.com/vercel/next.js/tree/canary/examples/with-styled-components-rtl "with-styled-components-rtl") 	|	CSS in JS 右から左にすると、サイト内のすべての要素を「反転」して、右から左に読む文化（たとえば、アラビア語)のニーズに合わせることができます。	|	S D	|
|	[with-styled-components](https://github.com/vercel/next.js/tree/canary/examples/with-styled-components "with-styled-components") 	|	[（公式）](https://nextjs.org/docs/basic-features/built-in-css-support) CSS in JS CSSstyled-components	|	S D	|
|	[with-styletron](https://github.com/vercel/next.js/tree/canary/examples/with-styletron "with-styletron") 	|	[（公式）](https://nextjs.org/docs/basic-features/built-in-css-support) CSS in JS スタイルソリューション	|	S D	|

|CSS関連 フレームワーク |	説明	 | 	備考	 |
|---|---|---|
|	[with-rbx-bulma-pro](https://github.com/vercel/next.js/tree/canary/examples/with-rbx-bulma-pro "with-rbx-bulma-pro") 	|	Bulma is simply a collection of CSSclasses.	|	S D	|
|	[with-react-bootstrap](https://github.com/vercel/next.js/tree/canary/examples/with-react-bootstrap "with-react-bootstrap") 	|	react-bootstrap react用に再構築されたbootstrap	|	S D	|
|	[with-reactstrap](https://github.com/vercel/next.js/tree/canary/examples/with-reactstrap "with-reactstrap") 	|	reactstrapの使用方法 reactstrapはBootstrapのコンポーネントです。	|	S D	|

|CSS関連 その他 |	説明	 | 	備考	 |
|---|---|---|
|	[with-fela](https://github.com/vercel/next.js/tree/canary/examples/with-fela "with-fela") 	|	[（公式）](https://nextjs.org/docs/basic-features/built-in-css-support) CSS in JS 	|	S D	|
|	[with-next-css](https://github.com/vercel/next.js/tree/canary/examples/with-next-css "with-next-css") 	|	Next.jsにビルトインされているCSS CSSモジュールサポートの使用方法	|	S D	|
|	[with-next-sass](https://github.com/vercel/next.js/tree/canary/examples/with-next-sass "with-next-sass") 	|	Sass/Scssモジュールサポートの使用方法	|	S D	|
|	[with-react-jss](https://github.com/vercel/next.js/tree/canary/examples/with-react-jss "with-react-jss") 	|	React-JSSは、新しいHooks APIを使ってJSSをReactに統合します。JSSとデフォルトのプリセットがすでに組み込まれています。	|	S D	|
|	[with-react-md-typescript](https://github.com/vercel/next.js/tree/canary/examples/with-react-md-typescript "with-react-md-typescript") 	|	マテリアルデザインをScssで使用する方法	|	S D	|
|	[with-react-md](https://github.com/vercel/next.js/tree/canary/examples/with-react-md "with-react-md") 	|	マテリアルデザインをScssで使用する方法	|	S D	|

|UI関連 |	説明	 | 	備考	 |
|---|---|---|
|	[using-preact](https://github.com/vercel/next.js/tree/canary/examples/using-preact "using-preact") 	|	高速で小型のReactと言われるpreactを使用する例	|	S	|
|	[with-ant-design](https://github.com/vercel/next.js/tree/canary/examples/with-ant-design "with-ant-design") 	|	Ant Design of ReactとともにNext.jsを使用する方法	|	S D	|
|	[with-atlaskit](https://github.com/vercel/next.js/tree/canary/examples/with-atlaskit "with-atlaskit") 	|	Atlaskit of ReactとともにNext.jsを使用する方法AltassianのオフィシャルUIライブラリ	|	S	|
|	[with-cerebral](https://github.com/vercel/next.js/tree/canary/examples/with-cerebral "with-cerebral") 	|	一般的なJavaScriptフレームワーク用の宣言型の状態および副作用管理ソリューション	|	S D	|
|	[with-grommet](https://github.com/vercel/next.js/tree/canary/examples/with-grommet "with-grommet") 	|	Grommet UI library	|	S D	|
|	[with-ionic-typescript](https://github.com/vercel/next.js/tree/canary/examples/with-ionic-typescript "with-ionic-typescript") 	|	オープンソースのモバイル＆ディスクトップUIツールキットの使用方法	|	S D	|
|	[with-mdbreact](https://github.com/vercel/next.js/tree/canary/examples/with-mdbreact "with-mdbreact") 	|	React Bootstrap UIキット	|	S D	|
|	[with-patternfly](https://github.com/vercel/next.js/tree/canary/examples/with-patternfly "with-patternfly") 	|	RedHatが作っているUIフレームワークUIパターン集	|	S D	|
|	[with-rebass](https://github.com/vercel/next.js/tree/canary/examples/with-rebass "with-rebass") 	|	UIコンポーネントRebassはReactのブートストラップです。	|	S D	|
|	[with-semantic-ui](https://github.com/vercel/next.js/tree/canary/examples/with-semantic-ui "with-semantic-ui") 	|	CSSフレームワーク Semantic UI Reactと一緒にNext.jsを利用する方法 	|	S D	|

|React Native関連 |	説明	 | 	備考	 |
|---|---|---|
|	[with-expo-typescript](https://github.com/vercel/next.js/tree/canary/examples/with-expo-typescript "with-expo-typescript") 	|	Next.js、Expo、およびTypeScriptを使用してユニバーサルReactアプリを作成するためのスタータープロジェクトです。	|	D	|
|	[with-expo](https://github.com/vercel/next.js/tree/canary/examples/with-expo "with-expo") 	|	ExpoはReact Native のツールキットで、 React Native をより簡単に扱うことができます。	|	D	|
|	[with-react-native-web](https://github.com/vercel/next.js/tree/canary/examples/with-react-native-web "with-react-native-web") 	|	react-native-webを使用して、プラットフォームに依存しないReactNativeのコンポーネントとAPIをWebに取り込む方法	|	S D	|

|コンポーネント関連 storybook編 |	説明	 | 	備考	 |
|---|---|---|
|	[with-storybook-styled-jsx-scss](https://github.com/vercel/next.js/tree/canary/examples/with-storybook-styled-jsx-scss "with-storybook-styled-jsx-scss") 	|	Storybookの使用方法 Styled-jsx (with SCSS) 	|	S D	|
|	[with-storybook](https://github.com/vercel/next.js/tree/canary/examples/with-storybook "with-storybook") 	|	UIコンポーネントを開発するためのオープンソースツール	|	S D	|

|コンポーネント関連 その他 |	説明	 | 	備考	 |
|---|---|---|
|	[with-carbon-components](https://github.com/vercel/next.js/tree/canary/examples/with-carbon-components "with-carbon-components") 	|	IBM's carbon-components-react	|	D	|
|	[with-orbit-components](https://github.com/vercel/next.js/tree/canary/examples/with-orbit-components "with-orbit-components") 	|	Orbitは、Kiwi.comの特定のニーズに合わせて作成されたオープンソースのデザインシステムで、旅行プロジェクトのニーズにも対応しています。	|	S D	|
|	[with-paste-typescript](https://github.com/vercel/next.js/tree/canary/examples/with-paste-typescript "with-paste-typescript") 	|	コンポーネントライブラリ	|	S D	|
|	[with-react-multi-carousel](https://github.com/vercel/next.js/tree/canary/examples/with-react-multi-carousel "with-react-multi-carousel") 	|	react-multi-carouselは、複数のアイテムとSSR(Server-side Rendering)をサポートするReactカルーセルコンポーネントです。	|	S D	|
|	[with-stencil](https://github.com/vercel/next.js/tree/canary/examples/with-stencil "with-stencil") 	|	ステンシルは、Webコンポーネント（より具体的にはカスタム要素)を生成するコンパイラです。ステンシルは、最も人気のあるフレームワークの最高の概念をシンプルなビルドタイムツールに組み合わせています。	|	D	|
|	[with-typestyle](https://github.com/vercel/next.js/tree/canary/examples/with-typestyle "with-typestyle") 	|	CSSスタイルソリューションを使用する方法	|	S D	|

|React Hooks関連 |	説明	 | 	備考	 |
|---|---|---|
|	[(New) with-react-hook-form](https://github.com/vercel/next.js/tree/canary/examples/with-react-hook-form "with-react-hook-form") 	|	Form処理 react-hook-formの使用方法	|	S D	|

|状態管理redux関連 |	説明	 | 	備考	 |
|---|---|---|
|	[(New) with-redux-toolkit-typescript](https://github.com/vercel/next.js/tree/canary/examples/with-redux-toolkit-typescript "with-redux-toolkit-typescript") 	|	TypeScriptでNext.jsとRedux Toolkitを統合する方法	|	D	|
|	[with-redux-code-splitting](https://github.com/vercel/next.js/tree/canary/examples/with-redux-code-splitting "with-redux-code-splitting") 	|	Redux関連	|	S D	|
|	[with-redux-observable](https://github.com/vercel/next.js/tree/canary/examples/with-redux-observable "with-redux-observable") 	|	Redux関連	|	S D	|
|	[with-redux-persist](https://github.com/vercel/next.js/tree/canary/examples/with-redux-persist "with-redux-persist") 	|	Redux関連	|	S D	|
|	[with-redux-saga](https://github.com/vercel/next.js/tree/canary/examples/with-redux-saga "with-redux-saga") 	|	Redux関連	|	S D	|
|	[with-redux-thunk](https://github.com/vercel/next.js/tree/canary/examples/with-redux-thunk "with-redux-thunk") 	|	Redux関連	|	S D	|
|	[with-redux-toolkit](https://github.com/vercel/next.js/tree/canary/examples/with-redux-toolkit "with-redux-toolkit") 	|	Redux関連	|	D	|
|	[with-redux-wrapper](https://github.com/vercel/next.js/tree/canary/examples/with-redux-wrapper "with-redux-wrapper") 	|	Redux関連	|	D	|
|	[with-redux](https://github.com/vercel/next.js/tree/canary/examples/with-redux "with-redux") 	|	Redux関連	|	S D	|
|	[with-rematch](https://github.com/vercel/next.js/tree/canary/examples/with-rematch "with-rematch") 	|	rematchはreduxを利用したユーティリティなので、store.jsやwithRematchなどの要素はwith-reduxの例と非常によく似ています。もしreduxがNext.jsとどのように統合されているか知らない場合は、with-reduxの例を先に見てください。RematchはReduxの拡張機能なので、多くの要素は同じです。|	S D	|
|	[with-zustand](https://github.com/vercel/next.js/tree/canary/examples/with-zustand "with-zustand") 	|	ZustandはFluxとReduxの流れを汲む React 向け軽量ステート管理ライブラリ	|	S D	|

|状態管理mobx関連 |	説明	 | 	備考	 |
|---|---|---|
|	[with-mobx-react-lite](https://github.com/vercel/next.js/tree/canary/examples/with-mobx-react-lite "with-mobx-react-lite") 	|	状態管理	|	S D	|
|	[with-mobx-state-tree-typescript](https://github.com/vercel/next.js/tree/canary/examples/with-mobx-state-tree-typescript "with-mobx-state-tree-typescript") 	|	状態管理	|	S D	|
|	[with-mobx-state-tree](https://github.com/vercel/next.js/tree/canary/examples/with-mobx-state-tree "with-mobx-state-tree") 	|	状態管理	|	S D	|
|	[with-mobx](https://github.com/vercel/next.js/tree/canary/examples/with-mobx "with-mobx") 	|	MobXは、機能的反応プログラミング（TFRP)を透過的に適用することで、状態管理をシンプルかつスケーラブルにする、実戦的ライブラリ	|	S D	|

|状態管理その他 |	説明	 | 	備考	 |
|---|---|---|
|	[with-kea](https://github.com/vercel/next.js/tree/canary/examples/with-kea "with-kea") 	|	状態管理フレームワーク	|	S D	|
|	[with-overmind](https://github.com/vercel/next.js/tree/canary/examples/with-overmind "with-overmind") 	|	状態管理 Overmindは、状態管理のオーケストレーションを最小限に抑え、開発だけに集中できるような開発環境を目指している	|	S D	|
|	[with-recoil](https://github.com/vercel/next.js/tree/canary/examples/with-recoil "with-recoil") 	|	状態管理 Recoilは Facebookによって提唱された状態管理ライブラリ	|	S D	|
|	[with-reflux](https://github.com/vercel/next.js/tree/canary/examples/with-reflux "with-reflux") 	|	[React公式](https://reactjs.org/blog/2014/05/06/flux.html) 一方向のデータフローを持つアプリケーションストアの管理にrefluxを使用する方法	|	S D	|
|	[with-unstated](https://github.com/vercel/next.js/tree/canary/examples/with-unstated "with-unstated") 	|	unstated-nextReact状態管理ライブラリ	|	S D	|

|国際化 |	説明	 | 	備考	 |
|---|---|---|
|	[(New) with-i18n-next-intl](https://github.com/vercel/next.js/tree/canary/examples/with-i18n-next-intl "with-i18n-next-intl") 	|	国際化 next-intl の使用方法 Next.jsの国際化されたルーティング機能を補完	|	S D	|
|	[i18n-routing](https://github.com/vercel/next.js/tree/canary/examples/i18n-routing "i18n-routing") 	|	[（公式）](https://nextjs.org/docs/advanced-features/i18n-routing) 国際化されたルーティング	|	S D	|
|	[with-i18n-rosetta](https://github.com/vercel/next.js/tree/canary/examples/with-i18n-rosetta "with-i18n-rosetta") 	|	汎用国際化ライブラリ	|	S D	|
|	[with-lingui](https://github.com/vercel/next.js/tree/canary/examples/with-lingui "with-lingui") 	|	LinguiJS-JavaScriptでのシームレスな国際化	|	S D	|
|	[with-next-i18next](https://github.com/vercel/next.js/tree/canary/examples/with-next-i18next "with-next-i18next") 	|	i18nextに基づく国際化をnext.jsアプリケーションに追加する最も簡単な方法	|	[Learn more on next-i18next](https://github.com/isaachinman/next-i18next/tree/master/examples/simple)	|
|	[with-next-translate](https://github.com/vercel/next.js/tree/canary/examples/with-next-translate "with-next-translate") 	|	next-translate Next.jsページを翻訳するためのツールです。	|	S D	|
|	[with-react-intl](https://github.com/vercel/next.js/tree/canary/examples/with-react-intl "with-react-intl") 	|	FormatJSクライアントとサーバーでWebアプリを国際化します。	|	|

|amp関連 |	説明	 | 	備考	 |
|---|---|---|
|	[amp-first](https://github.com/vercel/next.js/tree/canary/examples/amp-first "amp-first") 	|	AMPファーストサイトのボイラープレートを設定	|	D	|
|	[amp-story](https://github.com/vercel/next.js/tree/canary/examples/amp-story "amp-story") 	|	Next.jsとAMP機能を使用してamp-storyを含むAMPページを作成する方法	|	D	|
|	[amp](https://github.com/vercel/next.js/tree/canary/examples/amp "amp") 	|	[（公式）](https://nextjs.org/docs/api-reference/next/amp) Next.jsとAMP機能を使用してAMPページを作成する方法。AMP(Accelerated Mobile Pages) とは、モバイルページを高速に表示させるための手法のこと（Webコンポーネントフレームワーク)	|	D	|

|pwa関連 |	説明	 | 	備考	 |
|---|---|---|
|	[progressive-web-app](https://github.com/vercel/next.js/tree/canary/examples/progressive-web-app "progressive-web-app") 	|	next-pwaを利用した PWA（プログレッシブウェブアプリ)の使用方法	|	D	|

|画像関連 |	説明	 | 	備考	 |
|---|---|---|
|	[image-component](https://github.com/vercel/next.js/tree/canary/examples/image-component "image-component") 	|	[（公式）](https://nextjs.org/docs/basic-features/image-optimization) 画像コンポーネントを使用して最適化されたレスポンシブ画像を提供する方法	|	[Demo](https://image-component.nextjs.gallery/) S D 	|
|	[svg-components](https://github.com/vercel/next.js/tree/canary/examples/svg-components "svg-components") 	|	.babelrcを使用して、.svgファイルをインポートし、それらをReactコンポーネントとしてレンダリングするためのサポートを追加します。	|	S D	|
|	[with-three-js](https://github.com/vercel/next.js/tree/canary/examples/with-three-js "with-three-js") 	|	threejsはWebGL レンダラを持つ軽量な 3D ライブラリ。このライブラリには Canvas 2D、SVG、CSS3Dのレンダラーも用意されています。	|	S D	|

|検索関連 |	説明	 | 	備考	 |
|---|---|---|
|	[with-algolia-react-instantsearch](https://github.com/vercel/next.js/tree/canary/examples/with-algolia-react-instantsearch "with-algolia-react-instantsearch") 	|	検索の実装と検索の分析	|	|

|リッチテキスト関連 |	説明	 | 	備考	 |
|---|---|---|
|	[with-draft-js](https://github.com/vercel/next.js/tree/canary/examples/with-draft-js "with-draft-js") 	|	RichTextEditorFrameworkforReact	|	S D	|

|アニメーション関連 |	説明	 | 	備考	 |
|---|---|---|
|	[with-framer-motion](https://github.com/vercel/next.js/tree/canary/examples/with-framer-motion "with-framer-motion") 	|	motionはオープンソースで本番環境に対応したモーションWeb上のReact用のライブラリ	|	S D	|
|	[with-gsap](https://github.com/vercel/next.js/tree/canary/examples/with-gsap "with-gsap") 	|	アニメーションライブラリとしてGSAPを使用する方法	|	S D	|

|動画関連 |	説明	 | 	備考	 |
|---|---|---|
|	[with-hls-js](https://github.com/vercel/next.js/tree/canary/examples/with-hls-js "with-hls-js") 	|	HTTPライブストリーミングクライアントを実装するJavaScriptライブラリです。	|	S D	|
|	[with-mux-video](https://github.com/vercel/next.js/tree/canary/examples/with-mux-video "with-mux-video") 	|	この使用方法では、APIファーストのビデオプラットフォームであるMuxVideoを使用しています。この使用方法では、Next.jsアプリケーションでのビデオのアップロードと再生を取り上げています。	|	[Demo](https://with-mux-video.vercel.app/) D 	|
|	[with-videojs](https://github.com/vercel/next.js/tree/canary/examples/with-videojs "with-videojs") 	|	デフォルトのスタイルの処理を含む、Video.jsとともにNext.jsを使用する方法	|	S D	|

|サイトマップ関連 |	説明	 | 	備考	 |
|---|---|---|
|	[with-next-sitemap](https://github.com/vercel/next.js/tree/canary/examples/with-next-sitemap "with-next-sitemap") 	|	next-sitemapを使用してサイトマップを作成します。	|	S D	|
|	[with-sitemap](https://github.com/vercel/next.js/tree/canary/examples/with-sitemap "with-sitemap") 	|	sitemap.xmlファイルを生成する方法	|	S D	|

|mdx関連 |	説明	 | 	備考	 |
|---|---|---|
|	[with-mdx-remote](https://github.com/vercel/next.js/tree/canary/examples/with-mdx-remote "with-mdx-remote") 	|	next-mdx-remoteライブラリを使用して簡単なブログを構築する方法	|	D	|
|	[with-mdx](https://github.com/vercel/next.js/tree/canary/examples/with-mdx "with-mdx") 	|	MDXとはMarkdownドキュメントにJSXをシームレスに記述することができる。 next.jsアプリのトップレベルページとしてMDXを使用する方法	|	S D	|

|altJs関連 Reason編 |	説明	 | 	備考	 |
|---|---|---|
|	[with-reasonml-todo](https://github.com/vercel/next.js/tree/canary/examples/with-reasonml-todo "with-reasonml-todo") 	|	Reasonは、JavaScriptとOCamlのエコシステムを活用した、シンプルで高速かつタイプセーフなコード。 ReasonMLおよびReasonReactコンポーネントを使用したサンプルアプリ	|	D	|
|	[with-reasonml](https://github.com/vercel/next.js/tree/canary/examples/with-reasonml "with-reasonml") 	|	Reasonは、OCamlの強力な型システムを採用したプログラミング言語で、JavaScriptやC系言語から来た人にも親しみやすい構文になっています。 ReasonMLおよびReasonReactコンポーネントを使用したサンプルアプリ	|	D	|

|決済代行システム関連 |	説明	 | 	備考	 |
|---|---|---|
|	[with-stripe-typescript](https://github.com/vercel/next.js/tree/canary/examples/with-stripe-typescript "with-stripe-typescript") 	|	TypeScriptとreact-stripe-jsでStripeを使用した使用方法。 Stripe はインターネットビジネスのための決済プラットフォームです。	|	[Demo](https://nextjs-typescript-react-stripe-js.vercel.app/) D 	|

| バックエンドサービス関連 AWS編 |	説明	 | 	備考	 |
|---|---|---|
|	[with-aws-amplify-typescript](https://github.com/vercel/next.js/tree/canary/examples/with-aws-amplify-typescript "with-aws-amplify-typescript") 	|	AWSAmplifyは、モバイルおよびフロントエンドのウェブデベロッパーがAWSを利用して安全でスケーラブルなフルスタックアプリケーションを構築できるようにするツールとサービスのセットです。	|	[DEPLOY TO AMPLIFY CONSOLE](https://console.aws.amazon.com/amplify/home#/deploy?repo=https://github.com/vercel/next.js/tree/canary/examples/with-aws-amplify-typescript)	|
|	[with-aws-amplify](https://github.com/vercel/next.js/tree/canary/examples/with-aws-amplify "with-aws-amplify") 	|	AWSAmplifyは、モバイルおよびフロントエンドのウェブデベロッパーがAWSを利用して安全でスケーラブルなフルスタックアプリケーションを構築できるようにするツールとサービスのセットです。	|	[DEPLOY TO AMPLIFY CONSOLE](https://console.aws.amazon.com/amplify/home#/deploy?repo=https://github.com/vercel/next.js/tree/canary/examples/with-aws-amplify) 	|

| バックエンドサービス関連 Firebase編 |	説明	 | 	備考	 |
|---|---|---|
|	[with-firebase-authentication](https://github.com/vercel/next.js/tree/canary/examples/with-firebase-authentication "with-firebase-authentication") 	|	[（公式）](https://nextjs.org/docs/authentication)（認証)サーバーレスAPIを使用したFirebase認証の使用方法	|	[official example](https://github.com/gladly-team/next-firebase-auth/tree/main/example)	|
|	[with-firebase-cloud-messaging](https://github.com/vercel/next.js/tree/canary/examples/with-firebase-cloud-messaging "with-firebase-cloud-messaging") 	|	FirebaseCloudMessagingの使用方法	|	|
|	[with-firebase-hosting](https://github.com/vercel/next.js/tree/canary/examples/with-firebase-hosting "with-firebase-hosting") 	|	Firebaseホスティングの使用方法	|	|
|	[with-firebase](https://github.com/vercel/next.js/tree/canary/examples/with-firebase "with-firebase") 	|	クライアントサイドアプリケーション用のFirebaseの簡単な設定です。	|	D	|

| バックエンドサービス関連 Fauna編 |	説明	 | 	備考	 |
|---|---|---|
|	[with-cookie-auth-fauna](https://github.com/vercel/next.js/tree/canary/examples/with-cookie-auth-fauna "with-cookie-auth-fauna") 	|	（認証)（無料、有料)ユーザーを認証し、トークンを安全な（JS以外の)Cookieに格納します。	|	D	|
|	[with-graphql-faunadb](https://github.com/vercel/next.js/tree/canary/examples/with-graphql-faunadb "with-graphql-faunadb") 	|	FaunaDBGraphqlスターターの使用方法-FaunaDBゲストブック	|	D	|

| バックエンドサービス関連 その他 |	説明	 | 	備考	 |
|---|---|---|
|	[(New) with-nhost-auth-realtime-graphql](https://github.com/vercel/next.js/tree/canary/examples/with-nhost-auth-realtime-graphql "with-nhost-auth-realtime-graphql") 	|	[（公式）](https://nextjs.org/docs/authentication) (Firebaseの代替)（認証)nhost（GraphQLを使用したオープンソースのFirebaseの代替)  バックエンドにNhostを使った認証とGraphQLの使用方法 	|	[Demo](https://nhost-nextjs-example.vercel.app/) D 	|
|	[with-supabase-auth-realtime-db](https://github.com/vercel/next.js/tree/canary/examples/with-supabase-auth-realtime-db "with-supabase-auth-realtime-db") 	|	[（公式）](https://nextjs.org/docs/authentication) (Firebaseの代替) （認証)Supabaseの認証を、クライアントとサーバーで、APIルートとサーバーサイドレンダリング(SSR) の両方で使用する方法	|	D	|

| バックエンドサービス DB関連 prisma編 |	説明	 | 	備考	 |
|---|---|---|
|	[with-prisma](https://github.com/vercel/next.js/tree/canary/examples/with-prisma "with-prisma") 	|	Node.jsおよびTypeScript用の次世代ORM	|	サプル無し	|
|	[with-reason-relay](https://github.com/vercel/next.js/tree/canary/examples/with-reason-relay "with-reason-relay") 	|	GraphQLのバックエンドにPrisma + Nexusを使った使用方法	|	D	|

| バックエンドサービス DB関連 mysql編 |	説明	 | 	備考	 |
|---|---|---|
|	[with-mysql](https://github.com/vercel/next.js/tree/canary/examples/with-mysql "with-mysql") 	|	MySQLの使用方法	|	[Demo](https://next-mysql.vercel.app) D 	|

| バックエンドサービス DB関連 その他 |	説明	 | 	備考	 |
|---|---|---|
|	[with-deta-base](https://github.com/vercel/next.js/tree/canary/examples/with-deta-base "with-deta-base") 	|	Deta Baseという名前のアプリケーション その使用方法 NoSQL	|	D	|
|	[with-knex](https://github.com/vercel/next.js/tree/canary/examples/with-knex "with-knex") 	|	KnexはさまざまなSQLデータベースと連携するSQLクエリビルダーです。 Postgresデータベースに接続してクエリを実行する方法	|	D	|
|	[with-mongodb-mongoose](https://github.com/vercel/next.js/tree/canary/examples/with-mongodb-mongoose "with-mongodb-mongoose") 	|	MongoDBとMongooseを使用したアプリの使用方法 mongooseは、node.js上でmongoDBを扱うためのライブラリ	|	D	|
|	[with-mongodb](https://github.com/vercel/next.js/tree/canary/examples/with-mongodb "with-mongodb") 	|	MongoDBを使用したアプリの使用方法	|	D	|
|	[with-neo4j](https://github.com/vercel/next.js/tree/canary/examples/with-neo4j "with-neo4j") 	|	APIルートでNeo4jというグラフデータベースを使用する方法	|	D	|
|	[with-realm-web](https://github.com/vercel/next.js/tree/canary/examples/with-realm-web "with-realm-web") 	|	Realm-Web SDK を使用して、swr を用いて realm の graphql エンドポイントに問い合わせを行います。 この例では、GraphQL のバックエンドとして MongoDB Realm を使用しています。	|	D	|
|	[with-redis](https://github.com/vercel/next.js/tree/canary/examples/with-redis "with-redis") 	|	Redisをデータストアとして使用する方法	|	[Demo](https://roadmap-redis.vercel.app/) D	|

|docker関連 |	説明	 | 	備考	 |
|---|---|---|
|	[with-docker](https://github.com/vercel/next.js/tree/canary/examples/with-docker "with-docker") 	|	[（公式）](https://nextjs.org/docs/api-routes/introduction) APIルート	|	[Run on Google Cloud](https://deploy.cloud.run/?git_repo=https://github.com/vercel/next.js.git&dir=examples/with-docker) 	|

|認証関連 |	説明	 | 	備考	 |
|---|---|---|
|	[(New) with-supertokens](https://github.com/vercel/next.js/tree/canary/examples/with-supertokens "with-supertokens") 	|	[（公式）](https://nextjs.org/docs/authentication) （認証) オープンソースの認証ライブラリ。SuperTokensで保護されたアプリケーションの簡単な設定	|	D	|
|	[auth0](https://github.com/vercel/next.js/tree/canary/examples/auth0 "auth0") 	|	[（公式）](https://nextjs.org/docs/authentication)（認証)（無料、有料)認証サポートを簡単に追加する方法	|	|
|	[with-clerk](https://github.com/vercel/next.js/tree/canary/examples/with-clerk "with-clerk") 	|	（認証)（無料、有料)ユーザー認証	|	D	|
|	[with-iron-session](https://github.com/vercel/next.js/tree/canary/examples/with-iron-session "with-iron-session") 	|	[（公式）](https://nextjs.org/docs/authentication)（認証)署名および暗号化されたCookieを使用してセッションデータを格納する認証システムを作成	|	S D	|
|	[with-magic](https://github.com/vercel/next.js/tree/canary/examples/with-magic "with-magic") 	|	[（公式）](https://nextjs.org/docs/authentication)（認証)（無料、有料)Magic電子メールベースのマジックリンクを使用した、Cookieベースのパスワードなし認証を特徴としています。	|	D	|
|	[with-next-auth](https://github.com/vercel/next.js/tree/canary/examples/with-next-auth "with-next-auth") 	|	[（公式）](https://nextjs.org/docs/authentication)（認証)オープンソースで使いやすく、デフォルトで安全な認証ライブラリを備えたnext-authを使用	|	[NextAuth.js Example](https://github.com/nextauthjs/next-auth-example) 	|
|	[with-passport-and-next-connect](https://github.com/vercel/next.js/tree/canary/examples/with-passport-and-next-connect "with-passport-and-next-connect") 	|	（認証)Passport.jsでnext-connectおよびcookieベースの認証を使用して、基本的なCRUDアプリを作成します。	|	D	|
|	[with-passport](https://github.com/vercel/next.js/tree/canary/examples/with-passport "with-passport") 	|	（認証)ユーザー名とパスワードを使用したCookieベースの認証	|	D	|
|	[with-userbase](https://github.com/vercel/next.js/tree/canary/examples/with-userbase "with-userbase") 	|	[（公式）](https://nextjs.org/docs/authentication)（認証)（無料、有料)Userbaseユーザーアカウントとデータの永続性を静的サイトに追加する最も簡単な方法です	|	[Demo](https://next-userbase.vercel.app) D 	|

|セキュリティ関連 |	説明	 | 	備考	 |
|---|---|---|
|	[(New) styled-jsx-with-csp](https://github.com/vercel/next.js/tree/canary/examples/styled-jsx-with-csp "styled-jsx-with-csp") 	|	styled-jsxを使ってCSP(Content Security Policy)（クロスサイトスクリプティング (XSS) やデータインジェクション攻撃などのような、特定の種類の攻撃を検知し、影響を軽減するために追加できるセキュリティレイヤー)のstyle-srcディレクティブにnonce（暗号通信で用いられる、使い捨てのランダムな値のこと)を使用する方法	|	S D	|
|	[with-strict-csp](https://github.com/vercel/next.js/tree/canary/examples/with-strict-csp "with-strict-csp") 	|	CSP(コンテンツセキュリティポリシー ) は、クロスサイトスクリプティング (XSS) やデータインジェクション攻撃などのような、特定の種類の攻撃を検知し、影響を軽減するために追加できるセキュリティレイヤー。 スクリプトハッシュを生成する厳密なCSPを使用したアプリの使用方法	|	S D	|

|API Routes関連 GraphQL編 |	説明	 | 	備考	 |
|---|---|---|
|	[api-routes-apollo-server-and-client-auth](https://github.com/vercel/next.js/tree/canary/examples/api-routes-apollo-server-and-client-auth "api-routes-apollo-server-and-client-auth") 	|	ApolloはGraphQLクライアント	|	S D	|
|	[api-routes-apollo-server-and-client](https://github.com/vercel/next.js/tree/canary/examples/api-routes-apollo-server-and-client "api-routes-apollo-server-and-client") 	|	ApolloはGraphQLクライアント	|	S D	|
|	[api-routes-apollo-server](https://github.com/vercel/next.js/tree/canary/examples/api-routes-apollo-server "api-routes-apollo-server") 	|	ApolloはGraphQLクライアント	|	S D	|
|	[api-routes-graphql](https://github.com/vercel/next.js/tree/canary/examples/api-routes-graphql "api-routes-graphql") 	|	[（公式）](https://nextjs.org/docs/api-routes/introduction) GraphQL Server apollo-server-micro	|	S D	|
|	[with-apollo-and-redux](https://github.com/vercel/next.js/tree/canary/examples/with-apollo-and-redux "with-apollo-and-redux") 	|	ApolloはGraphQLクライアント	|	D	|
|	[with-apollo-neo4j-graphql](https://github.com/vercel/next.js/tree/canary/examples/with-apollo-neo4j-graphql "with-apollo-neo4j-graphql") 	|	GraphQLとApolloでNeo4jデータベースを使用する方法	|	D	|
|	[with-apollo](https://github.com/vercel/next.js/tree/canary/examples/with-apollo "with-apollo") 	|	ApolloはGraphQLクライアント	|	[Demo](https://next-with-apollo.vercel.app) D 	|
|	[with-graphql-hooks](https://github.com/vercel/next.js/tree/canary/examples/with-graphql-hooks "with-graphql-hooks") 	|	GraphQLフックの使用方法。GraphQL Hooksは、最小限のフック優先のGraphQLクライアントになることを目的としたNearFormのライブラリです。	|	D	|
|	[with-graphql-react](https://github.com/vercel/next.js/tree/canary/examples/with-graphql-react "with-graphql-react") 	|	graphql-react最新のコンテキストを使用したReactのGraphQLクライアント	|	D	|
|	[with-relay-modern](https://github.com/vercel/next.js/tree/canary/examples/with-relay-modern "with-relay-modern") 	|	Facebookが開発 Next.jsの9.3で導入されたgetStaticProps, および9.4で導入されたIncremental Static Regenerationは、Relayと非常に相性がいい The production-ready GraphQL client for React.	|	D	|

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

|server関連 |	説明	 | 	備考	 |
|---|---|---|
|	[custom-server-actionhero](https://github.com/vercel/next.js/tree/canary/examples/custom-server-actionhero "custom-server-actionhero") 	|	Action Hero	|	|
|	[custom-server-express](https://github.com/vercel/next.js/tree/canary/examples/custom-server-express "custom-server-express") 	|	[（公式）](https://nextjs.org/docs/advanced-features/custom-server) Express Webアプリケーション	|	S	|
|	[custom-server-fastify](https://github.com/vercel/next.js/tree/canary/examples/custom-server-fastify "custom-server-fastify") 	|	Fastify	|	S	|
|	[custom-server-hapi](https://github.com/vercel/next.js/tree/canary/examples/custom-server-hapi "custom-server-hapi") 	|	[（公式）](https://nextjs.org/docs/advanced-features/custom-server) Secure Framework	|	S	|
|	[custom-server-koa](https://github.com/vercel/next.js/tree/canary/examples/custom-server-koa "custom-server-koa") 	|	[（公式）](https://nextjs.org/docs/advanced-features/custom-server) New web framework designed	|	S	|
|	[custom-server-polka](https://github.com/vercel/next.js/tree/canary/examples/custom-server-polka "custom-server-polka") 	|	Express.jsの代替品	|	S	|
|	[custom-server-typescript](https://github.com/vercel/next.js/tree/canary/examples/custom-server-typescript "custom-server-typescript") 	|	Nodemonを使用してサーバーとクライアントの両方でTypeScriptを使用し、Next.jsユニバーサルコードに影響を与えずにサーバーコードをライブでリロードする方法	|	S	|

|開発便利ツール モック関連 |	説明	 | 	備考	 |
|---|---|---|
|	[with-msw](https://github.com/vercel/next.js/tree/canary/examples/with-msw "with-msw") 	|	Mock Service Workerは、ブラウザとノード用のAPIモックライブラリ	|	D	|

|テスト関連 |	説明	 | 	備考	 |
|---|---|---|
|	[with-jest](https://github.com/vercel/next.js/tree/canary/examples/with-jest "with-jest") 	|	テスト	|	|
|	[with-mocha](https://github.com/vercel/next.js/tree/canary/examples/with-mocha "with-mocha") 	|	テスト	|	S	|
|	[with-tesfy](https://github.com/vercel/next.js/tree/canary/examples/with-tesfy "with-tesfy") 	|	A/Bテストと機能フラグ	|	S D	|

|システム関連 babel polyfills etc. |	説明	 | 	備考	 |
|---|---|---|
|	[with-babel-macros](https://github.com/vercel/next.js/tree/canary/examples/with-babel-macros "with-babel-macros") 	|	babel-plugin-macrosは、ユーザーがビルドシステムにbabelプラグインを追加することなくコンパイル時のコード変換を使用するライブラリの標準インターフェイスを定義します	|	S D	|
|	[with-custom-babel-config](https://github.com/vercel/next.js/tree/canary/examples/with-custom-babel-config "with-custom-babel-config") 	|	[（公式）](https://nextjs.org/docs/advanced-features/customizing-babel-config) カスタムBabel構成の使用方法	|	S D	|
|	[with-polyfills](https://github.com/vercel/next.js/tree/canary/examples/with-polyfills "with-polyfills") 	|	ポリフィルを使用したアプリの使用方法 警告：このサンプルは、ポリフィルを追加するための推奨される方法ではなく、バンドルで問題を引き起こすことが知られています。	|	S D	|
|	[with-service-worker](https://github.com/vercel/next.js/tree/canary/examples/with-service-worker "with-service-worker") 	|	Service Worker はブラウザが Web ページとは別にバックグラウンドで実行するスクリプトで、Web ページやユーザーのインタラクションを必要としない機能です。プッシュ通知やバックグラウンド同期	|	D	|

|分析、解析、監視関連 |	説明	 | 	備考	 |
|---|---|---|
|	[(New) with-plausible](https://github.com/vercel/next.js/tree/canary/examples/with-plausible "with-plausible") 	|	Plausibleは、軽量でオープンソースのウェブサイト分析ツールです。 Googleアナリティクスの代替	|	S D	|
|	[analyze-bundles](https://github.com/vercel/next.js/tree/canary/examples/analyze-bundles "analyze-bundles") 	|	@next/bundle-analyzerの使い方	|	S D	|
|	[with-facebook-pixel](https://github.com/vercel/next.js/tree/canary/examples/with-facebook-pixel "with-facebook-pixel") 	|	FacebookPixelは広告効果の計測精度向上やFacebook広告の配信システム最適化を実現するツール	|	D	|
|	[with-flow](https://github.com/vercel/next.js/tree/canary/examples/with-flow "with-flow") 	|	Flow静的型チェッカーFlowを使用したアプリの使用方法 flowはJavaScriptの静的タイプチェッカーです。	|	S D	|
|	[with-google-analytics-amp](https://github.com/vercel/next.js/tree/canary/examples/with-google-analytics-amp "with-google-analytics-amp") 	|	AMPと組み合わせてGoogleアナリティクスとともにNext.jsを使用する方法	|	D	|
|	[with-google-analytics](https://github.com/vercel/next.js/tree/canary/examples/with-google-analytics "with-google-analytics") 	|	GoogleアナリティクスとともにNext.jsを使用する方法	|	D	|
|	[with-google-tag-manager](https://github.com/vercel/next.js/tree/canary/examples/with-google-tag-manager "with-google-tag-manager") 	|	Googleタグマネージャーを使用したアプリの使用方法	|	D	|
|	[with-react-ga](https://github.com/vercel/next.js/tree/canary/examples/with-react-ga "with-react-ga") 	|	react-ga React Google Analytics Module	|	D	|
|	[with-segment-analytics](https://github.com/vercel/next.js/tree/canary/examples/with-segment-analytics "with-segment-analytics") 	|	（有料、無料）分析機能を備えたアプリの使用方法	|	S D	|
|	[with-sentry](https://github.com/vercel/next.js/tree/canary/examples/with-sentry "with-sentry") 	|	アプリケーション監視プラットフォーム	|	S D	|
|	[with-webpack-bundle-size-analyzer](https://github.com/vercel/next.js/tree/canary/examples/with-webpack-bundle-size-analyzer "with-webpack-bundle-size-analyzer") 	|	Webpack バンドルのサイズに何が影響しているかを調べるための小さなユーティリティです。	|	S	|

|デスクトップアプリケーション関連 |	説明	 | 	備考	 |
|---|---|---|
|	[with-electron-typescript](https://github.com/vercel/next.js/tree/canary/examples/with-electron-typescript "with-electron-typescript") 	|	デスクトップアプリケーションElectron application example with typescript	|	|
|	[with-electron](https://github.com/vercel/next.js/tree/canary/examples/with-electron "with-electron") 	|	デスクトップアプリケーションElectron application example	|	|

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

|他のWebサービスの利用関連 |	説明	 | 	備考	 |
|---|---|---|
|	[with-urql](https://github.com/vercel/next.js/tree/canary/examples/with-urql "with-urql") 	|	高度にカスタマイズ可能で用途の広いGraphQLクライアント	|	S D	|

|その他 |	説明	 | 	備考	 |
|---|---|---|
|	[with-custom-reverse-proxy](https://github.com/vercel/next.js/tree/canary/examples/with-custom-reverse-proxy "with-custom-reverse-proxy") 	|	リバースプロキシの使用方法	|	|
|	[with-quill-js](https://github.com/vercel/next.js/tree/canary/examples/with-quill-js "with-quill-js") 	|	powerfulrichtexteditor	|	S D	|
|	[with-slate](https://github.com/vercel/next.js/tree/canary/examples/with-slate "with-slate") 	|	リッチテキストThisiseditablerichtext	|	S D	|
|	[with-mqtt-js](https://github.com/vercel/next.js/tree/canary/examples/with-mqtt-js "with-mqtt-js") 	|	MQTT.jsは、node.jsおよびブラウザー用のJavaScriptで記述されたMQTTプロトコルのクライアントライブラリです。	|	D	|
|	[with-next-offline](https://github.com/vercel/next.js/tree/canary/examples/with-next-offline "with-next-offline") 	|	next-offlineとは、Workboxを使用しオフライン機能を簡単に実現する next-offlineプラグインの使用方法	|	|
|	[with-next-seo](https://github.com/vercel/next.js/tree/canary/examples/with-next-seo "with-next-seo") 	|	Next.jsでSEOを管理するのに役立つプラグインであるnext-seoを統合する方法	|	S D	|
|	[with-react-toolbox](https://github.com/vercel/next.js/tree/canary/examples/with-react-toolbox "with-react-toolbox") 	|	react-toolboxスタイルのモジュールを静的ファイルに抽出するためのコマンドラインツールで、ほぼすべてのスタックに統合できます。※リンク先で怪しい広告 	|	S D	|
|	[with-stomp](https://github.com/vercel/next.js/tree/canary/examples/with-stomp "with-stomp") 	|	Next.jsアプリケーション内でSTOMPを使用する方法。STOMPは、シンプルなテキスト指向のメッセージングプロトコルです。	|	|
|	[with-why-did-you-render](https://github.com/vercel/next.js/tree/canary/examples/with-why-did-you-render "with-why-did-you-render") 	|	Why-did-you-renderは、Reactにパッチを当てて、回避可能な再レンダリングについて通知します。(React Nativeでも動作します。) why-did-you-renderの簡単な使用方法。	|	S D	|
|	[with-xstate](https://github.com/vercel/next.js/tree/canary/examples/with-xstate "with-xstate") 	|	ステートマシンや状態遷移を扱えるJavaScriptのライブラリ XStateをNext.jsに統合する方法。 JavaScriptとTypeScriptの有限状態マシンと最新のWeb用のステートチャート。	|	S D	|
|	[with-yarn-workspaces](https://github.com/vercel/next.js/tree/canary/examples/with-yarn-workspaces "with-yarn-workspaces") 	|	Yarn ワークスペースはパッケージアーキテクチャを設定する新しい方法で、Yarn 1.0 からデフォルトで利用可能です。これにより、複数のパッケージを設定することができ、yarn install を一度だけ実行して、すべてのパッケージを一度にインストールすることができます。	|	S D	|

|moved、removed、非推奨、廃止|	説明	 | 	備考	 |
|---|---|---|
|	[custom-server](https://github.com/vercel/next.js/tree/canary/examples/custom-server "custom-server") 	|	[（公式）](https://nextjs.org/docs/advanced-features/custom-server) このサンプルはhttps://nextjs.org/docs/advanced-features/custom-server へ移動しました。カスタムサーバーの使用方法	|	|
|	[page-transitions](https://github.com/vercel/next.js/tree/canary/examples/page-transitions "page-transitions") 	|	（インストール不要)このサンプルは非推奨になり、削除されました。	|	|
|	[parameterized-routing](https://github.com/vercel/next.js/tree/canary/examples/parameterized-routing "parameterized-routing") 	|	（インストール不要)このサンプルは非推奨になり、削除されました。	|	|
|	[with-cookie-auth](https://github.com/vercel/next.js/tree/canary/examples/with-cookie-auth "with-cookie-auth") 	|	（非推奨)（認証)このサンプルは非推奨になり、次のいずれかを参考にしてください。auth0 with-cookie-auth-fauna with-passport with-iron-session with-next-auth	|	|
|	[with-dotenv](https://github.com/vercel/next.js/tree/canary/examples/with-dotenv "with-dotenv") 	|	（インストール不要)Next.js9.4からサポートされています。	|	|
|	[with-firebase-authentication-serverless](https://github.com/vercel/next.js/tree/canary/examples/with-firebase-authentication-serverless "with-firebase-authentication-serverless") 	|	（moved)with-firebase-authentication	|	|
|	[with-glamorous](https://github.com/vercel/next.js/tree/canary/examples/with-glamorous "with-glamorous") 	|	[（公式）](https://nextjs.org/docs/basic-features/built-in-css-support)（インストール不要)glamorousは非推奨になり、エモーションが採用されました。	|	|
|	[with-global-stylesheet-simple](https://github.com/vercel/next.js/tree/canary/examples/with-global-stylesheet-simple "with-global-stylesheet-simple") 	|	（インストール不要)このサンプルは非推奨になりました。代わりにexamples/with-next-cssを使用してください。	|	|
|	[with-global-stylesheet](https://github.com/vercel/next.js/tree/canary/examples/with-global-stylesheet "with-global-stylesheet") 	|	（インストール不要)このサンプルは非推奨になりました。代わりにexamples/with-next-cssを使用してください。	|	|
|	[with-markdown](https://github.com/vercel/next.js/tree/canary/examples/with-markdown "with-markdown") 	|	（インストール不要)Markdownの使い方はcanary/examples/blog-starterを見てください。	|	|
|	[with-material-ui](https://github.com/vercel/next.js/tree/canary/examples/with-material-ui "with-material-ui") 	|	（移動)（Material-UI公式サイトのサンプル) [mui-org/material-ui/examples/nextjs/]（https://github.com/mui-org/material-ui/tree/master/examples/nextjs)	|	|
|	[with-next-routes](https://github.com/vercel/next.js/tree/canary/examples/with-next-routes "with-next-routes") 	|	（インストール不要)動的ルートがデフォルトでサポートされるようになりました	|	|
|	[with-now-env](https://github.com/vercel/next.js/tree/canary/examples/with-now-env "with-now-env") 	|	（インストール不要) Next.jsは9.4以降、環境変数の読み込みを自動的にサポートします。	|	|
|	[with-pretty-url-routing](https://github.com/vercel/next.js/tree/canary/examples/with-pretty-url-routing "with-pretty-url-routing") 	|	（インストール不要)動的ルートはデフォルトでサポートされるようになりました	|	|
|	[with-sentry-simple](https://github.com/vercel/next.js/tree/canary/examples/with-sentry-simple "with-sentry-simple") 	|	（インストール不要)（moved)with-sentryの方を使用してください。アプリケーション監視プラットフォーム	|	|
|	[with-strict-csp-hash](https://github.com/vercel/next.js/tree/canary/examples/with-strict-csp-hash "with-strict-csp-hash") 	|	（インストール不要) （moved)このサンプルはwith-strict-cspに移動しました	|	|
|	[with-styled-jsx-postcss](https://github.com/vercel/next.js/tree/canary/examples/with-styled-jsx-postcss "with-styled-jsx-postcss") 	|	（moved) このサンプルは/examples/with-styled-jsx-pluginsに移動しました	|	|
|	[with-sw-precache](https://github.com/vercel/next.js/tree/canary/examples/with-sw-precache "with-sw-precache") 	|	（インストール不要)canary/examples/with-next-offlineの使用をおすすめします。	|	|
|	[with-universal-configuration-build-time](https://github.com/vercel/next.js/tree/canary/examples/with-universal-configuration-build-time "with-universal-configuration-build-time") 	|	（インストール不要)Next.js9.4以降、環境変数の読み込みを自動的にサポートします。	|	|
|	[with-universal-configuration-runtime](https://github.com/vercel/next.js/tree/canary/examples/with-universal-configuration-runtime "with-universal-configuration-runtime") 	|	（インストール不要)Next.js9.4以降、環境変数の読み込みを自動的にサポートします。	|	|
|	[with-webpack-bundle-analyzer](https://github.com/vercel/next.js/tree/canary/examples/with-webpack-bundle-analyzer "with-webpack-bundle-analyzer") 	|	（moved)このサンプルはanalyze-bundlesに移動しました。	|	|

---

# 2021年1月以降新たに追加されたexamples

|前回（2021年1月)の調査から新たに追加されたもの |	説明	 | 	備考	 |
|---|---|---|
|[(New) headers](https://github.com/vercel/next.js/tree/canary/examples/headers "headers") 	|	[（公式）](https://nextjs.org/docs/api-reference/next.config.js/headers) Next.jsのヘッダーを使用して、カスタムHTTPヘッダーをNext.jsアプリに追加する方法。	|	S D	|
|[(New) with-eslint](https://github.com/vercel/next.js/tree/canary/examples/with-eslint "with-eslint") 	|	Next.jsでデフォルトで使用可能になったESlintの使用方法	|	S D	|
|[(New) with-vercel-fetch](https://github.com/vercel/next.js/tree/canary/examples/with-vercel-fetch "with-vercel-fetch") 	|	@vercel/fetch の使用方法	|	S D	|
|[(New) blog](https://github.com/vercel/next.js/tree/canary/examples/blog "blog") 	|	ポートフォリオ スターターキット	|	S D	|
|[(New) with-reflexjs](https://github.com/vercel/next.js/tree/canary/examples/with-reflexjs "with-reflexjs") 	|	Reflexjsはスタイルプロップ、カラーモード、テーマ、バリアントを備えた迅速なUI開発のためのライブラリ＋スターターキット、テーマ、ブロックでGatsbyやNext.jsのサイトを迅速に構築することができます。	|	S D	|
|[(New) blog-with-comment](https://github.com/vercel/next.js/tree/canary/examples/blog-with-comment "blog-with-comment") 	|	Upstash（サーバーレスRedis)（無料、有料)とAuth0（認証)（無料、有料)を使用してNext.jsブログアプリケーションにコメント機能を追加します。	|	[Demo](https://blog-with-comment.vercel.app/)	|
|[(New) cms-drupal](https://github.com/vercel/next.js/tree/canary/examples/cms-drupal "cms-drupal") 	|	Next.jsとDrupal（オープンソースのCMS)を使用して静的に生成するブログの使用方法	|	[Demo](https://cms-drupal.vercel.app) D	|
|[(New) cms-ghost](https://github.com/vercel/next.js/tree/canary/examples/cms-ghost "cms-ghost") 	|	Next.jsとGhost（コンテンツ、ニュースレター、メンバー、支払い機能)（有料)を使用して静的に生成するブログの使用方法	|	D	|
|[(New) cms-prepr](https://github.com/vercel/next.js/tree/canary/examples/cms-prepr "cms-prepr") 	|	[（公式）](https://nextjs.org/docs/basic-features/pages) Next.jsとPreprを使用して静的に生成するブログの使用方法	|	[Demo](https://next-blog-prepr.now.sh/)  D	|
|[(New) with-emotion-vanilla](https://github.com/vercel/next.js/tree/canary/examples/with-emotion-vanilla "with-emotion-vanilla") 	|	emotionの基本的な使用方法 emotion（TypeScriptと相性の良い後発のCSS-in-Jsライブラリ)	|	S D	|
|[(New) with-compiled-css](https://github.com/vercel/next.js/tree/canary/examples/with-compiled-css "with-compiled-css") 	|	styled-jsxの代わりにコンパイル済みをビルド時の CSS-in-JS スタイリング ソリューションとして使用する方法	|	S D	|
|[(New) with-react-hook-form](https://github.com/vercel/next.js/tree/canary/examples/with-react-hook-form "with-react-hook-form") 	|	Form処理 react-hook-formの使用方法	|	S D	|
|[(New) with-redux-toolkit-typescript](https://github.com/vercel/next.js/tree/canary/examples/with-redux-toolkit-typescript "with-redux-toolkit-typescript") 	|	TypeScriptでNext.jsとRedux Toolkitを統合する方法	|	D	|
|[(New) with-i18n-next-intl](https://github.com/vercel/next.js/tree/canary/examples/with-i18n-next-intl "with-i18n-next-intl") 	|	国際化 next-intl の使用方法 Next.jsの国際化されたルーティング機能を補完	|	S D	|
|[(New) with-nhost-auth-realtime-graphql](https://github.com/vercel/next.js/tree/canary/examples/with-nhost-auth-realtime-graphql "with-nhost-auth-realtime-graphql") 	|	[（公式）](https://nextjs.org/docs/authentication) (Firebaseの代替)（認証)nhost（GraphQLを使用したオープンソースのFirebaseの代替)  バックエンドにNhostを使った認証とGraphQLの使用方法 	|	[Demo](https://nhost-nextjs-example.vercel.app/) D 	|
|[(New) with-supertokens](https://github.com/vercel/next.js/tree/canary/examples/with-supertokens "with-supertokens") 	|	[（公式）](https://nextjs.org/docs/authentication) （認証) オープンソースの認証ライブラリ。SuperTokensで保護されたアプリケーションの簡単な設定	|	D	|
|[(New) styled-jsx-with-csp](https://github.com/vercel/next.js/tree/canary/examples/styled-jsx-with-csp "styled-jsx-with-csp") 	|	styled-jsxを使ってCSP(Content Security Policy)（クロスサイトスクリプティング (XSS) やデータインジェクション攻撃などのような、特定の種類の攻撃を検知し、影響を軽減するために追加できるセキュリティレイヤー)のstyle-srcディレクティブにnonce（暗号通信で用いられる、使い捨てのランダムな値のこと)を使用する方法	|	S D	|
|[(New) with-plausible](https://github.com/vercel/next.js/tree/canary/examples/with-plausible "with-plausible") 	|	Plausibleは、軽量でオープンソースのウェブサイト分析ツールです。 Googleアナリティクスの代替	|	S D	|

|前回（2021年1月)の調査から削除されたもの |	説明	 |
|---|---|
|[with-ant-design-less](https://github.com/vercel/next.js/tree/canary/examples/with-ant-design-less)|Ant Design of ReactとともにNext.jsを使用する方法|
|[with-ant-design-mobile](https://github.com/vercel/next.js/tree/canary/examples/with-ant-design-mobile)|antd-mobileとともにNext.jsを使用する方法|
|[with-ant-design-pro-layout-less](https://github.com/vercel/next.js/tree/canary/examples/with-ant-design-pro-layout-less)|Ant Design Pro Layout of React.とともにNext.jsを使用する方法|
|[with-astroturf](https://github.com/vercel/next.js/tree/canary/examples/with-astroturf)|CSS in JS stroturfを使用したアプリの使用例|
|[with-glamor](https://github.com/vercel/next.js/tree/canary/examples/with-glamor)|（公式）CSS in JS CSS関連スタイリングソリューションの使用方法|
|[with-glamorous](https://github.com/vercel/next.js/tree/canary/examples/with-glamorous)| (インストール不要)glamorousは非推奨になり、エモーションが採用されました。|
|[with-monaco-editor](https://github.com/vercel/next.js/tree/canary/examples/with-monaco-editor)|モナコエディタは VS Codeを動かすコードエディタです。|
|[with-next-less](https://github.com/vercel/next.js/tree/canary/examples/with-next-less)|CSS Next.js + Less|
|[with-react-relay-network-modern](https://github.com/vercel/next.js/tree/canary/examples/with-react-relay-network-modern)|The production-ready GraphQL client for React.|
|[with-style-sheet](https://github.com/vercel/next.js/tree/canary/examples/with-style-sheet)|CSS in JSlibrarystyle-sheet|
|[with-zeit-fetch](https://github.com/vercel/next.js/tree/canary/examples/with-zeit-fetch)| Next.jsアプリケーションで@zeit/fetchを使用する方法|

|前々回（2020年7月)の調査から削除されたもの |	説明	 |
|---|---|
|[with-emotion-11](https://github.com/vercel/next.js/tree/canary/examples/with-emotion-11)|CSS in JS|
|[with-stitches-styled](https://github.com/vercel/next.js/tree/canary/examples/with-stitches-styled)|CSS in JS|
|[with-storybook-typescript](https://github.com/vercel/next.js/tree/canary/examples/with-storybook-typescript)|（インストール不要)削除されました。|
|[z-experimental-refresh](https://github.com/vercel/next.js/tree/canary/examples/z-experimental-refresh)|(実験的) アプリケーションやプロジェクトでは、これらの機能を（まだ)使用しないでください。|