vercel/examples

これは何？

主な機能

• 01トピック別に整理されたNext.jsとTypeScriptのサンプルアプリ集
• 02デモやリファレンスアーキテクチャをまとめた独立のsolutionsフォルダ
• 03新しいプロジェクトのベースとして使えるスターターアプリケーション
• 04セットアップ手順と環境変数のテンプレートを含むサンプル
• 05コントリビューター向けの生成スクリプトとpre-commit時のlint

ユースケース

• VercelにデプロイするNext.jsプロジェクトの出発点を探す
• edge middlewareやAPI routesなど、特定のパターンの実装方法を学ぶ
• モノレポやボット対策の構成に使えるリファレンスアーキテクチャをコピーする

クイックスタート

1. 1

   solutions フォルダーと starter フォルダーにあるサンプルアプリを確認する

2. 2

   新しいサンプルを追加するため、リポジトリの依存関係をインストールする

   pnpm i
3. 3

   テンプレートから新しいサンプルを生成する

   pnpm new-example

使う前に知っておきたいこと

• !これは個別のサンプルを多数集めたもので、全体を1つのアプリとして実行することはできません。
• !新しいサンプルの追加には、pnpm ツールチェーンと、リポジトリの Prettier および ESLint の pre-commit チェックが必要です。

トピック

よくある質問

examples とは？

Vercel上でアプリを構築するためのパターンを紹介する、主にNext.jsを使ったサンプルアプリ、ソリューション、スターターテンプレート集です。 vercel/examplesは、Vercelが管理するサンプルプロジェクトのモノレポです。主に2つの領域に分かれており、solutionsにはデモやリファレンスアーキテクチャ、ベストプラクティスが、starterには新しいプロジェクトの出発点として使える実用的なアプリケーションが含まれています。

examples は無料で使えますか？ライセンスは？

examples は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

examples は今もメンテナンスされていますか？

活発にメンテナンス中。examples の最終コミットは 2026年10月21日 です。

examples は何に使えますか？

VercelにデプロイするNext.jsプロジェクトの出発点を探す edge middlewareやAPI routesなど、特定のパターンの実装方法を学ぶ モノレポやボット対策の構成に使えるリファレンスアーキテクチャをコピーする

examples のインストール方法は？

solutions フォルダーと starter フォルダーにあるサンプルアプリを確認する 新しいサンプルを追加するため、リポジトリの依存関係をインストールする: pnpm i テンプレートから新しいサンプルを生成する: pnpm new-example

examples はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/vercel/examples