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

更新履歴

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月版）

サンプルの場所

Next.js公式リポジトリのexamples内ディレクトリ

はじめに

Next.jsの公式サンプルは前回(2021年1月版)から9本増えて合計277本あります。新たに追加されたサンプルには(new)がついています。（2021/07/03)
しかし、このままではどれを見たらいいのかわからないので主観で分類してみました。

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

※今回の更新で一番目についたのは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をつかってインストールまではしなくていい場合）

参考

create-next-app - npm
Create Next App | Next.js

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集

Next.jsの入門 0 最初	説明	備考
hello-world	（基礎)（公式） Next.jsの基本中の基本	S D

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

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

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

Next.jsの基礎 2021年7月追加分	説明	備考
(New) headers	（公式） Next.jsのヘッダーを使用して、カスタムHTTPヘッダーをNext.jsアプリに追加する方法。	S D
(New) with-eslint	Next.jsでデフォルトで使用可能になったESlintの使用方法	S D
(New) with-vercel-fetch	@vercel/fetch の使用方法	S D

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

blog関連	説明	備考
(New) blog-with-comment	Upstash（サーバーレスRedis)（無料、有料)とAuth0（認証)（無料、有料)を使用してNext.jsブログアプリケーションにコメント機能を追加します。	Demo
blog-starter-typescript	Next.js、Markdown、TypeScriptを使用して静的に生成されたブログの使用方法	S D
blog-starter	（公式） Next.jsとMarkdownを使用して静的に生成されたブログの使用方法	Demo S D

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

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

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

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

CSS関連 CSS-in-JS emotion編	説明	備考
(New) with-emotion-vanilla	emotionの基本的な使用方法 emotion（TypeScriptと相性の良い後発のCSS-in-Jsライブラリ)	S D
with-emotion	（公式）CSS in JS SSR中にサーバーデータを直接Next.jsページに渡す	S D

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

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

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

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

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

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

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

React Hooks関連	説明	備考
(New) with-react-hook-form	Form処理 react-hook-formの使用方法	S D

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

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

状態管理その他	説明	備考
with-kea	状態管理フレームワーク	S D
with-overmind	状態管理 Overmindは、状態管理のオーケストレーションを最小限に抑え、開発だけに集中できるような開発環境を目指している	S D
with-recoil	状態管理 Recoilは Facebookによって提唱された状態管理ライブラリ	S D
with-reflux	React公式 一方向のデータフローを持つアプリケーションストアの管理にrefluxを使用する方法	S D
with-unstated	unstated-nextReact状態管理ライブラリ	S D

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

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

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

画像関連	説明	備考
image-component	（公式） 画像コンポーネントを使用して最適化されたレスポンシブ画像を提供する方法	Demo S D
svg-components	.babelrcを使用して、.svgファイルをインポートし、それらをReactコンポーネントとしてレンダリングするためのサポートを追加します。	S D
with-three-js	threejsはWebGL レンダラを持つ軽量な 3D ライブラリ。このライブラリには Canvas 2D、SVG、CSS3Dのレンダラーも用意されています。	S D

検索関連	説明	備考
with-algolia-react-instantsearch	検索の実装と検索の分析

リッチテキスト関連	説明	備考
with-draft-js	RichTextEditorFrameworkforReact	S D

アニメーション関連	説明	備考
with-framer-motion	motionはオープンソースで本番環境に対応したモーションWeb上のReact用のライブラリ	S D
with-gsap	アニメーションライブラリとしてGSAPを使用する方法	S D

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

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

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

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

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

バックエンドサービス関連 AWS編	説明	備考
with-aws-amplify-typescript	AWSAmplifyは、モバイルおよびフロントエンドのウェブデベロッパーがAWSを利用して安全でスケーラブルなフルスタックアプリケーションを構築できるようにするツールとサービスのセットです。	DEPLOY TO AMPLIFY CONSOLE
with-aws-amplify	AWSAmplifyは、モバイルおよびフロントエンドのウェブデベロッパーがAWSを利用して安全でスケーラブルなフルスタックアプリケーションを構築できるようにするツールとサービスのセットです。	DEPLOY TO AMPLIFY CONSOLE

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

バックエンドサービス関連 Fauna編	説明	備考
with-cookie-auth-fauna	（認証)（無料、有料)ユーザーを認証し、トークンを安全な（JS以外の)Cookieに格納します。	D
with-graphql-faunadb	FaunaDBGraphqlスターターの使用方法-FaunaDBゲストブック	D

バックエンドサービス関連 その他	説明	備考
(New) with-nhost-auth-realtime-graphql	（公式） (Firebaseの代替)（認証)nhost（GraphQLを使用したオープンソースのFirebaseの代替) バックエンドにNhostを使った認証とGraphQLの使用方法	Demo D
with-supabase-auth-realtime-db	（公式） (Firebaseの代替) （認証)Supabaseの認証を、クライアントとサーバーで、APIルートとサーバーサイドレンダリング(SSR) の両方で使用する方法	D

バックエンドサービス DB関連 prisma編	説明	備考
with-prisma	Node.jsおよびTypeScript用の次世代ORM	サプル無し
with-reason-relay	GraphQLのバックエンドにPrisma + Nexusを使った使用方法	D

バックエンドサービス DB関連 mysql編	説明	備考
with-mysql	MySQLの使用方法	Demo D

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

docker関連	説明	備考
with-docker	（公式） APIルート	Run on Google Cloud

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

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

API Routes関連 GraphQL編	説明	備考
api-routes-apollo-server-and-client-auth	ApolloはGraphQLクライアント	S D
api-routes-apollo-server-and-client	ApolloはGraphQLクライアント	S D
api-routes-apollo-server	ApolloはGraphQLクライアント	S D
api-routes-graphql	（公式） GraphQL Server apollo-server-micro	S D
with-apollo-and-redux	ApolloはGraphQLクライアント	D
with-apollo-neo4j-graphql	GraphQLとApolloでNeo4jデータベースを使用する方法	D
with-apollo	ApolloはGraphQLクライアント	Demo D
with-graphql-hooks	GraphQLフックの使用方法。GraphQL Hooksは、最小限のフック優先のGraphQLクライアントになることを目的としたNearFormのライブラリです。	D
with-graphql-react	graphql-react最新のコンテキストを使用したReactのGraphQLクライアント	D
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	（公式） CORS（Cross-Origin Resource Sharing) とは 追加のHTTPヘッダーを使用して、ある起点で実行されているWebアプリケーションに、異なる起点から選択されたリソースへのアクセスを許可するようにブラウザーに指示するメカニズム	S D
api-routes-middleware	（公式） APIルート Next.jsのAPIエンドポイントを包み込むシンプルなミドルウェアを実装する方法	S D
api-routes-rate-limit	APIの使用制限 APIをある一定回数で使用できなくする方法。	S D
api-routes-rest	（公式） Next.jsのAPIエンドポイントでRESTを使用する方法	S D

server関連	説明	備考
custom-server-actionhero	Action Hero
custom-server-express	（公式） Express Webアプリケーション	S
custom-server-fastify	Fastify	S
custom-server-hapi	（公式） Secure Framework	S
custom-server-koa	（公式） New web framework designed	S
custom-server-polka	Express.jsの代替品	S
custom-server-typescript	Nodemonを使用してサーバーとクライアントの両方でTypeScriptを使用し、Next.jsユニバーサルコードに影響を与えずにサーバーコードをライブでリロードする方法	S

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

テスト関連	説明	備考
with-jest	テスト
with-mocha	テスト	S
with-tesfy	A/Bテストと機能フラグ	S D

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

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

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

既存プロジェクトからの移行関連	説明	備考
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が既存のアプリケーションにプロキシすることができます。	S

他のWebサービスの利用関連	説明	備考
with-urql	高度にカスタマイズ可能で用途の広いGraphQLクライアント	S D

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

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

---

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

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

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

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