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

更新履歴

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の公式サンプルは前回(2020年7月版)から34本増えて合計268本あります。新たに追加されたサンプルには(new)がついています。（2021/01/10）
しかし、このままではどれを見たらいいのかわからないので主観で分類してみました。

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

※今回の更新で一番目についたのはwith-mysqlで、その他DB関連も多く追加されています。

degitを使ってソースのみを取得したい（npx create-next-appをつかってインストールまではしなくていい場合）

Next.js公式examples集

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

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

Next.jsの基礎3 2021年1月版追加分
(new)fast-refresh-demo	Next.jsにはFast Refreshが搭載されており、Reactコンポーネントに加えられた編集を即座にフィードバックすることができます。このデモでは、編集後やエラーが発生した場合に、自動インクリメント値とクラシックカウンタの状態がどのように保存されるかを見ます。
(new)redirects	Next.jsでリダイレクトを使用して、入ってきたリクエストパスを別の宛先パスにリダイレクトする方法
(new)rewrites	Next.jsで書き換えを使用して、着信要求パスを別の宛先パスにマップする方法

pwa関連
(new)progressive-web-app	next-pwaを使用して、Workboxを利用したプログレッシブウェブアプリ（PWA）を作成します。

UI関連 ant
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-ant-design	Ant Design of ReactとともにNext.jsを使用する方法

UI関連 その他
(new)with-chakra-ui-typescript	このサンプルでは、typescriptを使用してNext.jsアプリ内のコンポーネントライブラリとしてchakra-uiを使用する方法を紹介します。
(new)with-ionic-typescript	高品質のクロスプラットフォームネイティブおよびWebアプリエクスペリエンスを構築するためのオープンソースモバイルUIツールキット。
(new)with-mdbreact	レスポンシブでモバイルファーストのウェブサイトやアプリを構築するためのUIキット
with-atlaskit	Atlaskit of ReactとともにNext.jsを使用する方法AltassianのオフィシャルUIライブラリ
with-chakra-ui	Webサイトやアプリの作成を非常に簡単にする、アクセス可能で再利用可能で構成可能なReactコンポーネントのセットchakra-uiをNext.jsアプリ内のコンポーネントライブラリとして使用する方法
with-grommet	Grommet UI library
with-material-ui	（人気）（Material-UI公式サイトのサンプル） mui-org/material-ui/examples/nextjs/
with-patternfly	RedHatが作っているUIフレームワークUIパターン集
with-rebass	UIコンポーネントRebassはReactのブートストラップです。

Firebase関連
(new)with-supabase-auth-realtime-db	（公式） Supabaseは、Firebaseのオープンソースの代替手段です。
with-firebase-authentication	（公式）（認証）サーバーレスAPIを使用したFirebase認証の使用例
with-firebase-cloud-messaging	FirebaseCloudMessagingの使用例
with-firebase-hosting	Firebaseホスティングの使用例
with-firebase	クライアントサイドアプリケーション用のFirebaseの簡単な設定です。

API Routes編
api-routes-cors	（公式）Cross-OriginResourceSharing(CORS)追加のHTTPヘッダーを使用して、ある起点で実行されているWebアプリケーションに、異なる起点から選択されたリソースへのアクセスを許可するようにブラウザーに指示するメカニズムです。
api-routes-middleware	（公式）APIルート
api-routes-rest	（公式）独自のルートを構築する簡単なソリューションを提供するAPIルートが付属しています。このサンプルは、それを使用してREST APIを作成する方法
api-routes	（公式）基本的なAPIルートの使用例

API Routes編 GraphQL関連
api-routes-graphql	（公式）GraphQL Server apollo-server-micro
with-graphql-faunadb	FaunaDBGraphqlスターターの使用例-FaunaDBゲストブック
with-graphql-hooks	GraphQLフックの使用例。GraphQL Hooksは、最小限のフック優先のGraphQLクライアントになることを目的としたNearFormのライブラリです。
with-graphql-react	graphql-react最新のコンテキストを使用したReactのGraphQLクライアント
with-react-relay-network-modern	The production-ready GraphQL client for React.
with-reason-relay	GraphQL backend
with-relay-modern	Facebookが開発 Next.jsの9.3で導入されたgetStaticProps, および9.4で導入されたIncremental Static Regenerationは、Relayと非常に相性がいい The production-ready GraphQL client for React.
with-typescript-graphql	GraphQLとtypescriptの使用例
with-urql	高度にカスタマイズ可能で用途の広いGraphQLクライアント

API Routes編 apollo関連
(new)api-routes-rate-limit	このサンプルではlru-cacheを使用してAPIルート（サーバーレス関数）の単純なレートリミッターを実装します。lru cacheは最も使用頻度の低いアイテムを削除するキャッシュオブジェクトです。
(new)with-apollo-neo4j-graphql	GraphQLとApolloでNeo4jデータベースを使用するNextの簡単なセットアップです。 Neo4jのMoviesデータセットの使用例です。
api-routes-apollo-server-and-client-auth	ApolloはGraphQLクライアント
api-routes-apollo-server-and-client	ApolloはGraphQLクライアント
api-routes-apollo-server	ApolloはGraphQLクライアント
with-apollo-and-redux	ApolloはGraphQLクライアント
with-apollo	ApolloはGraphQLクライアント

DB関連 prisma編
with-prisma	Node.jsおよびTypeScript用の次世代ORM

DB関連 mysql編
(new)with-mysql	Next.jsプロジェクトでMySQLを使用する例

DB関連 その他
(new)with-deta-base	Deta Baseは、エンドユーザーのシンプルさに重点を置いた、フルマネージドで高速、スケーラブルで安全なNoSQLデータベースです。
(new)with-knex	Knexは、Postgres や MySQL を含むさまざまな SQL データベースで動作する SQL クエリビルダーです。このサンプルでは、Next.js と Knex を使って Postgresデータベースに接続してクエリを実行する方法です。
(new)with-mongodb	このサンプルはMongoDBに接続してNext.jsアプリのバックエンドとして使用する方法
(new)with-neo4j	Neo4jは、データだけでなく、データの関係性を活用するために一から構築されたネイティブのグラフデータベースです。
(new)with-redis	Redisは、Key-Value型 の NoSQLデータベースです。
with-mongodb-mongoose	MongoDB
with-realm-web	MongoDBRealmWebSDK

コンポーネント関連
with-carbon-components	IBM's carbon-components-react

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

storybook関連
(new)with-storybook-styled-jsx-scss	このサンプルはStorybookでレンダリングされTypeScriptで記述されたコンポーネントStyled-jsx（SCSSを使用）の使用例です。
with-storybook	UIコンポーネントを開発するためのオープンソースツール

検索関連
with-algolia-react-instantsearch	検索の実装と検索の分析

監視関連
with-sentry	アプリケーション監視プラットフォーム

リッチテキスト関連
with-draft-js	RichTextEditorFrameworkforReact
with-quill-js	powerfulrichtexteditor
with-slate	リッチテキストThisiseditablerichtext

認証関連
(new)with-clerk	（認証）Clerkの使用方法。Next.jsアプリに数分でサインアップ、サインイン、プロフィール管理を追加出来る事を特徴としています。
auth0	（公式）（認証）（有料有り）認証サポートを簡単に追加する方法
with-cookie-auth-fauna	（認証）（有料有り）ユーザーを認証し、トークンを安全な（JS以外の）Cookieに格納します。
with-iron-session	（公式）（認証）署名および暗号化されたCookieを使用してセッションデータを格納する認証システムを作成
with-magic	（公式）（認証）（有料有り）Magic電子メールベースのマジックリンクを使用した、Cookieベースのパスワードなし認証を特徴としています。
with-next-auth	（公式）（認証）オープンソースで使いやすく、デフォルトで安全な認証ライブラリを備えたnext-authを使用
with-passport-and-next-connect	（認証）Passport.jsでnext-connectおよびcookieベースの認証を使用して、基本的なCRUDアプリを作成します。
with-passport	（認証）ユーザー名とパスワードを使用したCookieベースの認証
with-userbase	（公式）（認証）（有料有り）Userbaseユーザーアカウントとデータの永続性を静的サイトに追加する最も簡単な方法です

CSS関連 tailwindcss編
with-tailwindcss-emotion	tailwindCSS
with-tailwindcss	（公式）tailwindCSS

CSS関連 styled-jsx編
(new)with-styled-jsx	Next.jsにはstyled-jsxが付属しており、CSSを完全にサポートするスコープ付きスタイルのコンポーネントを作成できます。
with-styled-jsx-plugins	CSS styled-jsxプラグインを使用
with-styled-jsx-scss	PostCSS、SASS（SCSS）、LESS、またはstyled-jsxを備えたその他のプリプロセッサを使用できます。

CSS関連 その他
(new)with-cssed	CSS-in-JSlibraryであるcssedの使用例
(new)with-react-md-typescript	このサンプルではreactのマテリアルデザイン、Next.js、およびTypescriptアプリをセットアップします。
(new)with-reactstrap	reactstrapをNext.jsで使用する方法。reactstrapはBootstrap4のステートレスreactコンポーネント。
with-aphrodite	（公式）CSS in JS aphroditeを使用したアプリの使用例
with-astroturf	CSS in JS stroturfを使用したアプリの使用例
with-cxs	（公式）CSS in JS minimal CSS in JS cxsを使用したアプリの使用例
with-emotion	CSS in JS SSR中にサーバーデータを直接Next.jsページに渡す
with-fela	（公式）CSS in JS
with-filbert	CSS in JSソリューション（フレームワーク）filbert-jsでNext.jsを使用する
with-glamor	（公式）CSS in JS CSS関連スタイリングソリューションの使用方法
with-goober	小さなcss-in-js
with-linaria	CSS linariaを使用したアプリの使用例
with-next-css	CSSモジュールサポートの使用方法
with-next-less	CSS Next.js + Less
with-next-sass	Sass/Scssモジュールサポートの使用方法
with-rbx-bulma-pro	Bulma is simply a collection of CSSclasses.
with-react-bootstrap	react-bootstrap react用に再構築されたbootstrap
with-react-jss	JSSはCSSのオーサリングツール
with-react-md	（紹介ページが消えている、V2になってページが移動した？）SCSSreact-md (React Material Design)
with-react-with-styles	CSS in JS
with-semantic-ui	CSSフレームワーク Semantic UI Reactと一緒にNext.jsを利用する方法
with-stitches	CSS in JS
with-style-sheet	CSS in JSlibrarystyle-sheet
with-styled-components-rtl	右から左にすると、サイト内のすべての要素を「反転」して、右から左に読む文化（たとえば、アラビア語）のニーズに合わせることができます。
with-styled-components	（公式）CSS in JS CSSstyled-components
with-styletron	（公式）CSS in JSスタイルソリューション
with-typescript-styled-components	StyledComponentsとTypeScriptの使用例。CSS in JSの中で最も人気のあるライブラリ
with-typestyle	CSSスタイルソリューションを使用する方法

状態管理redux関連
with-redux-code-splitting	Redux関連
with-redux-observable	Redux関連
with-redux-persist	Redux関連
with-redux-saga	Redux関連
with-redux-thunk	Redux関連
with-redux-toolkit	Redux関連
with-redux-wrapper	Redux関連
with-redux	Redux関連
with-rematch	このサンプルには2つのページがあります。最初のページには、同期的または非同期的にインクリメントできるカウンタがあります。2番目のページはgithubユーザーのリストを表示するページです。このエンドポイントを使ってgithub APIからデータを取得します。 rematchはreduxを使ったユーティリティなので、store.jsやwithRematchのような要素はwith-reduxの使用例と非常に似ています。redux が nextjs とどのように統合されているかをよく知らない方は、ここで with-reduxの使用例を見てから読んでください。RematchはReduxの拡張機能に過ぎないので、多くの要素は同じです。

状態管理その他
(new)with-zustand	React向け軽量ステート管理ライブラリの使用例
with-kea	状態管理フレームワーク
with-mobx-react-lite	状態管理
with-mobx-state-tree-typescript	状態管理
with-mobx-state-tree	状態管理
with-mobx	状態管理アプリのグローバルな状態を取得したい場合
with-overmind	状態管理
with-recoil	状態管理ライブラリ
with-unstated	unstated-nextReact状態管理ライブラリ

amp関連
amp-first	AMPファーストサイトのボイラープレートを設定
amp-story	Next.jsとAMP機能を使用してamp-storyを含むAMPページを作成する方法
amp	（公式）Next.jsとAMP機能を使用してAMPページを作成する方法

国際化
(new)i18n-routing	Next.js ver10.0から国際化が組み込まれました。https://nextjs.org/docs/advanced-features/i18n-routing
with-i18n-rosetta	汎用国際化ライブラリ
with-lingui	LinguiJS-JavaScriptでのシームレスな国際化
with-next-i18next	i18nextに基づく国際化をnext.jsアプリケーションに追加する最も簡単な方法
with-next-translate	next-translate Next.jsページを翻訳するためのツールです。
with-react-intl	FormatJSクライアントとサーバーでWebアプリを国際化します。

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

テスト関連
with-jest	テスト
with-mocha	テスト
with-tesfy	A/Bテストと機能フラグ

システム関連 webpack bundle babel
analyze-bundles	@next/bundle-analyzerの使い方
with-babel-macros	babel-plugin-macrosは、ユーザーがビルドシステムにbabelプラグインを追加することなくコンパイル時のコード変換を使用するライブラリの標準インターフェイスを定義します
with-custom-babel-config	カスタムBabel構成の使用例
with-webpack-bundle-size-analyzer	Webpackバンドルのサイズに寄与しているものを見つけるのに役立つ小さなユーティリティ。

cms関連
(new)cms-kontent	Next.jsとKontentを使用して静的に生成されたブログの使用例
blog-starter-typescript	Next.js、Markdown、TypeScriptを使用して静的に生成されたブログの使用例
blog-starter	（公式）Next.jsとMarkdownを使用して静的に生成されたブログの使用例
cms-agilitycms	AgilityCMS
cms-buttercms	ButterCMS
cms-contentful	（公式）Contentful
cms-cosmic	Cosmic
cms-datocms	（公式）DatoCMS
cms-graphcms	GraphCMS
cms-prismic	（公式）Prismic
cms-sanity	（公式）Sanity
cms-storyblok	Storyblok
cms-strapi	（公式）Strapi
cms-takeshape	（公式）TakeShape
cms-wordpress	（公式）WordPress
with-netlify-cms	Gitワークフロー用のオープンソースのコンテンツ管理システム

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

mdx関連
(new)with-mdx-remote	next-mdx-remoteライブラリを使用して簡単なブログを構築する方法
with-mdx	next.jsアプリのトップレベルページとしてMDXを使用する方法

google関連
(new)with-google-tag-manager	Googleタグマネージャーを使用したアプリの使用例
with-google-analytics-amp	AMPと組み合わせてGoogleアナリティクスとともにNext.jsを使用する方法
with-google-analytics	GoogleアナリティクスとともにNext.jsを使用する方法
with-react-ga	react-ga React Google Analytics Module

preact関連
using-preact	高速で小型のReactと言われるpreactを使用する例

サイトマップ関連
(new)with-next-sitemap	next-sitemapを使用してすべてのページ（すべての事前レンダリング/静的ページを含む）のサイトマップファイルを生成する使用例
(new)with-sitemap	Next.jsアプリのページに基づいてファイルを生成する方法

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

docker関連
with-docker	実行時にDockerアプリケーションのカスタム環境変数を設定する方法

画像関連
(new)image-component	Next.js の Image Componentを使用して、最適化されたレスポンシブ画像を提供する方法
(new)with-unsplash	自由に使用できる画像のインターネットソース。
svg-components	.babelrcを使用して、.svgファイルをインポートし、それらをReactコンポーネントとしてレンダリングするためのサポートを追加します。
with-three-js	threejsはWebGL レンダラを持つ軽量な 3D ライブラリ。このライブラリには Canvas 2D、SVG、CSS3Dのレンダラーも用意されています。

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

アニメーション関連
(new)with-gsap	gsapはアニメーションライブラリです。
with-framer-motion	motionはオープンソースで本番環境に対応したモーションWeb上のReact用のライブラリ

moved、removed、非推奨、廃止
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-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に移動しました。

古い、数年更新がない
with-reflux	古い SSR中にサーバーデータをNext.jsページに直接渡す

その他
(new)with-facebook-pixel	Facebook Pixelの使用例
(new)with-mqtt-js	Next.jsでMQTT.jsを使用する方法 MQTT.jsは、node.jsおよびブラウザー用のJavaScriptで記述されたMQTTプロトコルのクライアントライブラリです。
(new)with-msw	Mock Service Workerは、ブラウザとノード用のAPIモックライブラリです。
(new)with-paste-typescript	Pasteは、Twilioでアクセス可能で、まとまりのある、高品質のカスタマーエクスペリエンスを構築するために使用される設計システムです。Pasteは、Sketch and Reactで顧客のUIを構築するのに役立つツールとアセットで製品デザイナーとエンジニアをサポートします。
(new)with-portals-ssr	ポータルは、親コンポーネントのDOM階層の外側に存在するDOMノードに子をレンダリングするためのファーストクラスの方法を提供します。
(new)with-portals	ポータルは、親コンポーネントのDOM階層の外側に存在するDOMノードに子をレンダリングするためのファーストクラスの方法を提供します。
(new)with-service-worker	ServiceWorkerをNext.jsアプリケーションに追加する方法
with-cerebral	一般的なJavaScriptフレームワーク用の宣言型の状態および副作用管理ソリューション
with-custom-reverse-proxy	リバースプロキシの使用例
with-expo-typescript	Next.js、Expo、およびTypeScriptを使用してユニバーサルReactアプリを作成するためのスタータープロジェクトです。
with-expo	Next.jsとExpoを使用してユニバーサルReactアプリを作成するためのスタータープロジェクトです。
with-flow	Flow静的型チェッカーFlowを使用したアプリの使用例 flowはJavaScriptの静的タイプチェッカーです。
with-monaco-editor	モナコエディタは VS Codeを動かすコードエディタです。
with-next-offline	next-offlineプラグインの使用方法
with-next-seo	Next.jsでSEOを管理するのに役立つプラグインであるnext-seoを統合する方法
with-orbit-components	Orbitは、Kiwi.comの特定のニーズに合わせて作成されたオープンソースのデザインシステムで、旅行プロジェクトのニーズにも対応しています。
with-polyfills	ポリフィルを使用したアプリの使用例 警告：このサンプルは、ポリフィルを追加するための推奨される方法ではなく、バンドルで問題を引き起こすことが知られています。
with-react-multi-carousel	react-multi-carouselは、外部依存関係のない複数のアイテムをサポートするサーバー側でレンダリングするカルーセルを提供するReactコンポーネントです。
with-react-native-web	react-native-webを使用して、プラットフォームに依存しないReactNativeのコンポーネントとAPIをWebに取り込む方法
with-react-toolbox	React Toolbox 2.0以降を使用してください。
with-reasonml-todo	ReasonMLおよびReasonReactコンポーネントを使用したサンプルアプリ
with-reasonml	ReasonMLおよびReasonReactコンポーネントを使用したサンプルアプリ
with-route-as-modal	多くの人気のソーシャルメディアでは、投稿を開くとURLが更新されますが、ナビゲーションはトリガーされず、代わりにモーダル内にコンテンツが表示されます。この動作により、ユーザーは現在のUIコンテキスト（スクロール位置）を失うことはありません。URLは引き続き投稿の実際のページの場所を反映しており、更新するとユーザーはそこに移動します。この動作により、SEOを無視することなく優れたUXが保証されます。 このサンプルは、ルートに基づいてモーダルを条件付きで表示する方法。
with-segment-analytics	分析機能を備えたアプリの使用例
with-stencil	ステンシルは、Webコンポーネント（より具体的にはカスタム要素）を生成するコンパイラです。ステンシルは、最も人気のあるフレームワークの最高の概念をシンプルなビルドタイムツールに組み合わせています。
with-stomp	Next.jsアプリケーション内でSTOMPを使用する方法。STOMPは、単純なテキスト指向のメッセージングプロトコルです。
with-strict-csp	スクリプトハッシュを生成する厳密なCSPを使用したアプリの使用例
with-stripe-typescript	TypeScriptとreact-stripe-jsでStripeを使用した使用例。 Stripe はインターネットビジネスのための決済プラットフォームです。
with-web-worker	worker-pluginを利用してWebWorkersでコードを実行する方法
with-webassembly	WebAssemblyの使用例
with-why-did-you-render	why-did-you-renderの簡単な使用方法。
with-xstate	XStateをNext.jsに統合する方法。 JavaScriptとTypeScriptの有限状態マシンと最新のWeb用のステートチャート。
with-yarn-workspaces	ワークスペースはパッケージアーキテクチャを設定する新しい方法で、Yarn 1.0 からデフォルトで利用可能です。これにより、複数のパッケージを設定することができ、yarn install を一度だけ実行して、すべてのパッケージを一度にインストールすることができます。
with-zeit-fetch	Next.jsアプリケーションで@zeit/fetchを使用する方法

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

examples集を試すにはpnpm を推奨

pnpm はnpmやyarnと同等のパッケージ管理ツールです。
これは複数のプロジェクトに同じモジュールの同じバージョンをインストールする場合二重インストールしません。
そのためインストールの高速化とディスク使用容量の効率化が望めます。

下記の「Yarn workspace機能」で色々いじるよりも楽にインストール出来るはずです。

pnpm Fast, disk space efficient package manager
https://pnpm.js.org/

参考
npmとyarnとpnpmの違い2021
https://zenn.dev/hibikine/articles/27621a7f95e761

npm v7で、npmでも workspaces が使えるようになりました。

npmとyarnでは対応していてもpnpmには標準対応していない場合があります。

追記 2021年5月25日
Yarn v2 で似たような機能があります。
Yarn v2 はインストールするのではなく Yarn v1 からインストールして使います。
追記終了

追記 2021年4月14日
pnpmはサンプルを試すのには良いですが、対応していないモジュールもあるので開発、本番環境では使わないようにしましょう。
storybook等対応していないものがあります。
追記終了

Yarn workspace機能で2個目以降のインストール時間を短縮

前提

複数のサンプルを試したい場合に、一つ一つインストールしていくと非常に時間がかかってしまいます。どうにか時間を短縮したいという場合。

• 問題点
  サンプルによっては正常に動かないものがあります。
  認証系など外部に頼るものをインストールした時。
  他には、数百個同時にインストールをした時。
  どちらも解決方法は不明です。

もしエラーが出た場合
そのexampleのREAD.MEを読んでみましょう。
npm install or yarnという単純なインストール方法でない可能性が高いです。

• 使用する機能
  Yarn workspace
  ワークスペース | Yarn ← 詳細はこちらを御覧ください。

Yarn workspace機能を利用してリポジトリを一元管理します。

準備＆初期設定

まずはNext.jsリポジトリの中にあるexamples/を取得します。

公式Next.jsリポジトリから
git clone https://github.com/vercel/next.js.git
Next.jsの公式リポジトリからNext.js本体をgit cloneします。
もしくはgithubのDownload ZIP機能でローカルフォルダに保存します。

git cloneした、もしくはダウンロードしたzipファイルを解凍したフォルダの中にexamples/フォルダがありますので取り出します。

[nextjs-examples]というexamplesを管理するフォルダを作ってこの中に保存します。
（ []内の名前は自由に変更可能です。）

現在のフォルダ構造

[nextjs-examples]/
　　└ examples/
　　　　├ [exampleA]/
　　　　├ [exampleB]/
　　　　└ [exampleC]/

[nextjs-examples]/はルートフォルダになります。

[nextjs-examples]/をVSCodeで開きます。
ターミナルから
yarn init --yes --private
を実行します。

package.jsonが出来ます。

package.json

{
  "name": "nextjs-examples",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "private": true
}

※privateはtrueにする必要があります。

現在のフォルダ構造

[nextjs-examples]/
　　├ examples/
　　│　　　├ [exampleA]/
　　│　　　├ [exampleB]/
　　│　　　└ [exampleC]/
　　├ node_modules/
　　└ package.json
　　└ yarn.lock

最初の一つをインストールする

まずは、examplesの中でNext.jsを初めて触るのに手頃な「basic-export」をインストールしてみます。

package.jsonを開きます。
"workspaces"を追記して、その中に
インストールする"examples/basic-export"を書きます。

package.json

{
  "name": "nextjs-examples",
  "version": "0.1.0",
  "main": "index.js",
  "license": "MIT",
  "private": true,
  "workspaces": [
    "examples/basic-export"
  ]
}

インストールするexampleを決めたらルートでyarnもしくはyarn installを実行します。
最初なので数分かかると思います。

インストール完了後に、

cd examples/basic-export
yarn dev
これでbasic-exportがサーバーで起動し、

http://localhost:3000/で実行されているのが確認できます。

サーバーの起動を停止して(Ctrl+C)
次のサンプルをインストールしてみます。

cd ../..
(ルート[nextjs-examples]/)
に戻ります。

examplesの「basic-css」と「dynamic-routing」の2つを追加してみます。

package.json

{
  "name": "nextjs-examples",
  "version": "0.2.0",
  "main": "index.js",
  "license": "MIT",
  "private": true,
  "workspaces": [
    "examples/basic-export",
    "examples/basic-css",
    "examples/dynamic-routing"
  ]
}

ルートフォルダに戻り
(ルート[nextjs-examples]/)
yarn or yarn install を実行してみます。

Done in 6.78s.でインストールが完了しました、早いですね。

それぞれのサブフォルダに移動してyarn devを実行してみます。
3つとも動くのが確認できました。

では次に、「Next.jsの基礎1易しい」を全部インストールしてみましょう。

package.json

{
  "name": "nextjs-examples",
  "version": "0.3.0",
  "main": "index.js",
  "license": "MIT",
  "private": true,
  "workspaces": [
    "examples/basic-export",
    "examples/basic-css",
    "examples/dynamic-routing",
    "examples/environment-variables",
    "examples/head-elements",
    "examples/hello-world",
    "examples/layout-component",
    "examples/nested-components",
    "examples/using-router",
    "examples/with-app-layout",
    "examples/with-loading"
  ]
}

ルートフォルダに戻り ([nextjs-examples]/)
yarn or yarn install を実行してみます。
Done in 3.71s.でインストールが完了しました。
インストールするものがほぼありませんので一瞬で終わりましたね。

全部の動作確認はしていませんが、
エラーなども特に出ていないので、
一気にNext.jsの基礎2普通を全部インストールしてみましょう。

package.json

{
  "name": "nextjs-examples",
  "version": "0.4.0",
  "main": "index.js",
  "license": "MIT",
  "private": true,
  "workspaces": [
    "examples/basic-export",
    "examples/basic-css",
    "examples/dynamic-routing",
    "examples/environment-variables",
    "examples/head-elements",
    "examples/hello-world",
    "examples/layout-component",
    "examples/nested-components",
    "examples/using-router",
    "examples/with-app-layout",
    "examples/with-loading",
    "examples/active-class-name",
    "examples/catch-all-routes",
    "examples/data-fetch",
    "examples/gh-pages",
    "examples/progressive-render",
    "examples/ssr-caching",
    "examples/with-absolute-imports",
    "examples/with-context-api",
    "examples/with-dynamic-app-layout",
    "examples/with-dynamic-import",
    "examples/with-env-from-next-config-js",
    "examples/with-http2",
    "examples/with-next-page-transitions",
    "examples/with-prefetching",
    "examples/with-react-helmet",
    "examples/with-shallow-routing",
    "examples/with-static-export",
    "examples/with-typescript-eslint-jest",
    "examples/with-typescript-types",
    "examples/with-typescript",
    "examples/with-zones"
  ]
}

Done in 165.56s.でインストールが完了しました
「typescript」等が追加されているので少し時間がかかりました。

14個ものexampleを追加インストールしたのに、こんな短時間でインストールが完了しました。
このようにyarn workspaces機能を使うことで最初の一個以外残りはほぼ時間をかけることなくインストールが出来ました。

追記用全リスト

Next.jsの基礎2普通
"examples/active-class-name",
"examples/catch-all-routes",
"examples/data-fetch",
"examples/gh-pages",
"examples/progressive-render",
"examples/ssr-caching",
"examples/with-absolute-imports",
"examples/with-context-api",
"examples/with-dynamic-app-layout",
"examples/with-dynamic-import",
"examples/with-env-from-next-config-js",
"examples/with-http2
"examples/with-next-page-transitions",
"examples/with-prefetching",
"examples/with-react-helmet",
"examples/with-shallow-routing",
"examples/with-static-export",
"examples/with-typescript-eslint-jest",
"examples/with-typescript-types",
"examples/with-typescript",
"examples/with-zones"

Next.jsの基礎3 2021年1月版追加分
"examples/fast-refresh-demo",
"examples/redirects",
"examples/rewrites"

pwa関連
"examples/progressive-web-app"

UI関連 ant
"examples/with-ant-design-less",
"examples/with-ant-design-mobile",
"examples/with-ant-design-pro-layout-less",
"examples/with-ant-design"

UI関連 その他
"examples/with-chakra-ui-typescript",
"examples/with-ionic-typescript",
"examples/with-mdbreact",
"examples/with-atlaskit",
"examples/with-chakra-ui",
"examples/with-grommet",
"examples/with-material-ui",
"examples/with-patternfly",
"examples/with-rebass"

Firebase関連
"examples/with-supabase-auth-realtime-db",
"examples/with-firebase-authentication",
"examples/with-firebase-cloud-messaging",
"examples/with-firebase-hosting",
"examples/with-firebase"

API Routes編
"examples/api-routes-cors",
"examples/api-routes-middleware",
"examples/api-routes-rest",
"examples/api-routes"

API Routes編 GraphQL関連
"examples/api-routes-graphql",
"examples/with-graphql-faunadb",
"examples/with-graphql-hooks",
"examples/with-graphql-react",
"examples/with-react-relay-network-modern",
"examples/with-reason-relay",
"examples/with-relay-modern",
"examples/with-typescript-graphql",
"examples/with-urql"

API Routes編 apollo関連
"examples/api-routes-rate-limit",
"examples/with-apollo-neo4j-graphql",
"examples/api-routes-apollo-server-and-client-auth",
"examples/api-routes-apollo-server-and-client",
"examples/api-routes-apollo-server",
"examples/with-apollo-and-redux",
"examples/with-apollo"

DB関連 prisma編
"examples/with-prisma"

DB関連 mysql編
"examples/with-mysql"

DB関連 その他
"examples/with-deta-base",
"examples/with-knex",
"examples/with-mongodb",
"examples/with-neo4j",
"examples/with-redis",
"examples/with-mongodb-mongoose",
"examples/with-realm-web"

コンポーネント関連
"examples/with-carbon-components",
server関連
"examples/custom-server-actionhero",
"examples/custom-server-express",
"examples/custom-server-fastify",
"examples/custom-server-hapi",
"examples/custom-server-koa",
"examples/custom-server-polka",
"examples/custom-server-typescript",
"examples/custom-server"

storybook関連
"examples/with-storybook-styled-jsx-scss",
"examples/with-storybook"

検索関連
"examples/with-algolia-react-instantsearch"

監視関連
"examples/with-sentry"

リッチテキスト関連
"examples/with-draft-js",
"examples/with-quill-js",
"examples/with-slate"

認証関連
"examples/auth0
"examples/with-cookie-auth-fauna",
"examples/with-iron-session",
"examples/with-magic",
"examples/with-next-auth",
"examples/with-passport-and-next-connect",
"examples/with-passport",
"examples/with-userbase"

CSS関連 tailwindcss編
"examples/with-tailwindcss-emotion",
"examples/with-tailwindcss"

CSS関連 styled-jsx編
"examples/with-styled-jsx",
"examples/with-styled-jsx-plugins",
"examples/with-styled-jsx-scss"

CSS関連 その他
"examples/with-cssed",
"examples/with-react-md-typescript",
"examples/with-reactstrap",
"examples/with-aphrodite",
"examples/with-astroturf",
"examples/with-cxs",
"examples/with-emotion",
"examples/with-fela",
"examples/with-filbert",
"examples/with-glamor",
"examples/with-goober",
"examples/with-linaria",
"examples/with-next-css",
"examples/with-next-less",
"examples/with-next-sass",
"examples/with-rbx-bulma-pro",
"examples/with-react-bootstrap",
"examples/with-react-jss",
"examples/with-react-md",
"examples/with-react-with-styles",
"examples/with-semantic-ui",
"examples/with-stitches",
"examples/with-style-sheet",
"examples/with-styled-components-rtl",
"examples/with-styled-components",
"examples/with-styletron",
"examples/with-typescript-styled-components",
"examples/with-typestyle"

状態管理 redux関連
"examples/with-redux-code-splitting",
"examples/with-redux-observable",
"examples/with-redux-persist",
"examples/with-redux-saga",
"examples/with-redux-thunk",
"examples/with-redux-toolkit",
"examples/with-redux-wrapper",
"examples/with-redux",
"examples/with-rematch"

状態管理 その他
"examples/with-zustand",
"examples/with-kea",
"examples/with-mobx-react-lite",
"examples/with-mobx-state-tree-typescript",
"examples/with-mobx-state-tree",
"examples/with-mobx",
"examples/with-overmind",
"examples/with-recoil",
"examples/with-unstated"

amp関連
"examples/amp-first",
"examples/amp-story",
"examples/amp"

国際化
"examples/i18n-routing",
"examples/with-i18n-rosetta",
"examples/with-lingui",
"examples/with-next-i18next",
"examples/with-next-translate",
"examples/with-react-intl"

AWS関連
"examples/with-aws-amplify-typescript",
"examples/with-aws-amplify"

テスト関連
"examples/with-jest",
"examples/with-mocha",
"examples/with-tesfy"

システム関連 webpack bundle babel",
"examples/analyze-bundles",
"examples/with-babel-macros",
"examples/with-custom-babel-config",
"examples/with-webpack-bundle-size-analyzer"

cms関連
"examples/cms-kontent",
"examples/blog-starter-typescript",
"examples/blog-starter",
"examples/cms-agilitycms",
"examples/cms-buttercms",
"examples/cms-contentful",
"examples/cms-cosmic",
"examples/cms-datocms",
"examples/cms-graphcms",
"examples/cms-prismic",
"examples/cms-sanity",
"examples/cms-storyblok",
"examples/cms-strapi",
"examples/cms-takeshape",
"examples/cms-wordpress",
"examples/with-netlify-cms"

デスクトップアプリケーション関連
"examples/with-electron-typescript",
"examples/with-electron"

mdx関連
"examples/with-mdx-remote",
"examples/with-mdx"

google関連
"examples/with-google-tag-manager",
"examples/with-google-analytics-amp",
"examples/with-google-analytics",
"examples/with-react-ga"

preact関連
"examples/using-preact"

サイトマップ関連
"examples/with-next-sitemap",
"examples/with-sitemap"

既存プロジェクトからの移行関連
"examples/custom-routes-proxying"

docker関連
"examples/with-docker"

画像関連
"examples/image-component",
"examples/with-unsplash",
"examples/svg-components",
"examples/with-three-js"

動画関連
"examples/with-hls-js",
"examples/with-mux-video",
"examples/with-videojs"

アニメーション関連
"examples/with-gsap",
"examples/with-framer-motion"

moved、removed、非推奨、廃止
"examples/page-transitions",
"examples/parameterized-routing",
"examples/with-cookie-auth",
"examples/with-dotenv",
"examples/with-firebase-authentication-serverless",
"examples/with-glamorous",
"examples/with-global-stylesheet-simple",
"examples/with-global-stylesheet",
"examples/with-markdown",
"examples/with-next-routes",
"examples/with-now-env",
"examples/with-pretty-url-routing",
"examples/with-sentry-simple",
"examples/with-strict-csp-hash",
"examples/with-styled-jsx-postcss",
"examples/with-sw-precache",
"examples/with-universal-configuration-build-time",
"examples/with-universal-configuration-runtime",
"examples/with-webpack-bundle-analyzer"

古い、数年更新がない
"examples/with-reflux"

その他
"examples/with-facebook-pixel",
"examples/with-mqtt-js",
"examples/with-msw",
"examples/with-paste-typescript",
"examples/with-portals-ssr",
"examples/with-portals",
"examples/with-service-worker",
"examples/with-cerebral",
"examples/with-custom-reverse-proxy",
"examples/with-expo-typescript",
"examples/with-expo",
"examples/with-flow",
"examples/with-monaco-editor",
"examples/with-next-offline",
"examples/with-next-seo",
"examples/with-orbit-components",
"examples/with-polyfills",
"examples/with-react-multi-carousel",
"examples/with-react-native-web",
"examples/with-react-toolbox",
"examples/with-reasonml-todo",
"examples/with-reasonml",
"examples/with-route-as-modal",
"examples/with-segment-analytics",
"examples/with-stencil",
"examples/with-stomp",
"examples/with-strict-csp",
"examples/with-stripe-typescript",
"examples/with-web-worker",
"examples/with-webassembly",
"examples/with-why-did-you-render",
"examples/with-xstate",
"examples/with-yarn-workspaces",
"examples/with-zeit-fetch"