LoginSignup
86
81
@masakinihirota

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

Last updated at Posted at 2022-07-06

更新履歴

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 (実験的) アプリケーションやプロジェクトでは、これらの機能を（まだ)使用しないでください。
86
81
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
86
81