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

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

# はじめに
Next.jsの[公式サンプル](https://github.com/vercel/next.js/tree/canary/examples)は現在236本あります。（2020/07/22）
しかし、このままではどれを見たらいいのかわからないので主観で分類してみました。

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

## 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を使っている|
|[basic-export](https://github.com/vercel/next.js/tree/canary/examples/basic-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普通| |
|---|---|
|[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の背後にある最も基本的なアイデアを示しています。|
|[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-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-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](https://github.com/vercel/next.js/tree/canary/examples/with-typescript)|タイプスクリプトを使って型を適用|
|[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に統合する方法を示しています。|

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

|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関連| |
|---|---|
|[with-firebase](https://github.com/vercel/next.js/tree/canary/examples/with-firebase)|クライアントサイドアプリケーション用のFirebaseの簡単な設定です。|
|[with-firebase-authentication](https://github.com/vercel/next.js/tree/canary/examples/with-firebase-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ホスティングの例|

|API Routes編| |
|---|---|
|[api-routes](https://github.com/vercel/next.js/tree/canary/examples/api-routes)|（公式）基本的なAPIルートの例|
|[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編 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関連| |
|---|---|
|[api-routes-apollo-server](https://github.com/vercel/next.js/tree/canary/examples/api-routes-apollo-server)|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-and-client-auth](https://github.com/vercel/next.js/tree/canary/examples/api-routes-apollo-server-and-client-auth)|ApolloはGraphQLクライアント|
|[with-apollo](https://github.com/vercel/next.js/tree/canary/examples/with-apollo)|ApolloはGraphQLクライアント|
|[with-apollo-and-redux](https://github.com/vercel/next.js/tree/canary/examples/with-apollo-and-redux)|ApolloはGraphQLクライアント|

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

|server関連| |
|---|---|
|[custom-server](https://github.com/vercel/next.js/tree/canary/examples/custom-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ユニバーサルコードに影響を与えずにサーバーコードをライブでリロードする方法|

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

|リッチテキスト関連| |
|---|---|
|[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|

|DB関連| |
|---|---|
|[with-mongodb-mongoose](https://github.com/vercel/next.js/tree/canary/examples/with-mongodb-mongoose)|MongoDB|
|[with-prisma](https://github.com/vercel/next.js/tree/canary/examples/with-prisma)|databasetoolkit|
|[with-realm-web](https://github.com/vercel/next.js/tree/canary/examples/with-realm-web)|MongoDBRealmWebSDK|

|認証関連| |
|---|---|
|[auth0](https://github.com/vercel/next.js/tree/canary/examples/auth0)|（認証）（有料有り）認証サポートを簡単に追加する方法|
|[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)|（認証）署名および暗号化されたCookieを使用してセッションデータを格納する認証システムを作成|
|[with-magic](https://github.com/vercel/next.js/tree/canary/examples/with-magic)|（認証）（有料有り）Magic電子メールベースのマジックリンクを使用した、Cookieベースのパスワードなし認証を特徴としています。|
|[with-next-auth](https://github.com/vercel/next.js/tree/canary/examples/with-next-auth)|（認証）オープンソースで使いやすく、デフォルトで安全な認証ライブラリを備えたnext-authを使用|
|[with-passport](https://github.com/vercel/next.js/tree/canary/examples/with-passport)|（認証）ユーザー名とパスワードを使用したCookieベースの認証|
|[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-userbase](https://github.com/vercel/next.js/tree/canary/examples/with-userbase)|（認証）（有料有り）Userbaseユーザーアカウントとデータの永続性を静的サイトに追加する最も簡単な方法です|

|CSS関連| |
|---|---|
|[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-emotion-11](https://github.com/vercel/next.js/tree/canary/examples/with-emotion-11)|CSS in 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-stitches-styled](https://github.com/vercel/next.js/tree/canary/examples/with-stitches-styled)|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](https://github.com/vercel/next.js/tree/canary/examples/with-styled-components)|（公式）CSS in JS CSSstyled-components|
|[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を備えたその他のプリプロセッサを使用できます。|
|[with-styletron](https://github.com/vercel/next.js/tree/canary/examples/with-styletron)|（公式）CSS in JSスタイルソリューション|
|[with-tailwindcss](https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss)|（公式）tailwindCSS|
|[with-tailwindcss-emotion](https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss-emotion)|tailwindCSS|
|[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](https://github.com/vercel/next.js/tree/canary/examples/with-redux)|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-rematch](https://github.com/vercel/next.js/tree/canary/examples/with-rematch)|Redux関連|

|状態管理その他| |
|---|---|
|[with-kea](https://github.com/vercel/next.js/tree/canary/examples/with-kea)|状態管理フレームワーク|
|[with-mobx](https://github.com/vercel/next.js/tree/canary/examples/with-mobx)|状態管理アプリのグローバルな状態を取得したい場合|
|[with-mobx-react-lite](https://github.com/vercel/next.js/tree/canary/examples/with-mobx-react-lite)|状態管理|
|[with-mobx-state-tree](https://github.com/vercel/next.js/tree/canary/examples/with-mobx-state-tree)|状態管理|
|[with-mobx-state-tree-typescript](https://github.com/vercel/next.js/tree/canary/examples/with-mobx-state-tree-typescript)|状態管理|
|[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](https://github.com/vercel/next.js/tree/canary/examples/amp)|（公式）Next.jsとAMP機能を使用して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ページを作成する方法|

|国際化| |
|---|---|
|[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](https://github.com/vercel/next.js/tree/canary/examples/with-aws-amplify)|AWSAmplifyは、モバイルおよびフロントエンドのウェブデベロッパーがAWSを利用して安全でスケーラブルなフルスタックアプリケーションを構築できるようにするツールとサービスのセットです。|
|[with-aws-amplify-typescript](https://github.com/vercel/next.js/tree/canary/examples/with-aws-amplify-typescript)|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関連| |
|---|---|
|[with-webpack-bundle-size-analyzer](https://github.com/vercel/next.js/tree/canary/examples/with-webpack-bundle-size-analyzer)|Webpackバンドルのサイズに寄与しているものを見つけるのに役立つ小さなユーティリティ。|

|cms関連| |
|---|---|
|[blog-starter](https://github.com/vercel/next.js/tree/canary/examples/blog-starter)|（公式）Next.jsとMarkdownを使用して静的に生成されたブログの例|
|[blog-starter-typescript](https://github.com/vercel/next.js/tree/canary/examples/blog-starter-typescript)|Next.js、Markdown、TypeScriptを使用して静的に生成されたブログの例|
|[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](https://github.com/vercel/next.js/tree/canary/examples/with-electron)|デスクトップアプリケーションElectron application example|
|[with-electron-typescript](https://github.com/vercel/next.js/tree/canary/examples/with-electron-typescript)|デスクトップアプリケーションElectron application example with typescript|

|google関連| |
|---|---|
|[with-google-analytics](https://github.com/vercel/next.js/tree/canary/examples/with-google-analytics)|GoogleアナリティクスとともにNext.jsを使用する方法|
|[with-google-analytics-amp](https://github.com/vercel/next.js/tree/canary/examples/with-google-analytics-amp)|AMPと組み合わせてGoogleアナリティクスとともにNext.jsを使用する方法|
|[with-react-ga](https://github.com/vercel/next.js/tree/canary/examples/with-react-ga)|react-ga React Google Analytics Module|

|実験中| |
|---|---|
|[z-experimental-refresh](https://github.com/vercel/next.js/tree/canary/examples/z-experimental-refresh)|(実験的) アプリケーションやプロジェクトでは、これらの機能を（まだ）使用しないでください。|

|古い、数年更新がない| |
|---|---|
|[with-react-toolbox](https://github.com/vercel/next.js/tree/canary/examples/with-react-toolbox)|古い怪しいリンクに飛ぶ|
|[with-reflux](https://github.com/vercel/next.js/tree/canary/examples/with-reflux)|古いstoreAsimplelibraryforunidirectionaldataflowarchitectureinspiredbyReactJSFlux.|

|moved、removed、非推奨、廃止| |
|---|---|
|[page-transitions](https://github.com/vercel/next.js/tree/canary/examples/page-transitions)|（removed）/examples/with-next-page-transitions|
|[parameterized-routing](https://github.com/vercel/next.js/tree/canary/examples/parameterized-routing)|（removed）examples/dynamic-routing|
|[with-cookie-auth](https://github.com/vercel/next.js/tree/canary/examples/with-cookie-auth)|（非推奨）（認証）|
|[with-dotenv](https://github.com/vercel/next.js/tree/canary/examples/with-dotenv)|（インストール不要）Next.js9.4からサポートされています。|
|[with-expo](https://github.com/vercel/next.js/tree/canary/examples/with-expo)|ExpoユニバーサルReactアプリケーションのプラットフォームNext.jsのサポートは試験的なものです。|
|[with-expo-typescript](https://github.com/vercel/next.js/tree/canary/examples/with-expo-typescript)|ExpoユニバーサルReactアプリケーションのプラットフォームNext.jsのサポートは試験的なものです。|
|[with-firebase-authentication-serverless](https://github.com/vercel/next.js/tree/canary/examples/with-firebase-authentication-serverless)|（moved）with-firebase-authentication|
|[with-flow](https://github.com/vercel/next.js/tree/canary/examples/with-flow)|Flow静的型チェッカーFlowを使用したアプリの例|
|[with-framer-motion](https://github.com/vercel/next.js/tree/canary/examples/with-framer-motion)|プロダクション対応のアニメーションライブラリです。|
|[with-glamorous](https://github.com/vercel/next.js/tree/canary/examples/with-glamorous)|（廃止）代替はemotionを推奨|
|[with-global-stylesheet](https://github.com/vercel/next.js/tree/canary/examples/with-global-stylesheet)|（removed）こちらを利用してくださいexamples/with-next-css|
|[with-global-stylesheet-simple](https://github.com/vercel/next.js/tree/canary/examples/with-global-stylesheet-simple)|（removed）こちらを利用してくださいexamples/with-next-css|
|[with-markdown](https://github.com/vercel/next.js/tree/canary/examples/with-markdown)|（moved）next.js/examples/blog-starter/|
|[with-next-routes](https://github.com/vercel/next.js/tree/canary/examples/with-next-routes)|（インストール不要）Next.jsでサポートされています。|
|[with-now-env](https://github.com/vercel/next.js/tree/canary/examples/with-now-env)|（インストール不要）（公式）Next.js9.4から自動的にサポートします。|
|[with-pretty-url-routing](https://github.com/vercel/next.js/tree/canary/examples/with-pretty-url-routing)|（廃止）Next.jsではデフォルトで動的ルーティングが自動的にサポートします。|
|[with-storybook-typescript](https://github.com/vercel/next.js/tree/canary/examples/with-storybook-typescript)|UIコンポーネントを開発するためのオープンソースツール|
|[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) with-styled-jsx-plugins |
|[with-sw-precache](https://github.com/vercel/next.js/tree/canary/examples/with-sw-precache)|(非推奨)代わりにusingcanary/examples/with-next-offline|
|[with-universal-configuration-build-time](https://github.com/vercel/next.js/tree/canary/examples/with-universal-configuration-build-time)|(removed)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|

|その他| |
|---|---|
|[active-class-name](https://github.com/vercel/next.js/tree/canary/examples/active-class-name)|Linkコンポーネントにプロパティをつけてリンク動的に変更|
|[analyze-bundles](https://github.com/vercel/next.js/tree/canary/examples/analyze-bundles)|@next/bundle-analyzerを使用して出力バンドルを分析する方法|
|[custom-routes-proxying](https://github.com/vercel/next.js/tree/canary/examples/custom-routes-proxying)|カスタムルートプロキシの例|
|[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化されたページをメモリにキャッシュするアプリの例|
|[svg-components](https://github.com/vercel/next.js/tree/canary/examples/svg-components)|svgファイルのインポートおよびReactコンポーネントとしてのレンダリングのサポートを追加します。|
|[using-preact](https://github.com/vercel/next.js/tree/canary/examples/using-preact)|Reactの代わりにPreactを使用|
|[with-absolute-imports](https://github.com/vercel/next.js/tree/canary/examples/with-absolute-imports)|Webpackの構成を変更せずに、相対インポートではなく絶対インポートを持つようにBabelを構成する方法|
|[with-babel-macros](https://github.com/vercel/next.js/tree/canary/examples/with-babel-macros)|babel-macrosを使用したアプリの例単純なコンパイル時ライブラリを構築できます？？？|
|[with-cerebral](https://github.com/vercel/next.js/tree/canary/examples/with-cerebral)|CerebralJSによる宣言的な状態と副作用の管理|
|[with-custom-babel-config](https://github.com/vercel/next.js/tree/canary/examples/with-custom-babel-config)|（公式）カスタムBabel構成の使用|
|[with-custom-reverse-proxy](https://github.com/vercel/next.js/tree/canary/examples/with-custom-reverse-proxy)|リバースプロキシの例|
|[with-docker](https://github.com/vercel/next.js/tree/canary/examples/with-docker)|実行時にdockerアプリケーションのカスタム環境変数を設定する方法|
|[with-dynamic-app-layout](https://github.com/vercel/next.js/tree/canary/examples/with-dynamic-app-layout)|app.jsを使用してページの_dynamicレイアウトを実装する方法|
|[with-hls-js](https://github.com/vercel/next.js/tree/canary/examples/with-hls-js)|HTTPライブストリーミングクライアントを実装するJavaScriptライブラリ|
|[with-http2](https://github.com/vercel/next.js/tree/canary/examples/with-http2)|HTTP2サーバーを使用する最も基本的な例|
|[with-mdx](https://github.com/vercel/next.js/tree/canary/examples/with-mdx)|MDXは Markdownに直接 JSX を挿入できるフォーマット |
|[with-monaco-editor](https://github.com/vercel/next.js/tree/canary/examples/with-monaco-editor)|VSCodeを強化するコードエディター|
|[with-mux-video](https://github.com/vercel/next.js/tree/canary/examples/with-mux-video)|ビデオ用のAPI|
|[with-next-offline](https://github.com/vercel/next.js/tree/canary/examples/with-next-offline)|オフライン機能を簡単に有効化|
|[with-next-seo](https://github.com/vercel/next.js/tree/canary/examples/with-next-seo)|next-seoSEOの管理を簡単にするプラグインです。|
|[with-orbit-components](https://github.com/vercel/next.js/tree/canary/examples/with-orbit-components)|Kiwi.comの製品を構築する最も簡単な方法を開発者に提供するReactコンポーネントライブラリです。|
|[with-polyfills](https://github.com/vercel/next.js/tree/canary/examples/with-polyfills)|ポリフィルとは、最近の機能をサポートしていない古いブラウザーで、その機能を使えるようにするためのコードです。|
|[with-react-helmet](https://github.com/vercel/next.js/tree/canary/examples/with-react-helmet)|react-helmetHeadタグに関する全てを管理|
|[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)|ReactNativeforWeb|
|[with-reasonml](https://github.com/vercel/next.js/tree/canary/examples/with-reasonml)|OCamlツールチェーンReasonを使用すると、JavaScriptとOCamlの両方のエコシステムを活用しながら、シンプルで高速かつ高品質なタイプセーフコードを記述できます。|
|[with-reasonml-todo](https://github.com/vercel/next.js/tree/canary/examples/with-reasonml-todo)|OCaml|
|[with-route-as-modal](https://github.com/vercel/next.js/tree/canary/examples/with-route-as-modal)|モーダルウィンドウ？を条件付きで表示する方法|
|[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コンポーネントおよび高性能Webアプリ用のコンパイラ|
|[with-stomp](https://github.com/vercel/next.js/tree/canary/examples/with-stomp)|テキスト指向メッセージングプロトコル|
|[with-strict-csp](https://github.com/vercel/next.js/tree/canary/examples/with-strict-csp)|Content Security Policy(CSP)厳密なCSP生成スクリプトハッシュを使用したアプリの例|
|[with-stripe-typescript](https://github.com/vercel/next.js/tree/canary/examples/with-stripe-typescript)|stripeオンライン決済|
|[with-styled-components-rtl](https://github.com/vercel/next.js/tree/canary/examples/with-styled-components-rtl)|右から左にすると、サイト内のすべての要素を「反転」して、右から左に読む文化（たとえば、アラビア語）のニーズに合わせることができます。|
|[with-three-js](https://github.com/vercel/next.js/tree/canary/examples/with-three-js)|WebGLレンダラーを備えた軽量の3Dライブラリ|
|[with-videojs](https://github.com/vercel/next.js/tree/canary/examples/with-videojs)|opensource HTML5 player framework|
|[with-web-worker](https://github.com/vercel/next.js/tree/canary/examples/with-web-worker)|worker.jsWebpack内でWebワーカーを自動的にバンドルしてコンパイルします。|
|[with-webassembly](https://github.com/vercel/next.js/tree/canary/examples/with-webassembly)|WebAssemblyRust|
|[with-why-did-you-render](https://github.com/vercel/next.js/tree/canary/examples/with-why-did-you-render)|特定のコンポーネントがいつ、なぜ再レンダリングされるかを簡単に追跡するのにも役立ちます。|
|[with-xstate](https://github.com/vercel/next.js/tree/canary/examples/with-xstate)|ステートマシン|
|[with-yarn-workspaces](https://github.com/vercel/next.js/tree/canary/examples/with-yarn-workspaces)|デフォルトで利用可能なパッケージアーキテクチャをセットアップする新しい方法|
|[with-zeit-fetch](https://github.com/vercel/next.js/tree/canary/examples/with-zeit-fetch)|（Vercel本家）@zeit/fetchの使い方|
|[with-zones](https://github.com/vercel/next.js/tree/canary/examples/with-zones)|（公式）ゾーンとは Next.js アプリケーションの単一のデプロイメントのことです。複数のゾーンを単一のアプリケーションに統合できます。|

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

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

pnpm Fast, disk space efficient package manager
https://pnpm.js.org/
追記終了

# 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/catch-all-routes",
    "examples/data-fetch",
    "examples/gh-pages",
    "examples/with-context-api",
    "examples/with-dynamic-app-layout",
    "examples/with-dynamic-import",
    "examples/with-env-from-next-config-js",
    "examples/with-next-page-transitions",
    "examples/with-prefetching",
    "examples/with-shallow-routing",
    "examples/with-static-export",
    "examples/with-typescript",
    "examples/with-typescript-eslint-jest",
    "examples/with-typescript-types"
  ]
}

```

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

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


# 祝LGTM100に到達！