無料Next.jsテンプレート（ライセンスと更新状況を確認済み）
無料Next.jsテンプレート
無料Next.jsテンプレート：確認済みのMITライセンスのスターター10選 | We.Inc
ECサイト、SaaS、ブログ、CMS連携のマーケティングサイト向けの、無料でMITライセンスのNext.jsテンプレート10選。それぞれライセンスと活動状況を確認済みです。コピーして使える独自のセクションや、テンプレートからの始め方も紹介します。
おすすめの無料Next.jsテンプレートは、ショップなら Next.js Commerce、サブスクリプション型アプリなら SaaS Starter、ブログなら Tailwind Next.js Starter Blog、編集者が更新できるマーケティングサイトなら Payload の website テンプレートです。以下の10個はすべてMITライセンスで、GitHubでライセンスと最近の活動状況を確認しています。ランディングページやポートフォリオには、私たちの無料セクションを組み合わせてください。
種類別のおすすめ
- オンラインショップ
- Next.js Commerce
- サブスクリプション型SaaS
- SaaS Starter
- ブログ
- Tailwind Next.js Starter Blog
- 編集者が更新するマーケティングサイト
- Payload website テンプレート
- ランディングページやポートフォリオ
- 私たちのヒーロー、料金表、ダッシュボードのセクション
掲載しているのは、明確なオープンソースライセンスがあり、確認時点でアーカイブされていなかったテンプレートだけです。Next.jsテンプレートの検索結果には有料テーマや放置されたリポジトリが混ざっています。このリストは、無料でメンテナンスされているものを、作りたいもの別にまとめたものです。
- 作りたいサイトの種類を選びます。
- リポジトリを開き、2つ目の表のチェックを行います。
- create-next-app を使って、そのテンプレートからプロジェクトを始めます。
- コンテンツ、色、利用サービスを自分のものに置き換えます。
- テンプレートは完成したサイトではなく出発点です。デモのコンテンツや文章を置き換える時間を見込んでおきましょう。
- 使わない機能はすぐに削除しましょう。使わないコードもメンテナンスが必要になります。
- MITライセンスの条件どおり、テンプレートのライセンスファイルと表示をプロジェクトに残しておきましょう。
- アプリではなくビジネス用のWebサイトが必要なら、開発者向けテンプレートを手直しするよりWebサイトビルダーのほうが早く作れます。
よくある質問
これらのテンプレートをクライアントワークや商用で使えますか？
はい。MITライセンスでは、コード内の著作権表示とライセンス表示を残す限り、商用利用、改変、再配布が認められています。
ランディングページやポートフォリオのテンプレートはどこにありますか？
無料でメンテナンスされ、ライセンスが明確なNext.jsのランディングページやポートフォリオのテンプレートはほとんどありません。私たちのコンポーネントギャラリーには、どのNext.jsページにも組み込める、React と Tailwind で作られたコピー可能なヒーロー、料金表、ダッシュボードのセクションがあります。
App Router と Pages Router のどちらのテンプレートを選ぶべきですか？
新しいプロジェクトなら App Router です。Server Components に対応しており、Next.jsの新機能もここに追加されます。古い Pages Router のテンプレートも動作しますが、最新化するにはより多くの変更が必要です。
Vercel には公式のテンプレートギャラリーがありますか？
はい。vercel.com/templates に、サードパーティ製を含む多くのテンプレートが掲載されています。すべてがオープンソースではないため、それぞれのライセンスを確認してください。
私たちが提供するパーツ
- これらのテンプレートに加えて、私たちの無料コンポーネントギャラリーには、Next.jsアプリにコピーできる React と Tailwind のセクションがあります。ヒーローセクション、料金表、ダッシュボード、フォーム、テーブル、タブなどです。各パーツには、コード付きの専用ページがあります。
テンプレート一覧
無料でMITライセンスのNext.jsテンプレート（2026年10月13日確認）
- Next.js Commerce
- EC
- vercel/commerce
- App Router、Shopify storefront API、Tailwind
- Payload ecommerce テンプレート
- EC
- payloadcms/payload (templates/ecommerce)
- Next.js に組み込んだ Payload CMS、Stripe
- SaaS Starter
- SaaS
- nextjs/saas-starter
- Postgres、Drizzle、Stripe、shadcn/ui
- Next.js Boilerplate
- SaaS / アプリ
- ixartz/Next-js-Boilerplate
- TypeScript、Tailwind 4、Drizzle、Vitest、Playwright
- Taxonomy
- アプリ
- shadcn-ui/taxonomy
- App Router、Server Components、shadcn/ui
- Tailwind Next.js Starter Blog
- ブログ
- timlrx/tailwind-nextjs-starter-blog
- MDX、Tailwind、検索、タグ
- Blog Starter
- ブログ
- vercel/next.js (examples/blog-starter)
- Markdown ファイル、Tailwind
- Payload website テンプレート
- マーケティングサイト + CMS
- payloadcms/payload (templates/website)
- CMS のサンプル
- マーケティングサイト + CMS
- vercel/next.js (examples/cms-*)
- Sanity、Contentful、Strapi、Storyblok など多数と組み合わせた Next.js
- Vercel examples
- パターン集
- vercel/examples
- Edge middleware、認証、ストレージなど
選ぶ前に
テンプレートを土台にする前に確認すること
- ライセンスファイルが MIT、Apache などになっている
- ライセンスがなければ、コードを再利用する権利がありません
- 最終コミットが1年以内
- 古いテンプレートは古いNext.jsのAPIを使っている可能性があります
- App Router（13.4+）と Pages Router のテンプレートは、作りが大きく異なります
- インストールやビルドのエラーに関する未解決の issue
- 今でも動くかどうかがわかります
- 必要な有料サービス
- 特定のデータベース、認証、決済のアカウントを前提としているテンプレートもあります
始め方
どのテンプレートからでも始められます
create-next-app は、Next.jsリポジトリ内のサンプルからでも、公開されている任意のGitHubリポジトリからでもプロジェクトを始められます。
ランディングページのセクションが必要ならこちら：
無料UIコンポーネント
EC
コマースのバックエンドに接続する高速なストアフロントです。デフォルトは Shopify です。
EC
商品、カート、決済と管理画面を1つのアプリにまとめています。
SaaS
ログイン、チーム、料金ページ、Stripe のサブスクリプションを備え、あえて小さく作られています。
SaaS / アプリ
ツール類が充実しています。テスト、リント、Storybook、エラー監視があらかじめ設定されています。
アプリ
App Router が登場したばかりの頃に作られたサンプルアプリです。読む価値はありますが、再利用する前にバージョンを確認してください。
ブログ
タグ、検索、RSS、複数のレイアウトを備えた、ブログ執筆のための完全な環境です。
ブログ
最もシンプルなブログです。フォルダー内の Markdown の記事を静的に生成します。
マーケティングサイト + CMS
編集者が管理画面で並べ替えられるブロックでページを組み立てます。
マーケティングサイト + CMS
CMSごとに小さなサンプルが1つずつあり、使うCMSが決まっている場合に便利です。
パターン集
サイト全体ではなく、1つの手法に絞ったサンプル集です。
種類別のテンプレート
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る