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

# 更新履歴
[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/tree/canary/examples)は[前回(2020年7月版)](https://qiita.com/masakinihirota/items/39888f37000f0d17111b)から34本増えて合計268本あります。新たに追加されたサンプルには(new)がついています。（2021/01/10）
しかし、このままではどれを見たらいいのかわからないので主観で分類してみました。

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

※今回の更新で一番目についたのは[with-mysql](https://github.com/vercel/next.js/tree/canary/examples/with-mysql)で、その他DB関連も多く追加されています。

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

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

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

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

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

|pwa関連| |
|---|---|
|[(new)progressive-web-app](https://github.com/vercel/next.js/tree/canary/examples/progressive-web-app)|next-pwaを使用して、Workboxを利用したプログレッシブウェブアプリ（PWA）を作成します。|

|UI関連 ant| |
|---|---|
|[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-ant-design](https://github.com/vercel/next.js/tree/canary/examples/with-ant-design)|Ant Design of ReactとともにNext.jsを使用する方法|

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

|Firebase関連| |
|---|---|
|[(new)with-supabase-auth-realtime-db](https://github.com/vercel/next.js/tree/canary/examples/with-supabase-auth-realtime-db)|[（公式）](https://nextjs.org/docs/authentication) Supabaseは、Firebaseのオープンソースの代替手段です。|
|[with-firebase-authentication](https://github.com/vercel/next.js/tree/canary/examples/with-firebase-authentication)|[（公式）](https://nextjs.org/docs/authentication)（認証）サーバーレスAPIを使用したFirebase認証の使用例|
|[with-firebase-cloud-messaging](https://github.com/vercel/next.js/tree/canary/examples/with-firebase-cloud-messaging)|FirebaseCloudMessagingの使用例|
|[with-firebase-hosting](https://github.com/vercel/next.js/tree/canary/examples/with-firebase-hosting)|Firebaseホスティングの使用例|
|[with-firebase](https://github.com/vercel/next.js/tree/canary/examples/with-firebase)|クライアントサイドアプリケーション用のFirebaseの簡単な設定です。|

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

|API Routes編 GraphQL関連| |
|---|---|
|[api-routes-graphql](https://github.com/vercel/next.js/tree/canary/examples/api-routes-graphql)|（公式）GraphQL Server apollo-server-micro|
|[with-graphql-faunadb](https://github.com/vercel/next.js/tree/canary/examples/with-graphql-faunadb)|FaunaDBGraphqlスターターの使用例-FaunaDBゲストブック|
|[with-graphql-hooks](https://github.com/vercel/next.js/tree/canary/examples/with-graphql-hooks)|GraphQLフックの使用例。GraphQL Hooksは、最小限のフック優先のGraphQLクライアントになることを目的としたNearFormのライブラリです。|
|[with-graphql-react](https://github.com/vercel/next.js/tree/canary/examples/with-graphql-react)|graphql-react最新のコンテキストを使用したReactのGraphQLクライアント|
|[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-reason-relay](https://github.com/vercel/next.js/tree/canary/examples/with-reason-relay)|GraphQL backend|
|[with-relay-modern](https://github.com/vercel/next.js/tree/canary/examples/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](https://github.com/vercel/next.js/tree/canary/examples/with-typescript-graphql)|GraphQLとtypescriptの使用例|
|[with-urql](https://github.com/vercel/next.js/tree/canary/examples/with-urql)|高度にカスタマイズ可能で用途の広いGraphQLクライアント|

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

|DB関連 prisma編| |
|---|---|
|[with-prisma](https://github.com/vercel/next.js/tree/canary/examples/with-prisma)|Node.jsおよびTypeScript用の次世代ORM|

|DB関連 mysql編| |
|---|---|
|[(new)with-mysql](https://github.com/vercel/next.js/tree/canary/examples/with-mysql)| Next.jsプロジェクトでMySQLを使用する例|

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

|コンポーネント関連| |
|---|---|
|[with-carbon-components](https://github.com/vercel/next.js/tree/canary/examples/with-carbon-components)|IBM's carbon-components-react|

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

|storybook関連| |
|---|---|
|[(new)with-storybook-styled-jsx-scss](https://github.com/vercel/next.js/tree/canary/examples/with-storybook-styled-jsx-scss)|このサンプルはStorybookでレンダリングされTypeScriptで記述されたコンポーネントStyled-jsx（SCSSを使用）の使用例です。|
|[with-storybook](https://github.com/vercel/next.js/tree/canary/examples/with-storybook)|UIコンポーネントを開発するためのオープンソースツール|

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

|監視関連| |
|---|---|
|[with-sentry](https://github.com/vercel/next.js/tree/canary/examples/with-sentry)|アプリケーション監視プラットフォーム|

|リッチテキスト関連| |
|---|---|
|[with-draft-js](https://github.com/vercel/next.js/tree/canary/examples/with-draft-js)|RichTextEditorFrameworkforReact|
|[with-quill-js](https://github.com/vercel/next.js/tree/canary/examples/with-quill-js)|powerfulrichtexteditor|
|[with-slate](https://github.com/vercel/next.js/tree/canary/examples/with-slate)|リッチテキストThisiseditablerichtext|

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

|CSS関連 tailwindcss編| |
|---|---|
|[with-tailwindcss-emotion](https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss-emotion)|tailwindCSS|
|[with-tailwindcss](https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss)|（公式）tailwindCSS|

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

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

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

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

|amp関連| |
|---|---|
|[amp-first](https://github.com/vercel/next.js/tree/canary/examples/amp-first)|AMPファーストサイトのボイラープレートを設定|
|[amp-story](https://github.com/vercel/next.js/tree/canary/examples/amp-story)|Next.jsとAMP機能を使用してamp-storyを含むAMPページを作成する方法|
|[amp](https://github.com/vercel/next.js/tree/canary/examples/amp)|（公式）Next.jsとAMP機能を使用してAMPページを作成する方法|

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

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

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

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

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

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

|mdx関連| |
|---|---|
|[(new)with-mdx-remote](https://github.com/vercel/next.js/tree/canary/examples/with-mdx-remote)|next-mdx-remoteライブラリを使用して簡単なブログを構築する方法|
|[with-mdx](https://github.com/vercel/next.js/tree/canary/examples/with-mdx)|next.jsアプリのトップレベルページとしてMDXを使用する方法|

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

|preact関連| |
|---|---|
|[using-preact](https://github.com/vercel/next.js/tree/canary/examples/using-preact)|高速で小型のReactと言われるpreactを使用する例|

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

|既存プロジェクトからの移行関連| |
|---|---|
|[custom-routes-proxying](https://github.com/vercel/next.js/tree/canary/examples/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](https://github.com/vercel/next.js/tree/canary/examples/with-docker)|実行時にDockerアプリケーションのカスタム環境変数を設定する方法|

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

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

|アニメーション関連| |
|---|---|
|[(new)with-gsap](https://github.com/vercel/next.js/tree/canary/examples/with-gsap)|gsapはアニメーションライブラリです。|
|[with-framer-motion](https://github.com/vercel/next.js/tree/canary/examples/with-framer-motion)| motionはオープンソースで本番環境に対応したモーションWeb上のReact用のライブラリ|

|moved、removed、非推奨、廃止| |
|---|---|
|[page-transitions](https://github.com/vercel/next.js/tree/canary/examples/page-transitions)| （インストール不要）このサンプルは非推奨になり、削除されました。|
|[parameterized-routing](https://github.com/vercel/next.js/tree/canary/examples/parameterized-routing)| （インストール不要）このサンプルは非推奨になり、削除されました。|
|[with-cookie-auth](https://github.com/vercel/next.js/tree/canary/examples/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)| （インストール不要）Next.js9.4からサポートされています。|
|[with-firebase-authentication-serverless](https://github.com/vercel/next.js/tree/canary/examples/with-firebase-authentication-serverless)|（moved）with-firebase-authentication|
|[with-glamorous](https://github.com/vercel/next.js/tree/canary/examples/with-glamorous)| (インストール不要)glamorousは非推奨になり、エモーションが採用されました。|
|[with-global-stylesheet-simple](https://github.com/vercel/next.js/tree/canary/examples/with-global-stylesheet-simple)| (インストール不要)このサンプルは非推奨になりました。代わりにexamples/with-next-cssを使用してください。|
|[with-global-stylesheet](https://github.com/vercel/next.js/tree/canary/examples/with-global-stylesheet)| (インストール不要)このサンプルは非推奨になりました。代わりにexamples/with-next-cssを使用してください。|
|[with-markdown](https://github.com/vercel/next.js/tree/canary/examples/with-markdown)| (インストール不要)Markdownの使い方はcanary/examples/blog-starterを見てください。|
|[with-next-routes](https://github.com/vercel/next.js/tree/canary/examples/with-next-routes)| (インストール不要)動的ルートがデフォルトでサポートされるようになりました|
|[with-now-env ](https://github.com/vercel/next.js/tree/canary/examples/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-sentry-simple](https://github.com/vercel/next.js/tree/canary/examples/with-sentry-simple)| (インストール不要)(moved)with-sentryの方を使用してください。アプリケーション監視プラットフォーム|
|[with-strict-csp-hash](https://github.com/vercel/next.js/tree/canary/examples/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)|(moved) このサンプルは/examples/with-styled-jsx-pluginsに移動しました|
|[with-sw-precache](https://github.com/vercel/next.js/tree/canary/examples/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)| （インストール不要）Next.js9.4以降、環境変数の読み込みを自動的にサポートします。|
|[with-universal-configuration-runtime](https://github.com/vercel/next.js/tree/canary/examples/with-universal-configuration-runtime)| （インストール不要）Next.js9.4以降、環境変数の読み込みを自動的にサポートします。|
|[with-webpack-bundle-analyzer](https://github.com/vercel/next.js/tree/canary/examples/with-webpack-bundle-analyzer)|（moved）このサンプルはanalyze-bundlesに移動しました。|

|古い、数年更新がない| |
|---|---|
|[with-reflux](https://github.com/vercel/next.js/tree/canary/examples/with-reflux)|古い SSR中にサーバーデータをNext.jsページに直接渡す|

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

|前回の調査から削除されたもの| |
|---|---|
|[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)|(実験的) アプリケーションやプロジェクトでは、これらの機能を（まだ）使用しないでください。|

# 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 ← 詳細はこちらを御覧ください。](https://classic.yarnpkg.com/ja/docs/workspaces)

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

## 準備＆初期設定
まずはNext.jsリポジトリの中にある`examples/`を取得します。

[公式Next.jsリポジトリ](https://github.com/vercel/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"