Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
272
Help us understand the problem. What is going on with this article?
@masakinihirota

Next.js公式examples集を分類(2021年1月版)

更新履歴

Next.js公式examples集を分類(2021年7月版) - Qiita
Next.js公式examples集を分類(2021年1月版) - Qiita
Next.js公式examples集を分類(2020年7月版) - Qiita

はじめに

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

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

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

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機能を利用してリポジトリを一元管理します。

準備&初期設定

まずは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"

272
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
272
Help us understand the problem. What is going on with this article?