軽量Next.js 16スターター：ツールサイト・コンテンツサイト・LPを素早く構築

nextjs

nextjsテンプレート

nextjsボイラープレート

多言語サイト

i18n

国際化

mdxブログ

seo対策

メタデータ

open-graph

tailwindcss

typescript

vercel

react

ウェブサイトテンプレート

スターター

ニュースレター

メール配信

resend

googleアナリティクス

plausible

adsense

小規模サイトを素早く立ち上げるための軽量なNext.js 16テンプレート。クローン、設定、数分でデプロイ。i18n、MDXブログ、SEO対応。無料ツールサイト、コンテンツサイト、ランディングページに最適。

なぜNext.jsスターターテンプレートが必要なのか

モダンなWebサイトをゼロから構築するには、多くの時間がかかります。ルーティング、スタイリング、国際化、SEO、アナリティクスなど、設定すべき項目は山ほどあります。

Next.js Starterは、小規模サイトを素早く立ち上げるために設計された軽量な多言語Next.js 16テンプレートです。無料ツールサイト、コンテンツサイト、個人ブログ、ランディングページなど、クローンして設定するだけで数分でデプロイできます。

必要十分な機能

🌐 標準搭載の国際化（i18n）

グローバルサイト構築で最も難しいのが多言語対応です。このテンプレートはnext-intlを使用し、以下の機能を提供します：

3言語をサポート：英語、中国語、日本語に標準対応
ロケールベースのルーティング：/en、/zh、/jaのパスを自動生成
簡単な翻訳管理：JSONベースの翻訳ファイル
言語検出アラート：ブラウザの言語設定に基づいて自動的に言語切り替えを提案

新しい言語の追加は簡単です：

i18n/messages/に翻訳ファイルを作成
ルーティング設定を更新
新しいロケールのコンテンツを追加

📝 MDXブログシステム

MDXでブログ記事を書けます。Markdownのシンプルさと、Reactコンポーネントのパワーを両立：

フロントマターサポート：タイトル、説明、タグ、日付、公開設定
記事のピン留め：重要な記事を上部に固定表示
下書きモード：公開前の記事を非表示に
言語別ブログ：各言語で異なるコンテンツを管理可能
カスタムコンポーネント：Markdown内でReactコンポーネントを使用可能

🎨 Tailwind CSSによるモダンなUI

Tailwind CSSとshadcn/uiコンポーネントを使用：

全デバイス対応のレスポンシブデザイン
ダーク/ライトテーマ切り替え（システム設定に自動対応）
クリーンでプロフェッショナルな見た目
CSS変数で簡単にカスタマイズ可能

⚙️ 一元管理のサイト設定

すべてのサイト情報を config/site.ts で一元管理：

export const siteConfig = {
  name: "サイト名",
  tagLine: 'キャッチコピー',
  description: "サイトの説明",
  url: BASE_URL,
  authors: [{ name: "あなた", url: "https://yoursite.com" }],
  socialLinks: { twitter, github, discord, email },
  icons: { icon, shortcut, apple },
}

複数のファイルを探し回る必要はありません。一箇所を変更するだけで、メタデータ、フッター、Open Graphタグなど全てに反映されます。

📄 法的ページテンプレート付属

すべてのWebサイトに必要な法的ページのテンプレートを用意：

アバウトページ (content/about/)
プライバシーポリシー (content/privacy-policy/)
利用規約 (content/terms-of-service/)

各ページは3言語（英語、中国語、日本語）に対応。MDXコンテンツを編集するだけでカスタマイズ可能です。

🔍 SEOの基本機能

実用的なメタデータユーティリティ（lib/metadata.ts）を搭載：

動的なタイトル生成（適切なフォーマット）
sitemap.xmlの自動生成
robots.txt設定
Open GraphとTwitterカード（画像サポート付き）
Canonical URLとhreflangタグ（多言語SEO対応）
対応言語の代替リンク自動生成
サーバーサイドレンダリングによる高速な初回読み込み

constructMetadata()を呼び出すだけで、検索エンジンとソーシャルシェア用に最適化されたメタデータを生成できます。

📊 ワンライン設定のアナリティクス連携

主要なアナリティクスプラットフォームに対応 - .envにIDを追加するだけ：

NEXT_PUBLIC_GOOGLE_ANALYTICS=G-XXXXXXXX

NEXT_PUBLIC_GOOGLE_ADSENSE=ca-pub-XXXXXXXX

NEXT_PUBLIC_PLAUSIBLE_DOMAIN=yourdomain.com
NEXT_PUBLIC_PLAUSIBLE_SRC=https://

対応プラットフォーム：

Google Analytics - ユーザー行動とトラフィックソースを追跡
Google AdSense - コンテンツの収益化
Plausible Analytics - プライバシー重視、GDPR準拠のアナリティクス
Vercel Analytics - 組み込みパフォーマンス監視

各アナリティクスコンポーネントは本番環境でのみ読み込まれ、開発環境をクリーンに保ちます。

📧 シンプルなニュースレター（Resend対応）

オーディエンス構築のためのシンプルなニュースレター機能：

すぐに使える購読フォーム：フッターに配置済み
メール検証：基本的なエラーハンドリング付き
Resend統合：信頼性の高いメール配信
ウェルカムメールテンプレート：購読者への自動送信
レート制限：Upstash Redisによる不正アクセス防止

ニュースレター機能はResendを使用しています。開発者向けに設計されたモダンなメールAPIです。環境変数に設定するだけで利用可能：

RESEND_API_KEY=your_resend_api_key
RESEND_AUDIENCE_ID=your_audience_id

emails/フォルダにはReact製のメールテンプレートも用意されています：

newsletter-welcome.tsx - 新規購読者へのウェルカムメール
submission-notification.tsx - プロダクト投稿時の通知メール

技術スタック

ミニマルだけど実用的：

| 技術 | 用途 | |------|------| | Next.js 16 | App Router対応のReactフレームワーク | | TypeScript | 型安全な開発 | | Tailwind CSS | ユーティリティファーストCSS | | shadcn/ui | 高品質UIコンポーネント | | next-intl | 国際化 | | MDX | コンテンツ作成 | | Zustand | 状態管理 | | Resend | メール送信サービス |

5分でスタート

必要条件

Node.js 20.x以上
pnpm 9.0以上（推奨）

クイックインストール

# リポジトリをクローン
git clone https://github.com/weijunext/nextjs-starter.git
cd nextjs-starter

# 依存関係をインストール
pnpm install

# 環境変数をコピー
cp .env.example .env

# 開発サーバーを起動
pnpm dev

http://localhost:3000にアクセスすると、サイトが起動しています！

Vercelへのワンクリックデプロイ

最速で公開するには、Vercelのワンクリックデプロイを使用してください：

プロジェクト構成

nextjs-starter/
├── app/[locale]/     # 国際化対応ページ
├── blogs/            # 言語別MDXブログコンテンツ
├── components/       # 再利用可能なReactコンポーネント
├── config/           # サイト設定
├── content/          # 静的ページコンテンツ（MDX）
├── i18n/             # 翻訳ファイルとルーティング設定
├── lib/              # ユーティリティ関数
└── public/           # 静的アセット

このテンプレートが向いている人

小規模サイトを素早く立ち上げたい方に最適です：

無料ツールサイト — オンラインツールを作って素早くトラフィックを獲得
コンテンツサイト / SEOサイト — MDXでコンテンツを書いて、SEOフレンドリーに
ランディングページ — プロダクトを紹介し、メールを収集
個人ブログ — 多言語対応、ダークモード、すぐに使える
クライアント案件 — シンプルなサイトを素早く納品

💭 ユーザー認証、決済、データベースが必要ですか？ このテンプレートはミニマルに設計されており、それらの機能は含まれていません。ログインやサブスクリプション決済が必要なSaaSプロダクトを構築する場合は、NEXTY.DEVをご覧ください。同じ技術スタックで、Better-Auth、Drizzle ORM、Stripe/Creemが統合されています。シンプルに言えば：この無料テンプレートはシンプルな小規模サイト向け、NEXTYは複雑なプロダクトサイト向けです。

なぜこのテンプレート？

肥大化したスターターとは違い、このテンプレートは：

ミニマル — 必要な機能だけ、余計な複雑さなし
素早くデプロイ — クローン、設定、数分でデプロイ
実績あり — 成功したプロダクトで使用（5ヶ月で526万UVを達成したSEOコンテスト優勝サイトを含む）
継続的にメンテナンス — 最新のNext.jsバージョンに対応

まとめ

ボイラープレートの設定に時間を費やすのはやめましょう。

このテンプレートがやることは一つ：多言語の小規模サイトをできるだけ早く立ち上げること。i18n、ブログ、SEO、アナリティクス、ニュースレター — 必要な基本機能はすべて揃っています。それ以上は何もありません。クローン、設定、デプロイ。今日中に公開しましょう。

ご質問やご提案はGitHubでIssueを作成するか、Discordコミュニティにご参加ください。