更新履歴
Next.js公式examples集を分類（2023年7月版）
Next.js公式examples集を分類（2022年7月版）
Next.js公式examples集を分類（2021年7月版）
Next.js公式examples集を分類（2021年1月版）
Next.js公式examples集を分類（2020年7月版）
サンプルの場所
Next.js公式リポジトリのexamples内ディレクトリ
https://github.com/vercel/next.js/tree/canary/examples
はじめに
Next.jsの公式サンプルは前回（2021年7月版）から49本増えて合計317本あります。新たに追加されたサンプルには(new)がついています。（2022/07/06)
しかし、このままではどれを見たらいいのかわからないので主観で分類してみました。
基礎、中級、上級と付いているのは、主に難易度順にNext.jsの機能を使っているサンプルです。
(公式) 公式ドキュメント で説明するのに使われているサンプル等。
サンプルのインストール方法。
npx create-next-app --example [サンプル名] [アプリ名]
もしくは、
yarn create next-app --example [サンプル名] [アプリ名]
もしくは、
pnpm create next-app --example [サンプル名] [アプリ名]
具体例
npx create-next-app --example with-vitest with-vitest-app
yarn create next-app --example with-vitest with-vitest-app
pnpm create next-app --example with-vitest with-vitest-app
サンプル名はexamplesのを使用します。
アプリ名は自由につけられます。
オプション
-e, --example [name]|[github-url]
サンプル名の代わりにGithubにあるexamplesのURLを指定することも出来ます。
具体例
examplesのhello-worldをインストールしたい時。
この場合はappnameがサブフォルダとして作られ、その場所に作成されます。
npx create-next-app -e hello-world appname
もしくは、
yarn create next-app -e hello-world appname
-e オプションの省略
examples名をそのまま使うのなら -e、 --example オプションを省略可能です。その代わりインストールするフォルダ名はそのサンプル名で固定されます。
npx create-next-app hello-world
もしくは、
yarn create next-app hello-world
現在のディレクトリにインストールする方法です。
npx create-next-app -e hello-world .
もしくは、
yarn create next-app -e hello-world .
※npmはnpm create-next-app [アプリ名] とcreateの後ろに-（ハイフン）がつく。
※yarnはyarn create next-app [アプリ名] とcreateの後ろに-（ハイフン）がつかない。
サンプルのソースだけを見たい場合
degitを使ってソースのみを取得する。
（npx create-next-appをつかってインストールまでしなくていい場合）
Next.js 日本語翻訳プロジェクト（非公式）
Next.js のドキュメントを翻訳する非公式プロジェクトです。
Nextjs-ja-translation/Nextjs-ja-translation-docs: (Unofficial) Japanese transition of Next.js documentation
https://github.com/Nextjs-ja-translation/Nextjs-ja-translation-docs
※現在、活動頻度は低下しているようです。
Next.js日本語マニュアル（非公式）
はじめに | Next.js
https://nextjs-ja-translation-docs.vercel.app/docs/getting-started
新規追加分 (2022/10/26) ＋20サンプル
※ Next.js公式examples集を分類（2022年7月版） の発表以後に追加されたサンプル
authsignal/passwordless-login
cloudflare-turnstile
cms-dotcms
cms-enterspeed
cms-keystonejs-embedded
cms-sitefinity
cms-webiny
evm-multichain-dapp
middleware-matcher
radix-ui
with-axiom
with-cookies-next
with-next-ui
with-react-native-web
with-react-query
with-sfcc
with-turbopack
with-vanilla-extract
with-windicss
with-xata
新規追加分 (2022/10/06迄) の簡易紹介
Next.jsの基礎 (新規追加)
middleware-matcher
この例は、特定のページのみに一致するようにNext.js ミドルウェアを構成する方法を示しています。
インデックス ページ ( pages/index.js) には、動的ページへのリンクのリストがあり、それらが一致したかどうかがわかります。
ミドルウェア ファイル ( middleware.js) には特別な構成キーがあり、一致するページmatcherをきめ細かく制御できます。
公式
Advanced Features: Middleware | Next.js
https://nextjs.org/docs/advanced-features/middleware
with-cookies-next
Cookie を取得、設定、および削除しています。
このパッケージは、クライアント側とサーバー側で動作します
クライアント側でどこでも使用可能
getServerSideProps でサーバー側のレンダリングに使用できます
API ハンドラで使用できます
認証関係
authsignal/passwordless-login
Authsignal を Next.js と統合して、メールのマジック リンクとサーバー側のリダイレクトを使用してパスワードなしのログインを実装する方法を示します。
CMS関係
cms-dotcms
dotCMSをデータ ソースとして使用する Next.js の静的生成機能を紹介します。
cms-enterspeed
Enterspeed をデータ ソースとして使用する Next.js の静的生成機能を紹介します。
cms-keystonejs-embedded
KeystoneJSを利用した静的ブログ スターター プロジェクト:
開発モードでコンテンツを作成および編集するための強力な管理 UI
高速な本番サイト用に静的に構築されたページ
自動生成された GraphQL API を介したデータへのクライアント側アクセス
cms-sitefinity
Next.js と Sitefinity CMS を使用して静的に生成されたブログの例 これは、既存の cms-sitefinity に TypeScript を加えたものです。この例では、Sitefinity CMS をデータ ソースとして使用する Next.js の静的生成機能を紹介します。
cms-webiny
Next.js と Webiny を使用して静的に生成されたブログの例 この例では、Webiny をデータ ソースとして使用する Next.js の静的生成機能を紹介します。
パフォーマンス計測関連
with-axiom
next-axiomパッケージを介してAxiomと共にNext.jsプロジェクトを使用する方法を示します。カスタムラッパーは、次の構成オブジェクト、ミドルウェア、および API 関数をラップするために使用されます。このオブジェクトは、フロントエンド、ミドルウェア、および API 関数から使用できます。withAxiomlog
Axiom – Vercel
https://vercel.com/integrations/axiom
Axiom の Vercel 統合により、すべての要求、機能、および Web のバイタル データを取り込むことで、Vercel 展開の正常性とパフォーマンスを監視できます。
UI関連
radix-ui
基数 UI の例
いくつかの基本的な基数 UI コンポーネントを紹介します
Primitives – Radix UI
https://www.radix-ui.com/
with-next-ui
React の NextUI と共にNext.jsを使用する方法を示します。これは、この UI ツールキットとフレームワークとの統合を示すことを目的としています。
NextUI - Beautiful, fast and modern React UI Library
https://nextui.org/
React Native関連
with-react-native-web
react-native-webを使用して、React Native のプラットフォームに依存しないコンポーネントと API を Web に導入する方法を取り上げています。
necolas/react-native-web: Development monorepo for "React Native for Web"
https://github.com/necolas/react-native-web
状態管理関連
with-react-query
React Queryがv4でTanStack Queryに名前が変更された。
React-Query を Next.js のデータ フェッチ メソッドとシームレスに統合して、サーバーでクエリをフェッチし、ブラウザーでハイドレートします。
ハイドレートとは、出来上がったhtmlファイルとJavascriptファイルを結合させる動作を指します。
CSS関連
with-vanilla-extract
TypeScript のゼロランタイム スタイルシート。
ローカル スコープのクラス名と CSS 変数を使用して TypeScript (または JavaScript) でスタイルを記述し、ビルド時に静的 CSS ファイルを生成します。
with-windicss
Next.jsで WindiCSSを使用する方法を示します。
WindiCSSは
Tailwind CSS のためのコンパイラ
ロード時間が早くなる
ユーティリティファーストなCSSライブラリ
Tailwind CSSを使わなくてもいい
サーバーレスDB関連
with-xata
データ レイヤーとしてXataを使用して Next.js を使用する方法を示します。
Xataはサーバーレスアプリ向けのデータベースサービスです。
不明
evm-multichain-dapp
Ethereum 仮想マシン マルチチェーン Dapps を構築するための Nextjs パブリック テンプレート
※よくわかりませんでした。
新規追加分 (2022/10/26迄) の簡易紹介
Turbopack関連 (Webpackの代替)
with-turbopack
Turbopack は、JavaScript と TypeScript に最適化された新しいインクリメンタルバンドルで、Vercel 社の Webpack と Next.js のクリエイターによって Rust で書かれています。大規模なアプリケーションでは、Turbopack は Vite の 10 倍、Webpack の 700 倍の速度で更新されます (ベンチマーク)。最大規模のアプリケーションでは、その差はさらに広がり、Vite の最大 20 倍の速度で更新されます。
Salesforce commerce cloud ECサイトデモ
with-sfcc
この例では、Next.js、Salesforce commerce cloud、Tailwindを使用して、ヘッドレスECアプリケーションを作成する方法を説明します。
Turnstile とは、人間であるとの証明 (「CAPTCHA」認証の代替)
cloudflare-turnstile
Cloudflare Turnstileを使用した例
TurnstileはCloudflareのスマートなCAPTCHA代替ツールです。Cloudflareを経由してトラフィックを送ることなく、どんなウェブサイトにも埋め込むことができ、訪問者にCAPTCHAを表示することなく機能します。
この例では、Cloudflare TurnstileをNext.jsプロジェクトでどのように使用するかを示しています。デモは下記URLでご覧いただけます。
デモ
https://with-cloudflare-turnstile.vercel.app/
ドキュメント
Cloudflare Turnstile · Cloudflare Turnstile docs
https://developers.cloudflare.com/turnstile/
新規追加or削除分の調査 (2022/11/29)
追加 ＋26サンプル
削除or名前変更 ー10サンプル
追加 ＋26サンプル
authsignal/passwordless-login
cloudflare-turnstile
cms-dotcms
cms-enterspeed
cms-keystonejs-embedded
cms-sitefinity
cms-webiny
evm-multichain-dapp
image-legacy-component
middleware-matcher
next-css
next-offline
radix-ui
with-apivideo
with-axiom
with-cookies-next
with-grafbase
with-next-ui
with-postgres
with-react-query
with-sfcc
with-tigris
with-turbopack
with-vanilla-extract
with-windicss
with-xata
削除or名前変更 ー10サンプル
custom-server-actionhero
custom-server-express
custom-server-fastify
custom-server-hapi
custom-server-koa
custom-server-polka
with-apivideo-upload
with-atlaskit
with-carbon-components
with-cerebral
新規追加or削除分の調査 (2022/11/29)
## authsignal/passwordless-login Authsignal を Next.js と統合して、メールのマジック リンクとサーバー側のリダイレクトを使用してパスワードなしのログインを実装する方法を示します。 Authsignal - Home https://www.authsignal.com/cloudflare-turnstile
Turnstileは、Cloudflare のスマート CAPTCHA 代替手段です。Cloudflare 経由でトラフィックを送信せずに任意の Web サイトに埋め込むことができ、訪問者に CAPTCHA を表示することなく機能します。
Cloudflare Turnstile · Cloudflare Turnstile docs
https://developers.cloudflare.com/turnstile/
このサンプルでは、Next.js プロジェクトでCloudflare Turnstileを使用する方法を示しています。
デモ
https://with-cloudflare-turnstile.vercel.app/
cms-dotcms
dotCMSをデータ ソースとして使用する Next.js の静的生成機能を紹介します。
Hybrid Headless CMS | dotCMS
https://www.dotcms.com/
Basic Features: Pages | Next.js
https://nextjs.org/docs/basic-features/pages
cms-enterspeed
Enterspeedをデータ ソースとして使用する Next.js の静的生成機能を紹介します。
Make your existing data headless, flexible, and fast | Enterspeed
https://www.enterspeed.com/
Basic Features: Pages | Next.js
https://nextjs.org/docs/basic-features/pages
cms-keystonejs-embedded
KeystoneJSを利用した静的ブログ スターター プロジェクト:
開発モードでコンテンツを作成および編集するための強力な管理 UI
高速な本番サイト用に静的に構築されたページ
自動生成された GraphQL API を介したデータへのクライアント側アクセス
KeystoneJS: The superpowered Node.js Headless CMS for developers - Keystone 6
https://keystonejs.com/
cms-sitefinity
この例では、Sitefinity CMS をデータ ソースとして使用するNext.js の静的生成機能を紹介します。
Basic Features: Pages | Next.js
https://nextjs.org/docs/basic-features/pages
cms-webiny
Webinyをデータ ソースとして使用する Next.js の静的生成機能を紹介します。
Open-Source Serverless CMS for Enterprises - Headless CMS & Page Builder | Webiny
https://www.webiny.com/
Basic Features: Pages | Next.js
https://nextjs.org/docs/basic-features/pages
evm-multichain-dapp
Ethereum 仮想マシン マルチチェーン Dapps を構築するための Nextjs パブリック テンプレート
image-legacy-component
従来の画像コンポーネントの例
この例では、Next.js でレガシー イメージ コンポーネントを使用して、最適化されたレスポンシブ イメージを提供する方法を示します。
next/legacy/image | Next.js
https://nextjs.org/docs/api-reference/next/legacy/image
middleware-matcher
特定のページのみに一致するようにNext.js ミドルウェアを構成する方法を示しています。
インデックス ページ ( pages/index.ts) には、動的ページへのリンクのリストがあり、それらが一致したかどうかがわかります。
ミドルウェア ファイル ( middleware.ts) には特別な構成キーがあり、一致するページmatcherをきめ細かく制御できます。
次の点に注意してください。
ミドルウェアは常に最初に実行されます
ミドルウェアは常に_nextサーバー側のルートと一致します
マッチャーは常に「/」で始まる必要があります
next-css
Next.js の組み込み CSS インポートと CSS モジュール サポートの使用方法を示します。
next-offline
next-offline プラグインの使用方法を示します。このプラグインには、chrome 経由でアプリをインストールするための manifest.json が含まれています。
hanford/next-offline: make your Next.js application work offline using service workers via Google's workbox
https://github.com/hanford/next-offline
radix-ui
いくつかの基本的な基数 UI コンポーネントを紹介します
with-apivideo
このビデオ アップローダおよび再生アプリは、Next.js と api.video (ビデオ ファースト API) で構築されています。
with-axiom
next-axiomパッケージを介してAxiomと共にNext.jsプロジェクトを使用する方法を示します。カスタムラッパーは、次の構成オブジェクト、ミドルウェア、および API 関数をラップするために使用されます。このオブジェクトは、フロントエンド、ミドルウェア、および API 関数から使用できます。withAxiomlog
axiomhq/next-axiom: The official Next.js library for Axiom.
https://github.com/axiomhq/next-axiom
All your data, all the time - Axiom
https://www.axiom.co/
Next.js by Vercel - The React Framework
https://nextjs.org/
with-cookies-next
Cookie を取得、設定、および削除しています。
このパッケージは、クライアント側とサーバー側で動作します
クライアント側でどこでも使用可能
getServerSideProps でサーバー側のレンダリングに使用できます
API ハンドラで使用できます
with-grafbase
Next.jsで Grafbaseを使用する方法を示しています。この例では、Grafbase CLI を利用したローカルの GraphQL バックエンドからのフェッチと、タイプ セーフなクエリを作成するための GraphQL コード ジェネレーターを取り上げています。
with-next-ui
React の NextUI と共にNext.jsを使用する方法を示します。これは、この UI ツールキットとフレームワークとの統合を示すことを目的としています。
with-postgres
Next.js プロジェクトでPostgres.jsを使用する例。
porsager/postgres: Postgres.js - The Fastest full featured PostgreSQL client for Node.js and Deno
https://github.com/porsager/postgres
with-react-query
注:この例は、Next.js リポジトリの外部で維持されています。
query/examples/react/nextjs at beta · TanStack/query
https://github.com/TanStack/query/tree/beta/examples/react/nextjs
with-sfcc
Next.js、 Salesforce commerce cloud、およびTailwindを使用してヘッドレス e コマース アプリケーションを作成する方法を示します。
Grow your business faster with Commerce Cloud. - Salesforce.com - Salesforce.com
https://www.salesforce.com/products/commerce-cloud/overview/
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
https://tailwindcss.com/
with-tigris
TypeScript クライアント を使用してNext.jsとTigrisに構築され、 Vercelにデプロイされた単純な todo アプリ。
Tigris
https://docs.tigrisdata.com/
TypeScript Reference | Tigris
https://docs.tigrisdata.com/typescript/
with-turbopack
Turbopackは、JavaScript および TypeScript 用に最適化された新しいインクリメンタル バンドラーであり、Vercel の Webpack および Next.js の作成者によって Rust で記述されています。大規模なアプリケーションでは、Turbopack は Vite よりも 10 倍速く、Webpack よりも 700 倍速く更新されます (ベンチマーク)。最大のアプリケーションでは、アップデートが Vite よりも最大 20 倍速くなるため、違いはさらに大きくなります。
Turbopackは現在α版です。
with-vanilla-extract
vanilla-extractは下記にサンプルがあります
vanilla-extract/examples/next at master · vanilla-extract-css/vanilla-extract
https://github.com/vanilla-extract-css/vanilla-extract/tree/master/examples/next
with-windicss
Next.jsで WindiCSSを使用する方法を示します。
with-xata
データ レイヤーとしてXataを使用して Next.js を使用する方法を示します。
このテンプレートを使用すると、すぐに使用できます。
Xata データベースに接続するための API ルート
タイプセーフなコード生成
アクセシビリティ対応
ダーク/ライトモード
prefers-reduce-motionCSS トランジションの尊重
Serverless database with powerful search for your Next.js app
https://xata.io/
Next.js公式examples集
| Next.jsの入門 0 最初 | 説明 |
|---|---|
| hello-world | （基礎)（公式） Next.jsの基礎中の基礎です。 |
| Next.jsの基礎 1 易しい | 説明 |
|---|---|
| basic-css | （基礎)（公式） CSS in JSの基本的な使い方のサンプルです、Next.jsでcssファイル（装飾）の基本的な使用方法です。 |
| basic-export | （基礎) コマンドnext exportの使用方法です。 build時にこのコマンドを使うと静的なHTMLファイルを生成し（動的ルーティングの場合はその分だけのファイルを作成）、正しいディレクトリに配置します。静的なHTMLファイルを作るのでサーバー側にnode.js環境が不要になります。 |
| dynamic-routing | （基礎)（公式1） （公式2）動的ルーティングの使用方法です。 Next.jsではページ名を角括弧(ブラケット、[]の事)で囲う事で動的なルーティングを自動的に作成できます。 |
| environment-variables | （基礎)（公式） Next.jsでの環境変数の使い方です。 |
| head-elements | （基礎)（公式） Next.jsでHTMLのヘッド要素を追加、変更する方法を学びます。 |
| layout-component | （基礎)（公式1）（公式2） ページ内でコンポーネントを使う基本的なレイアウトの組み方を学びます。 |
| nested-components | （基礎) コンポーネントをネスト（入れ子：例えばHTMLタグで囲んだ中にHTMLタグを入れる）して利用する使用方法です。 |
| using-router | （基礎)（公式1）（公式2） コンポーネントの代わりにnext/routerを使ってページをリンクします。 |
| with-app-layout | （基礎)_app.jsを使用してすべてのページにグローバルレイアウトを実装します。 |
| with-loading | （基礎)（公式） ページ切替時に時間がかかる時、Loading画面を表示する技術です。 |
| Next.jsの基礎 2 普通 | 説明 |
|---|---|
| active-class-name | （公式） Next独自のLinkを使ってclassNameでプロパティを設定する使用方法です。 |
| api-routes | （公式1）（公式2） 基本的なAPIルートの使用方法です。 |
| catch-all-routes | （公式） ページをデータから自動的に作成してくれる機能です。 |
| data-fetch | （公式） サーバーとクライアントでデータをフェッチするのが非常に簡単になります。 |
| fast-refresh-demo | （基礎)（公式） 編集結果を即座に反映させる機能です。 |
| headers | （公式） Next.jsのヘッダーを使用して、カスタムHTTPヘッダーをNext.jsアプリに追加する方法です。 |
| progressive-render | プログレッシブサーバーサイドレンダリングを実装するアプリの使用方法です。 |
| redirects | （公式1）（公式2） 受信したリクエストパスを別の宛先パスにリダイレクトする方法です。 |
| rewrites | （公式1）（公式2） 着信要求パスを別の宛先パスにマップする方法です。 |
| with-absolute-imports | （公式） 絶対インポートを使用したアプリの使用方法です。 |
| with-context-api | アプリでreact context apiを使用する方法です。 |
| with-dynamic-import | （公式1） （公式2）モジュールを動的にインポートする方法です。 |
| with-env-from-next-config-js | （公式） next.config.jsを使って環境変数をビルド時に設定します。 |
| with-eslint | Next.jsでデフォルトで使用可能になったESlintの使用方法です。 |
| with-http2 | HTTP2サーバーを使った最も基本的な使用方法です。 |
| with-next-page-transitions | ページ間移動時において読み込み状態を簡単に追加します。 |
| with-portals-ssr | （React 公式) portal ポータル (portal) は、親コンポーネントの DOM 階層外にある DOM ノードに対して子コンポーネントをレンダーするための公式の仕組みを提供します。 |
| with-portals | （React 公式) portal Next.jsでReactPortals機能を使用する方法です。 |
| with-prefetching | ページをプリフェッチ（事前読み込み)するサンプルアプリです。 |
| with-react-helmet | next.jsとreact-helmetを組み合わせる方法の最小限の使用方法 ドキュメントヘッドへのすべての変更を管理します。 |
| with-react-hook-form | Form処理 react-hook-formの使用方法です。 |
| with-shallow-routing | （公式） ShallowRoutingExampleの使用方法です。 |
| with-static-export | （公式1）（公式2） APIからデータをフェッチするNext.jsアプリケーションを静的HTMLファイルにエクスポートして、ページの動的リストを生成する方法です。 |
| with-typescript-graphql | GraphQLとtypescriptの使用方法です。 |
| with-typescript-types | TypeScript型システムをNext.jsに統合する方法です。 |
| with-typescript | （公式） タイプスクリプトを使って型を適用します。 |
| with-vercel-fetch | @vercel/fetch の使用方法です。 |
| with-zones | （公式1）（公式2）（公式3） マルチゾーン機能を使用して、複数のアプリを1つのアプリとして使用できます。 |
| Next.jsの基礎 3 中級、上級 | 説明 |
|---|---|
| with-route-as-modal | この例では、ルートに基づいてモーダルを条件付きで表示する方法を示しています。 |
| with-web-worker | WebWorkerは、javascriptでマルチスレッド（複数の処理を同時に行う）を行うための仕組み。 worker-pluginを利用してWebWorkersでコードを実行する方法です。 |
| with-webassembly | WebAssemblyは、ブラウザでプログラムを高速実行するためにブラウザ上で動くバイナリコードの新しいフォーマット。WebAssemblyの使用方法です。 |
| Next.jsの基礎 2021年7月以降から2022年6月までの追加分 | 説明 |
|---|---|
| (New) github-pages | (中級) 静的なNext.jsアプリ(next exportを利用)をGitHub Pagesにデロイすることをサポートします。 |
| (New) hello-world-esm | (基礎) Native ESM(ES Modules)によるNext.jsの最も基本的な考え方で、ビルド後にもES Modulesが利用できるようになります。現在の2つの問題であるビルドパフォーマンスの問題と実行時パフォーマンスの問題の解決を目指します。 |
| (New) middleware | (中級) Next.jsのMiddlewareを使って、リクエストが完了する前にコードを実行させます。 |
| (New) modularize-imports | (中級) （公式） モジュールをインポートする modularizeImportsの設定オプションを使用する方法を理解するためのサンプルです。 |
| (New) next-forms | (基礎) Next.jsを使用してフォームを作成する方法です。 |
| (New) react-remove-properties | (中級) （公式） reactRemoveProperties設定オプションを使用して、Reactのプロパティを削除する方法を理解するためのサンプルです。 |
| (New) remove-console | (中級) （公式） removeConsole設定オプションを使用して、すべてのconsole.*を削除する方法を理解するためのサンプルです。 |
| 状態管理（最新、話題な） | 説明 |
|---|---|
| (New) with-jotai | Jotaiは非常に使いやすいReactの状態管理ライブラリです。(JavaScript ライジングスター2021での 3番人気) |
| with-recoil | 状態管理 Recoilは Facebookによって提唱された状態管理ライブラリです。コンポーネントをまたいだStateを、自由にいくつでも持つことができます。(JavaScript ライジングスター2021での 4番人気) |
| with-xstate | ステートマシンや状態遷移を扱えるJavaScriptのライブラリ XStateをNext.jsに統合する方法です。 JavaScriptとTypeScriptの有限状態マシンと最新のWeb用のステートチャートです。(JavaScript ライジングスター2021での 2番人気) だが Reduxより難解であまりおすすめできない。 |
| with-zustand | ZustandはFluxとReduxの流れを汲む React 向け軽量ステート管理ライブラリです。グローバルストアが必要な場合は、APIが競合ライブラリの中でおそらく最も簡単です。 (JavaScript ライジングスター2021での 1番人気) |
| 状態管理 Redux Toolkit関連 | 説明 |
|---|---|
| with-redux-toolkit-typescript | このサンプルは、Next.jsとRedux ToolkitをTypeScriptで使えるようにします。 |
| with-redux-toolkit | Redux Toolkitとは、複雑で難解なReduxを扱い易くするためのライブラリです。これはReduxを単体で使うよりもシンプルに記述出来ます。Redux公式サイトでもRedux Toolkit（＝RTK）の使用が推奨されています、特別な事情でもない限りReduxからRedux Toolkitへ移行したほうが良いでしょう。最近の状態管理は2種類に考え方が細分化されています。 「状態管理」と「データの取得とキャッシュ」です。 「状態管理」はReduxやRedux Toolkitを使い、「データの取得とキャッシュ」はRTK Queryを使います。 RTK QueryはReactのhooksを使って簡単に非同期データ取得出来るようになり、キャッシュの実装も簡単にいろいろなパターンを実装出来るようになります。 |
| 状態管理 Redux関連 | 説明 |
|---|---|
| with-redux-observable | Redux関連 |
| with-redux-persist | Redux関連 |
| with-redux-saga | Redux関連 |
| with-redux-thunk | Redux関連 |
| with-redux-wrapper | Redux関連 |
| with-redux | Redux関連 (JavaScript ライジングスター2021での 6番人気) |
| with-rematch | rematchはreduxを利用したユーティリティなので、store.jsやwithRematchなどの要素はwith-reduxの例と非常によく似ています。もしreduxがNext.jsとどのように統合されているか知らない場合は、with-reduxの例を先に見てください。RematchはReduxの拡張機能なので、多くの要素は同じです。 |
| 状態管理 mobx関連 | 説明 |
|---|---|
| with-mobx-react-lite | MobXによる状態管理 |
| with-mobx-state-tree-typescript | MobXによる状態管理 |
| with-mobx-state-tree | MobXによる状態管理 |
| with-mobx | MobXは、機能的反応プログラミング（TFRP)を透過的に適用することで、状態管理をシンプルかつスケーラブルにする、実戦的ライブラリです。 (JavaScript ライジングスター2021での 9番人気) |
| 状態管理 その他 | 説明 |
|---|---|
| (New) convex | Convex は、共有ステートを保存し、それをあらゆる場所で同期することを簡単出来ます。 |
| with-kea | 状態管理フレームワーク |
| with-overmind | 状態管理 Overmindは、状態管理のオーケストレーションを最小限に抑え、開発だけに集中できるような開発環境を目指している |
| with-reflux | React公式 一方向のデータフローを持つアプリケーションストアの管理にrefluxを使用する方法です。 |
| with-unstated | unstated-nextReact状態管理ライブラリ |
| テスト関連 | 説明 |
|---|---|
| (New) with-cypress | （公式） Cypress はフロントエンドのテストツールでエンドツーエンドテスト、統合テスト、ユニットテストが出来ます。 |
| (New) with-jest-babel | Next.jsとBabelで動作するようにJestを設定する方法を説明します。Next.js 12のリリース以降、Next.jsはJest with SWCのための設定を内蔵しています。最新の実装は with-jest のサンプルをご覧ください。 |
| (New) with-playwright | （公式） Playwright を理解するためのサンプルです。Playwrightは簡単にChrome、Safari、Firefox各ブラウザをNext.js上から実行できるようになります。 |
| (New) with-vitest | （公式） Next.jsでVitestを使用する方法を理解するためのサンプルです。 |
| with-jest | （公式） テスト |
| with-mocha | テスト |
| with-tesfy | A/Bテストと機能フラグ |
| 開発便利ツール モック関連 | 説明 |
|---|---|
| with-msw | Mock Service Workerは、ブラウザとノード用のAPIモックライブラリ |
| tRPC | 説明 |
|---|---|
| (New) with-trpc | 従来のRESTやGraphQLに代わる新技術の一つです。 tRPCは、スキーマやコード生成無しに、完全にタイプセーフなAPIを簡単に構築し利用出来るようになります。TypeScriptと静的型付けがWebプログラミングのベストプラクティスとなりつつある中、APIは大きな壁となっています。その壁を乗り越えるためにAPIのエンドポイントを静的に型付けをし、クライアントとサーバ間（あるいはサーバとサーバ間）でそれらの型を共有するためのより良い方法が必要となります。tRPCを導入すれば、TypeScriptの能力をフルに活用したタイプセーフなAPIを構築するためのシンプルなライブラリが利用できるようになります。現在、TypeScriptでタイプセーフなAPIを実装する方法としては、GraphQLが主流となっています。しかし、GraphQLはAPIを実装するための言語にとらわれない仕様として設計されているため、TypeScriptのような言語の力をフルに活用することが出来ません。プロジェクトがフルスタックのTypeScriptで構築されている場合、コード生成に頼らず、クライアントとサーバーの間で直接型を共有することができるようになります。 |
| モノレポ関連 | 説明 |
|---|---|
| (New) with-turbo | Turborepoは Vercelが開発したモノレポ環境を作るビルドツールです。 |
| with-yarn-workspaces | Yarn ワークスペースはパッケージアーキテクチャを設定する新しい方法で、Yarn 1.0 からデフォルトで利用可能です。これにより、複数のパッケージを設定することができ、yarn install を一度だけ実行して、すべてのパッケージを一度にインストールすることができます。 |
| form関連 | 説明 |
|---|---|
| (New) with-formspree | フォームライブラリであるFormspreeを理解するためのサンプルです。 |
| CMS関連 Data Fetching | 説明 |
|---|---|
| blog-starter | （公式1）（公式2） Next.jsとMarkdownを使用して静的に生成されたブログの使用方法です。 |
| cms-agilitycms | （公式1）（公式2） AgilityCMS |
| cms-buttercms | （公式1）（公式2） ButterCMS |
| cms-contentful | （公式1）（公式2）（公式3） Contentful |
| cms-cosmic | （公式1）（公式2） Cosmic |
| cms-datocms | （公式1）（公式2）（公式3） DatoCMS |
| cms-graphcms | （公式1）（公式2）（公式3） GraphCMS |
| cms-kontent | （公式1）（公式2）（公式3） Kontentを使h用した静的ブログの作成例 |
| cms-prepr | （公式1）（公式2）（公式3） Next.jsとPreprを使用して静的に生成するブログの使用方法です。 |
| cms-prismic | （公式1）（公式2）（公式3） Prismic |
| cms-sanity | （公式1）（公式2）（公式3） Sanity |
| cms-storyblok | （公式1）（公式2）（公式3） Storyblok |
| cms-strapi | （公式1）（公式2） Strapi |
| cms-takeshape | （公式1）（公式2）（公式3） TakeShape |
| cms-wordpress | （公式1）（公式2）（公式3） WordPress |
| CMS関連 | 説明 |
|---|---|
| (New) cms-builder-io | （公式）(無料、有料あり) Builder.io はGUIでブロックを組み合わせてWebページの開発をします。非開発者でも簡単にページを作成、更新、ドラッグ&ドロップで作成できるコンポーネントです。 |
| (New) cms-makeswift | （公式）(無料、有料あり) Makeswiftを使用して、Next.jsで静的に生成されたページをGUIで変更してページを作成していきます。 |
| (New) cms-plasmic | (無料、有料あり) Plasmic ヘッドレスCMS ビジュアルページビルダーです、俗に言うノーコードでページを作成していきます。 |
| (New) cms-tina | （公式） (無料、クラウドは将来有料化 ) TinaCMS ヘッドレスCMS ビジュアルページビルダーです、俗に言うノーコードでページを作成していきます。 |
| (New) cms-umbraco-heartcore | （公式）(無料、クラウドは有料) Umbraco Heartcore ヘッドレスCMS ビジュアルページビルダーです、俗に言うノーコードでページを作成していきます。 |
| cms-drupal | Next.jsとDrupal（オープンソースのCMS)を使用して静的に生成するブログの使用方法です。 |
| cms-ghost | Next.jsとGhost（コンテンツ、ニュースレター、メンバー、支払い機能)（有料)を使用して静的に生成するブログの使用方法です。 |
| with-netlify-cms | Gitワークフロー用のオープンソースのコンテンツ管理システム |
| CSS関連 Chakra UI編 | 説明 |
|---|---|
| with-chakra-ui-typescript | chakra-uiとTypescriptを使用したアプリの使用方法です。 |
| with-chakra-ui | tailwind CSSに非常によく似たCSSです。 なのでtailwind CSSとよく比較されます。プロトタイプ（試作品）を作る場合等にオススメです。tailwindCSSの特徴を持ち更に簡易化しています、デフォルトで簡易なコンポーネント（ボタンやフォーム）を提供しているのでプロトタイプの製作が簡単です。しかしその分tailwindCSSと比べ自由度は低いです。 中身は CSS-in-JSのemotionをtailwind CSS風にしています。 |
| CSS関連 tailwind CSS編 | 説明 |
|---|---|
| with-tailwindcss-emotion | （公式） emotion(CSS-in-JS)を使用しているプロジェクトにtailwindcssを追加する場合の例。 |
| with-tailwindcss | （公式1）（公式2） 完全なユーティリティファーストなCSS 次世代型のCSSとして注目されています。 Chakra UIとは違い他のCSS-in-JSに依拠していません。 Chakra UIとよく比較されます。装飾に関してはフルカスタマイズできます。自由度は高いですがデフォルトなコンポーネント（ボタンやフォーム）は提供していません。 |
| CSS関連 CSS-in-JS styled-jsx編 | 説明 |
|---|---|
| with-styled-jsx-plugins | CSS styled-jsxプラグインを使用 |
| with-styled-jsx-scss | PostCSS、SASS（SCSS)、LESS、またはstyled-jsxを備えたその他のプリプロセッサを使用できます。 |
| with-styled-jsx | （公式）styled-jsxの使用方法です。 |
| CSS関連 CSS-in-JS emotion編 | 説明 |
|---|---|
| (New) with-emotion-swc | EmotionはCSS in JSフレームワークです。重要なCSSを抽出してインライン化します。 |
| with-emotion-vanilla | emotionの基本的な使用方法 emotion（TypeScriptと相性の良い後発のCSS-in-Jsライブラリ) |
| with-emotion | （公式）CSS in JS SSR中にサーバーデータを直接Next.jsページに渡す |
| CSS関連 CSS-in-JS その他 | 説明 |
|---|---|
| (New) with-cssed | CSS-in-JSライブラリであるcssedをNext.jsで使用する方法を理解するためのサンプルです。 |
| (New) with-styled-components-babel | CSS in JSのライブラリ これを利用するとコンポーネント単位で装飾が可能になります。 |
| with-aphrodite | （公式） CSS in JS aphroditeを使用したアプリの使用方法です。 |
| with-compiled-css | styled-jsxの代わりにコンパイル済みをビルド時の CSS-in-JS スタイリング ソリューションとして使用する方法です。 |
| with-cxs | （公式）CSS in JS minimal CSS in JS cxsを使用したアプリの使用方法です。 |
| with-filbert | CSS in JS ソリューション（フレームワーク)filbert-jsでNext.jsを使用する |
| with-goober | 小さなcss-in-js |
| with-linaria | （公式）CSS linariaを使用したアプリの使用方法です。 |
| with-react-with-styles | CSS in JS |
| with-stitches | 限りなくゼロに近いランタイム、SSR、マルチバリアントのサポート、そしてクラス最高のデベロッパーエクスペリエンスを備えたCSS-in-JS。 |
| with-styled-components-rtl | CSS in JS 右から左にすると、サイト内のすべての要素を「反転」して、右から左に読む文化（たとえば、アラビア語)のニーズに合わせることができます。 |
| with-styled-components | （公式） CSS in JS CSSstyled-components |
| with-styletron | （公式） CSS in JS スタイルソリューション |
| CSS関連 フレームワーク | 説明 |
|---|---|
| with-rbx-bulma-pro | Bulma is simply a collection of CSSclasses. |
| with-react-bootstrap | react-bootstrap react用に再構築されたbootstrap |
| with-reactstrap | reactstrapの使用方法 reactstrapはBootstrapのコンポーネントです。 |
| CSS関連 その他 | 説明 |
|---|---|
| (New) with-yoga | Yoga Design Systemを使用する方法を理解するためのサンプルです。このサンプルはこのUIツールキットとNext.jsフレームワークの統合を目的にしています。 |
| with-fela | （公式） CSS in JS |
| with-next-css | Next.jsにビルトインされているCSS CSSモジュールサポートの使用方法です。 |
| with-next-sass | Sass/Scssモジュールサポートの使用方法です。 |
| with-react-jss | React-JSSは、新しいHooks APIを使ってJSSをReactに統合します。JSSとデフォルトのプリセットがすでに組み込まれています。 |
| with-react-md-typescript | マテリアルデザインをScssで使用する方法です。 |
| with-react-md | マテリアルデザインをScssで使用する方法です。 |
| UI関連 | 説明 |
|---|---|
| (New) with-geist-ui | GeistはVercelデザイン由来のReact UIライブラリです。 |
| (New) with-mantine | MantineはReactのUIライブラリです。シンプルなプロジェクトでNext.jsでの使い方を学びます。 |
| using-preact | 高速で小型のReactと言われるpreactを使用する例 |
| with-ant-design | Ant Design of ReactとともにNext.jsを使用する方法です。 |
| with-atlaskit | Atlaskit of ReactとともにNext.jsを使用する方法AltassianのオフィシャルUIライブラリ |
| with-cerebral | 一般的なJavaScriptフレームワーク用の宣言型の状態および副作用管理ソリューション |
| with-grommet | Grommet UI library |
| with-ionic-typescript | オープンソースのモバイル＆ディスクトップUIツールキットの使用方法です。 |
| with-mdbreact | React Bootstrap UIキット |
| with-patternfly | RedHatが作っているUIフレームワークUIパターン集 |
| with-rebass | UIコンポーネントRebassはReactのブートストラップです。 |
| with-semantic-ui | CSSフレームワーク Semantic UI Reactと一緒にNext.jsを利用する方法 |
| API Routes関連 GraphQL編 | 説明 |
|---|---|
| (New) with-graphql-gateway | GraphQL Meshを使って、REST APIをベースにしたGraphQL Gatewayを作成します。 |
| api-routes-apollo-server-and-client-auth | ApolloはGraphQLクライアント |
| api-routes-apollo-server-and-client | ApolloはGraphQLクライアント |
| api-routes-apollo-server | ApolloはGraphQLクライアント |
| api-routes-graphql | （公式） GraphQL Server apollo-server-micro |
| with-apollo-and-redux | ApolloはGraphQLクライアント |
| with-apollo-neo4j-graphql | GraphQLとApolloでNeo4jデータベースを使用する方法です。 |
| with-apollo | ApolloはGraphQLクライアント |
| with-graphql-hooks | GraphQLフックの使用方法。GraphQL Hooksは、最小限のフック優先のGraphQLクライアントになることを目的としたNearFormのライブラリです。 |
| with-graphql-react | graphql-react最新のコンテキストを使用したReactのGraphQLクライアント |
| with-relay-modern | Facebookが開発 Next.jsの9.3で導入されたgetStaticProps, および9.4で導入されたIncremental Static Regenerationは、Relayと非常に相性がいい The production-ready GraphQL client for React. |
| with-urql | 高度にカスタマイズ可能で用途の広いGraphQLクライアント |
| API Routes関連 | 説明 |
|---|---|
| api-routes-cors | （公式1）（公式2） CORS（Cross-Origin Resource Sharing) とは 追加のHTTPヘッダーを使用して、ある起点で実行されているWebアプリケーションに、異なる起点から選択されたリソースへのアクセスを許可するようにブラウザーに指示するメカニズム |
| api-routes-middleware | （公式1） （公式2） APIルート Next.jsのAPIエンドポイントを包み込むシンプルなミドルウェアを実装する方法です。 |
| api-routes-rate-limit | APIの使用制限 APIをある一定回数で使用できなくする方法。 |
| api-routes-rest | （公式） Next.jsのAPIエンドポイントでRESTを使用する方法です。 |
| コンポーネント関連 storybook編 | 説明 |
|---|---|
| with-storybook-styled-jsx-scss | Storybookの使用方法 Styled-jsx (with SCSS) |
| with-storybook | UIコンポーネントを開発するためのオープンソースツール |
| コンポーネント関連 その他 | 説明 |
|---|---|
| (New) with-react-foundation | react-foundationはReactのコンポーネント集です。 |
| (New) with-skynexui-components | skynexui/components を使えば、styled-jsx の長所を生かし、コンポーネント・ユーティリティ第一のアプローチで、優れた設定可能なデフォルトを持つ独自の UI を作成することが可能になります。このライブラリーの焦点は、クロスプラットフォームでUIを書くための共通の「DSL」を提供することです。 |
| with-carbon-components | IBM's carbon-components-react |
| with-orbit-components | Orbitは、Kiwi.comの特定のニーズに合わせて作成されたオープンソースのデザインシステムで、旅行プロジェクトのニーズにも対応しています。 |
| with-paste-typescript | コンポーネントライブラリ |
| with-react-multi-carousel | react-multi-carouselは、複数のアイテムとSSR(Server-side Rendering)をサポートするReactカルーセルコンポーネントです。 |
| with-stencil | ステンシルは、Webコンポーネント（より具体的にはカスタム要素)を生成するコンパイラです。ステンシルは、最も人気のあるフレームワークの最高の概念をシンプルなビルドタイムツールに組み合わせています。 |
| with-typestyle | CSSスタイルソリューションを使用する方法です。 |
| スターターキット関連 | 説明 |
|---|---|
| blog | Blogのスターターキットです。 |
| with-reflexjs | Reflexjsはスタイルプロップ、カラーモード、テーマ、バリアントを備えた迅速なUI開発のためのライブラリ＋スターターキット、テーマ、ブロックでGatsbyやNext.jsのサイトを迅速に構築することができます。 |
| blog関連 | 説明 |
|---|---|
| (New) with-edgedb | バックエンドにEdgeDBを使用して構築したシンプルなブログアプリケーションです。 |
| blog-with-comment | Upstash（サーバーレスRedis)（無料、有料)とAuth0（認証)（無料、有料)を使用してNext.jsブログアプリケーションにコメント機能を追加します。 |
| 国際化 | 説明 |
|---|---|
| (New) with-next-multilingual | next-multilingualモジュールは、多言語アプリケーションに必要な標準機能に加えて、ローカライズされたURLとモジュール化された文字列管理を提供するNext.js独自の国際化対応モジュールです。 |
| i18n-routing | （公式） 国際化されたルーティング |
| with-i18n-next-intl | 国際化 next-intl の使用方法 Next.jsの国際化されたルーティング機能を補完 |
| 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アプリを国際化します。 |
| React Native関連 | 説明 |
|---|---|
| with-expo-typescript | Next.js、Expo、およびTypeScriptを使用してユニバーサルReactアプリを作成するためのスタータープロジェクトです。 |
| with-expo | ExpoはReact Native のツールキットで、 React Native をより簡単に扱うことができます。 |
| with-react-native-web | react-native-webを使用して、プラットフォームに依存しないReactNativeのコンポーネントとAPIをWebに取り込む方法です。 |
| amp関連 | 説明 |
|---|---|
| amp-first | AMPファーストサイトのボイラープレートを設定 |
| amp-story | Next.jsとAMP機能を使用してamp-storyを含むAMPページを作成する方法です。 |
| amp | （公式1）（公式2） Next.jsとAMP機能を使用してAMPページを作成する方法。AMP(Accelerated Mobile Pages) とは、モバイルページを高速に表示させるための手法のこと（Webコンポーネントフレームワーク) |
| pwa関連 | 説明 |
|---|---|
| progressive-web-app | next-pwaを利用した PWA（プログレッシブウェブアプリ)の使用方法です。 |
| 画像関連 | 説明 |
|---|---|
| image-component | （公式1）（公式2） 画像コンポーネントを使用して最適化されたレスポンシブ画像を提供する方法です。 |
| svg-components | .babelrcを使用して、.svgファイルをインポートし、それらをReactコンポーネントとしてレンダリングするためのサポートを追加します。 |
| with-three-js | threejsはWebGL レンダラを持つ軽量な 3D ライブラリ。このライブラリには Canvas 2D、SVG、CSS3Dのレンダラーも用意されています。 |
| 検索関連 | 説明 |
|---|---|
| (New) with-elasticsearch | Elasticsearchは、RESTfulな分散型検索・分析エンジンです。Elastic Stackの中核として、データを一元的に管理し、高速検索、関連性の微調整、強力な分析機能を簡単に拡張することができます。この例では、Next.jsアプリの検索バックエンドとしてElasticsearchに接続し、使用する方法を説明します。 |
| with-algolia-react-instantsearch | 検索の実装と検索の分析 |
| リッチテキスト関連 | 説明 |
|---|---|
| with-draft-js | React用のリッチテキストエディタの実装例です。 Rich TextEditor Framework for React |
| アニメーション関連 | 説明 |
|---|---|
| (New) with-particles | 美しいパーティクルアニメーションを作成するためにReact tsParticlesパッケージを使用したNext.jsアプリケーションサンプルです。 |
| with-framer-motion | motionはオープンソースで本番環境に対応したモーションWeb上のReact用のライブラリ |
| with-gsap | アニメーションライブラリとしてGSAPを使用する方法です。 |
| 動画関連 | 説明 |
|---|---|
| (New) with-apivideo-upload | Next.jsとビデオファーストAPIであるapi.videoで構築された動画アップロード・再生アプリです。 |
| with-hls-js | HTTPライブストリーミングクライアントを実装するJavaScriptライブラリです。 |
| with-mux-video | この使用方法では、APIファーストのビデオプラットフォームであるMuxVideoを使用しています。この使用方法では、Next.jsアプリケーションでのビデオのアップロードと再生を取り上げています。 |
| with-videojs | デフォルトのスタイルの処理を含む、Video.jsとともにNext.jsを使用する方法です。 |
| サイトマップ関連 | 説明 |
|---|---|
| with-next-sitemap | next-sitemapを使用してサイトマップを作成します。 |
| with-sitemap | sitemap.xmlファイルを生成する方法です。 |
| mdx関連 | 説明 |
|---|---|
| with-mdx-remote | next-mdx-remoteライブラリを使用して簡単なブログを構築する方法です。 |
| with-mdx | MDXとはMarkdownドキュメントにJSXをシームレスに記述することができる。 next.jsアプリのトップレベルページとしてMDXを使用する方法です。 |
| altJs関連 Reason編 | 説明 |
|---|---|
| with-reasonml-todo | Reasonは、JavaScriptとOCamlのエコシステムを活用した、シンプルで高速かつタイプセーフなコード。 ReasonMLおよびReasonReactコンポーネントを使用したサンプルアプリ |
| with-reasonml | Reasonは、OCamlの強力な型システムを採用したプログラミング言語で、JavaScriptやC系言語から来た人にも親しみやすい構文になっています。 ReasonMLおよびReasonReactコンポーネントを使用したサンプルアプリ |
| バックエンドサービス関連 Supabase編 | 説明 |
|---|---|
| with-supabase-auth-realtime-db | （公式） (Firebaseの代替) （認証)Supabaseの認証を、クライアントとサーバーで、APIルートとサーバーサイドレンダリング(SSR) の両方で使用する方法 |
| バックエンドサービス関連 Firebase編 | 説明 |
|---|---|
| with-firebase-authentication | （公式1）（公式2） （認証) サーバーレスAPIを使用したFirebase認証の使用方法です。 |
| with-firebase-cloud-messaging | FirebaseCloudMessagingの使用方法です。 |
| with-firebase-hosting | Firebaseホスティングの使用方法です。 |
| with-firebase | クライアントサイドアプリケーション用のFirebaseの簡単な設定です。 |
| バックエンドサービス関連 AWS編 | 説明 |
|---|---|
| with-aws-amplify-typescript | AWSAmplifyは、モバイルおよびフロントエンドのウェブデベロッパーがAWSを利用して安全でスケーラブルなフルスタックアプリケーションを構築できるようにするツールとサービスのセットです。 |
| with-aws-amplify | AWSAmplifyは、モバイルおよびフロントエンドのウェブデベロッパーがAWSを利用して安全でスケーラブルなフルスタックアプリケーションを構築できるようにするツールとサービスのセットです。 |
| バックエンドサービス DB関連 Fauna編 | 説明 |
|---|---|
| (New) with-fauna | Faunaというデータベースを使用して、GraphQLエンドポイントを利用する方法を理解するためのサンプルです。 |
| with-cookie-auth-fauna | （認証)（無料、有料)ユーザーを認証し、トークンを安全な（JS以外の)Cookieに格納します。 |
| with-graphql-faunadb | FaunaDBGraphqlスターターの使用方法-FaunaDBゲストブック |
| バックエンドサービス DB関連 prisma編 | 説明 |
|---|---|
| with-prisma | Node.jsおよびTypeScript用の次世代ORM |
| with-reason-relay | GraphQLのバックエンドにPrisma + Nexusを使った使用方法です。 |
| バックエンドサービス DB関連 mysql編 | 説明 |
|---|---|
| with-mysql | MySQLの使用方法です。 |
| バックエンドサービス DB関連 その他 | 説明 |
|---|---|
| (New) with-couchbase | (有料 ) Couchbaseは、データベースです。Next.jsアプリでCouchbaseに接続し、使用する方法を理解するためのサンプルです。 |
| with-deta-base | Deta Baseという名前のアプリケーション その使用方法 NoSQL |
| with-knex | KnexはさまざまなSQLデータベースと連携するSQLクエリビルダーです。 Postgresデータベースに接続してクエリを実行する方法です。 |
| with-mongodb-mongoose | MongoDBとMongooseを使用したアプリの使用方法 mongooseは、node.js上でmongoDBを扱うためのライブラリ |
| with-mongodb | MongoDBを使用したアプリの使用方法です。 |
| with-neo4j | APIルートでNeo4jというグラフデータベースを使用する方法です。 |
| with-realm-web | Realm-Web SDK を使用して、swr を用いて realm の graphql エンドポイントに問い合わせを行います。 この例では、GraphQL のバックエンドとして MongoDB Realm を使用しています。 |
| with-redis | Redisをデータストアとして使用する方法です。 |
| バックエンドサービス関連 その他 | 説明 |
|---|---|
| with-nhost-auth-realtime-graphql | （公式）(Firebaseの代替)（認証) nhost（GraphQLを使用したオープンソースのFirebaseの代替) バックエンドにNhostを使った認証とGraphQLの使用方法 |
| docker関連 | 説明 |
|---|---|
| (New) with-docker-compose | Next.jsの開発環境と本番環境をDocker Composeで稼働させる方法を理解するためのサンプルです。 |
| (New) with-docker-multi-env | Next.jsでDockerを利用し、異なるenv値を持つ複数の環境にデプロイする方法を理解するためのサンプルです。 |
| with-docker | （公式） APIルート |
| 認証関連 | 説明 |
|---|---|
| (New) auth-with-stytch | (無料、有料あり) Stytch + Next.jsのプロジェクトで、アプリケーションにパスワードが必要無いエレガントな認証を有効にします。 |
| auth0 | （公式） （認証)（無料、有料)認証サポートを簡単に追加する方法です。 |
| 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-supertokens | （公式） （認証) オープンソースの認証ライブラリ。SuperTokensで保護されたアプリケーションの簡単な設定 |
| with-userbase | （公式） （認証)（無料、有料)Userbaseユーザーアカウントとデータの永続性を静的サイトに追加する最も簡単な方法です |
| セキュリティ関連 | 説明 |
|---|---|
| (New) with-fingerprintjs-pro | (無料、有料あり ) デバイスのフィンガープリントを使用して詐欺、スパム、アカウントの乗っ取りを阻止します。 |
| styled-jsx-with-csp | styled-jsxを使ってCSP(Content Security Policy)（クロスサイトスクリプティング (XSS) やデータインジェクション攻撃などのような、特定の種類の攻撃を検知し、影響を軽減するために追加できるセキュリティレイヤー)のstyle-srcディレクティブにnonce（暗号通信で用いられる、使い捨てのランダムな値のこと)を使用する方法です。 |
| with-strict-csp | CSP(コンテンツセキュリティポリシー ) は、クロスサイトスクリプティング (XSS) やデータインジェクション攻撃などのような、特定の種類の攻撃を検知し、影響を軽減するために追加できるセキュリティレイヤー。 スクリプトハッシュを生成する厳密なCSPを使用したアプリの使用方法です。 |
| 決済代行システム関連 | 説明 |
|---|---|
| with-stripe-typescript | TypeScriptとreact-stripe-jsでStripeを使用した使用方法。 Stripe はインターネットビジネスのための決済プラットフォームです。 |
| Custom Server関連 | 説明 |
|---|---|
| custom-server-actionhero | Action Hero |
| custom-server-express | （公式） Express Webアプリケーション |
| custom-server-fastify | Fastify |
| custom-server-hapi | （公式） Secure Framework |
| custom-server-koa | （公式） web framework designed |
| custom-server-polka | Express.jsの代替品 |
| custom-server-typescript | Nodemonを使用してサーバーとクライアントの両方でTypeScriptを使用し、Next.jsユニバーサルコードに影響を与えずにサーバーコードをライブでリロードする方法です。 |
| ssr-caching | （公式1）（公式2） 一度SSRしたページをキャッシュして使用する使用方法です。 |
| システム関連 babel polyfills etc. | 説明 |
|---|---|
| with-babel-macros | babel-plugin-macrosは、ユーザーがビルドシステムにbabelプラグインを追加することなくコンパイル時のコード変換を使用するライブラリの標準インターフェイスを定義します |
| with-custom-babel-config | （公式） カスタムBabel構成の使用方法です。 |
| with-polyfills | ポリフィルを使用したアプリの使用方法 警告：このサンプルは、ポリフィルを追加するための推奨される方法ではなく、バンドルで問題を引き起こすことが知られています。 |
| with-service-worker | Service Worker はブラウザが Web ページとは別にバックグラウンドで実行するスクリプトで、Web ページやユーザーのインタラクションを必要としない機能です。プッシュ通知やバックグラウンド同期 |
| Script Component 関連 | 説明 |
|---|---|
| (New) script-component | (中級) （公式） next/scriptを使用するさまざまなやり方を理解するためのサンプルです。 |
| with-clerk | （公式1）（公式2） （認証)（無料、有料)ユーザー認証 |
| with-facebook-pixel | （公式） FacebookPixelは広告効果の計測精度向上やFacebook広告の配信システム最適化を実現するツール |
| with-google-analytics | （公式） GoogleアナリティクスとともにNext.jsを使用する方法です。 |
| with-google-tag-manager | （公式） Googleタグマネージャーを使用したアプリの使用方法です。 |
| with-segment-analytics | （公式） （有料、無料）分析機能を備えたアプリの使用方法です。 |
| 分析、解析、監視関連 | 説明 |
|---|---|
| (New) with-contentlayer | Contentlayerはコンテンツを検証しタイプセーフなJSONに変換しアプリケーションに簡単にインポートすることができるコンテンツプリプロセッサです。 |
| (New) with-joi | Joiおよびnext-Joiを利用して、Next.jsのAPI経路を検証する方法を理解するためのサンプルです。コネクトミドルウェアを使用したAPIルート（/api/people）と、通常のAPIルート（/api/cars）の両方のサンプルが含まれています。 |
| analyze-bundles | @next/bundle-analyzerの使い方 |
| with-flow | Flow静的型チェッカーFlowを使用したアプリの使用方法 flowはJavaScriptの静的タイプチェッカーです。 |
| with-google-analytics-amp | AMPと組み合わせてGoogleアナリティクスとともにNext.jsを使用する方法です。 |
| with-plausible | Plausibleは、軽量でオープンソースのウェブサイト分析ツールです。 Googleアナリティクスの代替 |
| with-react-ga | react-ga React Google Analytics Module |
| with-sentry | （公式） アプリケーション監視プラットフォーム |
| デスクトップアプリケーション関連 | 説明 |
|---|---|
| with-electron-typescript | デスクトップアプリケーションElectron application example with typescript |
| with-electron | デスクトップアプリケーションElectron application example |
| 既存プロジェクトからの移行関連 | 説明 |
|---|---|
| custom-routes-proxying | （公式）このサンプルでは、Next.jsの新しいカスタムルート機能を使って、リクエストをアップストリームサーバーにプロキシする最も基本的な使用方法。pages/index.js、pages/about.js、pages/hello/[slug].jsの3つのページがあります。これらのページはすべてNext.jsと照合され、それ以外のパスはアップストリームサーバーにプロキシされます。このアプローチは、アプリケーションをインクリメンタルにNext.jsに移行しようとしているが、既存のアプリケーションにフォールバックする必要がある場合に非常に便利です。Next.jsアプリケーションにページを1つずつ追加し、移行していないページについては、移行できるようになるまでNext.jsが既存のアプリケーションにプロキシすることができます。 |
| その他 | 説明 |
|---|---|
| (New) markdoc | MarkdocはMarkdownベースの文書作成オーサリングフレームワークです。Markdownを使って柔軟かつ強力にドキュメントを作るライブラリです。 |
| (New) reproduction-template | Next.jsリポジトリのバグを報告する時に使用するテンプレートです。 |
| (New) with-ably | (無料、有料あり ) アプリケーションのあらゆるリアルタイム体験を簡単にパワーアップ。複雑なインフラストラクチャの管理やプロビジョニングは必要ありません。シンプルなAPIがすべてをリアルタイムに処理するので、あなたは自分のコードに集中することができます。 |
| (New) with-temporal | Temporalはオープンソースプラットフォームで、サービスやアプリケーションの正常な実行を保証します。 |
| (New) with-unsplash | Unsplashは世界各国のフォトグラファーによる20万点もの写真を保有するストックフォトサイトです。 |
| with-mqtt-js | MQTT.jsは、node.jsおよびブラウザー用のJavaScriptで記述されたMQTTプロトコルのクライアントライブラリです。 |
| with-next-offline | next-offlineとは、Workboxを使用しオフライン機能を簡単に実現する next-offlineプラグインの使用方法です。 |
| with-next-seo | Next.jsでSEOを管理するのに役立つプラグインであるnext-seoを統合する方法です。 |
| with-quill-js | powerfulrichtexteditor |
| with-react-toolbox | react-toolboxスタイルのモジュールを静的ファイルに抽出するためのコマンドラインツールで、ほぼすべてのスタックに統合できます。※リンク先で怪しい広告 |
| with-slate | リッチテキストThisiseditablerichtext |
| with-stomp | Next.jsアプリケーション内でSTOMPを使用する方法。STOMPは、シンプルなテキスト指向のメッセージングプロトコルです。 |
| with-why-did-you-render | Why-did-you-renderは、Reactにパッチを当てて、回避可能な再レンダリングについて通知します。(React Nativeでも動作します。) why-did-you-renderの簡単な使用方法。 |
| moved、removed、非推奨、廃止 | 説明 |
|---|---|
| blog-starter-typescript | Next.js、Markdown、TypeScriptを使用して静的に生成されたブログの使用方法です。 |
| custom-server | （公式） このサンプルはhttps://nextjs.org/docs/advanced-features/custom-server へ移動しました。カスタムサーバーの使用方法です。 |
| page-transitions | （インストール不要)このサンプルは非推奨になり、削除されました。 |
| parameterized-routing | （インストール不要)このサンプルは非推奨になり、削除されました。 |
| with-cookie-auth | （非推奨)（認証)このサンプルは非推奨になり、次のいずれかを参考にしてください。auth0 with-cookie-auth-fauna with-passport with-iron-session with-next-auth |
| with-dotenv | （インストール不要)Next.js9.4からサポートされています。 |
| with-firebase-authentication-serverless | （moved)with-firebase-authentication |
| with-glamorous | （公式）（インストール不要)glamorousは非推奨になり、エモーションが採用されました。 |
| with-global-stylesheet-simple | （インストール不要)このサンプルは非推奨になりました。代わりにexamples/with-next-cssを使用してください。 |
| with-global-stylesheet | （インストール不要)このサンプルは非推奨になりました。代わりにexamples/with-next-cssを使用してください。 |
| with-markdown | （インストール不要)Markdownの使い方はcanary/examples/blog-starterを見てください。 |
| with-material-ui | （移動)（Material-UI公式サイトのサンプル) [mui-org/material-ui/examples/nextjs/]（https://github.com/mui-org/material-ui/tree/master/examples/nextjs) |
| with-next-routes | （インストール不要)動的ルートがデフォルトでサポートされるようになりました |
| with-now-env | （インストール不要) Next.jsは9.4以降、環境変数の読み込みを自動的にサポートします。 |
| with-pretty-url-routing | （インストール不要)動的ルートはデフォルトでサポートされるようになりました |
| with-sentry-simple | （インストール不要)（moved)with-sentryの方を使用してください。アプリケーション監視プラットフォーム |
| with-strict-csp-hash | （インストール不要) （moved)このサンプルはwith-strict-cspに移動しました |
| with-styled-jsx-postcss | （moved) このサンプルは/examples/with-styled-jsx-pluginsに移動しました |
| with-sw-precache | （インストール不要)canary/examples/with-next-offlineの使用をおすすめします。 |
| with-typescript-styled-components | このサンプルはwith-styled-componentsに移動しました。 |
| with-universal-configuration-build-time | （インストール不要)Next.js9.4以降、環境変数の読み込みを自動的にサポートします。 |
| with-universal-configuration-runtime | （インストール不要)Next.js9.4以降、環境変数の読み込みを自動的にサポートします。 |
2021年1月以降新たに追加or削除されたexamples
| 前回（2021年7月)の調査から新たに追加されたもの | 説明 |
|---|---|
| (New) auth-with-stytch | (無料、有料あり) Stytch + Next.jsのプロジェクトで、アプリケーションにパスワードが必要無いエレガントな認証を有効にします。 |
| (New) cms-builder-io | (無料、有料あり) Builder.io はGUIでブロックを組み合わせてWebページの開発をします。非開発者でも簡単にページを作成、更新、ドラッグ&ドロップで作成できるコンポーネントです。 |
| (New) cms-makeswift | (無料、有料あり) Makeswiftを使用して、Next.jsで静的に生成されたページをGUIで変更してページを作成していきます。 |
| (New) cms-plasmic | （公式）(無料、有料あり) Plasmic ヘッドレスCMS ビジュアルページビルダーです、俗に言うノーコードでページを作成していきます。 |
| (New) cms-tina | (無料、クラウドは将来有料化 ) TinaCMS ヘッドレスCMS ビジュアルページビルダーです、俗に言うノーコードでページを作成していきます。 |
| (New) cms-umbraco-heartcore | (無料、クラウドは有料) Umbraco Heartcore ヘッドレスCMS ビジュアルページビルダーです、俗に言うノーコードでページを作成していきます。 |
| (New) convex | Convex は、共有ステートを保存し、それをあらゆる場所で同期することを簡単出来ます。 |
| (New) github-pages | 静的なNext.jsアプリ(next exportを利用)をGitHub Pagesにデロイすることをサポートします。 |
| (New) hello-world-esm | (基礎) Native ESM(ES Modules)によるNext.jsの最も基本的な考え方で、ビルド後にもES Modulesが利用できるようになります。現在の2つの問題であるビルドパフォーマンスの問題と実行時パフォーマンスの問題の解決を目指します。 |
| (New) markdoc | MarkdocはMarkdownベースの文書作成オーサリングフレームワークです。Markdownを使って柔軟かつ強力にドキュメントを作るライブラリです。 |
| (New) middleware | (中級) Next.jsのMiddlewareを使って、リクエストが完了する前にコードを実行させます。 |
| (New) modularize-imports | (上級) （公式） モジュールをインポートする modularizeImportsの設定オプションを使用する方法を理解するためのサンプルです。 |
| (New) next-forms | (基礎) Next.jsを使用してフォームを作成する方法です。 |
| (New) react-remove-properties | (上級) （公式） reactRemoveProperties設定オプションを使用して、Reactのプロパティを削除する方法を理解するためのサンプルです。 |
| (New) remove-console | (上級) （公式） removeConsole設定オプションを使用して、すべてのconsole.*を削除する方法を理解するためのサンプルです。 |
| (New) reproduction-template | Next.jsリポジトリのバグを報告する時に使用するテンプレートです。 |
| (New) script-component | (中級) （公式） next/scriptを使用するさまざまなやり方を理解するためのサンプルです。 |
| (New) with-ably | (無料、有料あり) アプリケーションのあらゆるリアルタイム体験を簡単にパワーアップ。複雑なインフラストラクチャの管理やプロビジョニングは必要ありません。シンプルなAPIがすべてをリアルタイムに処理するので、あなたは自分のコードに集中することができます。 |
| (New) with-apivideo-upload | Next.jsとビデオファーストAPIであるapi.videoで構築された動画アップロード・再生アプリです。 |
| (New) with-contentlayer | Contentlayerはコンテンツを検証しタイプセーフなJSONに変換しアプリケーションに簡単にインポートすることができるコンテンツプリプロセッサです。 |
| (New) with-couchbase | (有料) Couchbaseは、データベースです。Next.jsアプリでCouchbaseに接続し、使用する方法を理解するためのサンプルです。 |
| (New) with-cssed | CSS-in-JSライブラリであるcssedをNext.jsで使用する方法を理解するためのサンプルです。 |
| (New) with-cypress | Cypress はフロントエンドのテストツールでエンドツーエンドテスト、統合テスト、ユニットテストが出来ます。 |
| (New) with-docker-compose | Next.jsの開発環境と本番環境をDocker Composeで稼働させる方法を理解するためのサンプルです。 |
| (New) with-docker-multi-env | Next.jsでDockerを利用し、異なるenv値を持つ複数の環境にデプロイする方法を理解するためのサンプルです。 |
| (New) with-edgedb | バックエンドにEdgeDBを使用して構築したシンプルなブログアプリケーションです。 |
| (New) with-elasticsearch | Elasticsearchは、RESTfulな分散型検索・分析エンジンです。Elastic Stackの中核として、データを一元的に管理し、高速検索、関連性の微調整、強力な分析機能を簡単に拡張することができます。この例では、Next.jsアプリの検索バックエンドとしてElasticsearchに接続し、使用する方法を説明します。 |
| (New) with-emotion-swc | EmotionはCSS in JSフレームワークです。重要なCSSを抽出してインライン化します。 |
| (New) with-fauna | Faunaというデータベースを使用して、GraphQLエンドポイントを利用する方法を理解するためのサンプルです。 |
| (New) with-fingerprintjs-pro | (無料、有料あり) デバイスのフィンガープリントを使用して詐欺、スパム、アカウントの乗っ取りを阻止します。 |
| (New) with-formspree | フォームライブラリであるFormspreeを理解するためのサンプルです。 |
| (New) with-geist-ui | Vercelデザイン由来のReact UIライブラリです。 |
| (New) with-graphql-gateway | GraphQL Meshを使って、REST APIをベースにしたGraphQL Gatewayを作成します。 |
| (New) with-jest-babel | Next.jsとBabelで動作するようにJestを設定する方法を説明します。Next.js 12のリリース以降、Next.jsはJest with SWCのための設定を内蔵しています。最新の実装はwith-jestのサンプルをご覧ください。 |
| (New) with-joi | Joiおよびnext-Joiを利用して、Next.jsのAPI経路を検証する方法を理解するためのサンプルです。コネクトミドルウェアを使用したAPIルート（/api/people）と、通常のAPIルート（/api/cars）の両方のサンプルが含まれています。 |
| (New) with-jotai | Jotaiは非常に使いやすいReactの状態管理ライブラリです。 |
| (New) with-mantine | MantineはReactのUIライブラリです。シンプルなプロジェクトでNext.jsでの使い方を理解します。 |
| (New) with-next-multilingual | next-multilingualモジュールは、多言語アプリケーションに必要な標準機能に加えて、ローカライズされたURLとモジュール化された文字列管理を提供するNext.js独自の国際化対応モジュールです。 |
| (New) with-particles | 美しいパーティクルアニメーションを作成するためにReact tsParticlesパッケージを使用したNext.jsアプリケーションサンプルです。 |
| (New) with-playwright | Playwright を理解するためのサンプルです。Playwrightは簡単にChrome、Safari、Firefox各ブラウザをNext.js上から実行できるようになります。 |
| (New) with-react-foundation | react-foundationはReactのコンポーネント集です。 |
| (New) with-skynexui-components | skynexui/components を使えば、styled-jsx の長所を生かし、コンポーネント・ユーティリティ第一のアプローチで、優れた設定可能なデフォルトを持つ独自の UI を作成することが可能になります。このライブラリーの焦点は、クロスプラットフォームでUIを書くための共通の「DSL」を提供することです。 |
| (New) with-styled-components-babel | CSS in JSのライブラリ これを利用するとコンポーネント単位で装飾が可能になります。 |
| (New) with-temporal | Temporalはオープンソースプラットフォームで、サービスやアプリケーションの正常な実行を保証します。 |
| (New) with-trpc | tRPCは、スキーマやコード生成無しに、完全にタイプセーフなAPIを簡単に構築し利用出来るようになります。TypeScriptと静的型付けがWebプログラミングのベストプラクティスとなりつつある中、APIは大きな壁となっています。その壁を乗り越えるためにAPIのエンドポイントを静的に型付けをし、クライアントとサーバ間（あるいはサーバとサーバ間）でそれらの型を共有するためのより良い方法が必要となります。tRPCを導入すれば、TypeScriptの能力をフルに活用したタイプセーフなAPIを構築するためのシンプルなライブラリが利用できるようになります。従来のRESTやGraphQLに代わるものとして活用してください。現在、TypeScriptでタイプセーフなAPIを実装する方法としては、GraphQLが主流となっています。しかし、GraphQLはAPIを実装するための言語にとらわれない仕様として設計されているため、TypeScriptのような言語の力をフルに活用することが出来ません。プロジェクトがフルスタックのTypeScriptで構築されている場合、コード生成に頼らず、クライアントとサーバーの間で直接型を共有することができるようになります。 |
| (New) with-turbo | Turborepoは Vercelが開発したモノレポ環境を作るビルドツールです。 |
| (New) with-unsplash | Unsplashは世界各国のフォトグラファーによる20万点もの写真を保有するストックフォトサイトです。 |
| (New) with-vitest | Next.jsでVitestを使用する方法を理解するためのサンプルです。 |
| (New) with-yoga | Yoga Design Systemを使用する方法を理解するためのサンプルです。このサンプルはこのUIツールキットとNext.jsフレームワークの統合を目的にしています。 |
| 前回（2021年1月)の調査から新たに追加されたもの | 説明 |
|---|---|
| blog-with-comment | Upstash（サーバーレスRedis)（無料、有料)とAuth0（認証)（無料、有料)を使用してNext.jsブログアプリケーションにコメント機能を追加します。 |
| blog | ポートフォリオ スターターキット |
| cms-prepr | （公式） Next.jsとPreprを使用して静的に生成するブログの使用方法です。 |
| headers | （公式） Next.jsのヘッダーを使用して、カスタムHTTPヘッダーをNext.jsアプリに追加する方法。 |
| styled-jsx-with-csp | styled-jsxを使ってCSP(Content Security Policy)（クロスサイトスクリプティング (XSS) やデータインジェクション攻撃などのような、特定の種類の攻撃を検知し、影響を軽減するために追加できるセキュリティレイヤー)のstyle-srcディレクティブにnonce（暗号通信で用いられる、使い捨てのランダムな値のこと)を使用する方法です。 |
| with-compiled-css | styled-jsxの代わりにコンパイル済みをビルド時の CSS-in-JS スタイリング ソリューションとして使用する方法です。 |
| with-eslint | Next.jsでデフォルトで使用可能になったESlintの使用方法です。 |
| with-i18n-next-intl | 国際化 next-intl の使用方法です。 Next.jsの国際化されたルーティング機能を補完します。 |
| with-nhost-auth-realtime-graphql | （公式） (Firebaseの代替)（認証)nhost（GraphQLを使用したオープンソースのFirebaseの代替) バックエンドにNhostを使った認証とGraphQLの使用方法 |
| with-plausible | Plausibleは、軽量でオープンソースのウェブサイト分析ツールです。 Googleアナリティクスの代替 |
| with-react-hook-form | Form処理 react-hook-formの使用方法です。 |
| with-redux-toolkit-typescript | TypeScriptでNext.jsとRedux Toolkitを統合する方法です。 |
| with-reflexjs | Reflexjsはスタイルプロップ、カラーモード、テーマ、バリアントを備えた迅速なUI開発のためのライブラリ＋スターターキット、テーマ、ブロックでGatsbyやNext.jsのサイトを迅速に構築することができます。 |
| with-vercel-fetch | @vercel/fetch の使用方法です。 |
| 前回（2021年7月)の調査から削除されたもの | 説明 |
|---|---|
| gh-pages | Nextの最も基本的なアイデアの使用方法です。 |
| with-custom-reverse-proxy | リバースプロキシの使用方法です。 |
| with-dynamic-app-layout | app.jsを使用してページの_dynamicレイアウトを実装する方法です。 |
| with-redux-code-splitting | Redux関連 |
| with-typescript-eslint-jest | NextJS Typescriptボイラープレートです。 |
| with-webpack-bundle-analyzer | （moved)このサンプルはanalyze-bundlesに移動しました。 |
| with-webpack-bundle-size-analyzer | Webpack バンドルのサイズに何が影響しているかを調べるための小さなユーティリティです。 |
| 前々回（2021年1月)の調査から削除されたもの | 説明 |
|---|---|
| with-ant-design-less | Ant Design of ReactとともにNext.jsを使用する方法です。 |
| with-ant-design-mobile | antd-mobileとともにNext.jsを使用する方法です。 |
| with-ant-design-pro-layout-less | Ant Design Pro Layout of React.とともにNext.jsを使用する方法です。 |
| with-astroturf | CSS in JS stroturfを使用したアプリの使用例 |
| with-glamorous | (インストール不要)glamorousは非推奨になり、エモーションが採用されました。 |
| with-glamor | （公式）CSS in JS CSS関連スタイリングソリューションの使用方法です。 |
| with-monaco-editor | モナコエディタは VS Codeを動かすコードエディタです。 |
| with-next-less | CSS Next.js + Less |
| with-react-relay-network-modern | The production-ready GraphQL client for React. |
| with-style-sheet | CSS in JSlibrarystyle-sheet |
| with-zeit-fetch | Next.jsアプリケーションで@zeit/fetchを使用する方法です。 |
| 前々々回（2020年7月)の調査から削除されたもの | 説明 |
|---|---|
| with-emotion-11 | CSS in JS |
| with-stitches-styled | CSS in JS |
| with-storybook-typescript | （インストール不要)削除されました。 |
| z-experimental-refresh | (実験的) アプリケーションやプロジェクトでは、これらの機能を（まだ)使用しないでください。 |