close

NextJS Base ブログ: Next.js 15 と Tailwind を使ったモダンなブログスターター

Next.js で構築されたモダンなブログスターターテンプレートをお探しなら、NextJS Base Blogプロジェクトは最適な出発点です。これは、Next.js 15、React 19、TypeScript、Tailwind CSS 4で構築された、フル機能のオープンソースブログアプリケーションです。

このプロジェクトは、クリーンなアーキテクチャ、最新の UI components、モック API レイヤーを提供するため、バックエンドをセットアップせずにブログを迅速に構築したい開発者に最適です。

GitHub リポジトリ: https://github.com/bfotool/nextjs-base-blog

このプロジェクトは特に次の場合に役立ちます:

  • Next.js アプリを学習する開発者Router

  • ブログやコンテンツウェブサイトを素早く構築する

  • Next.js のボイラープレート プロジェクトを作成する

  • 実際のバックエンドAPIを接続する前にUI機能を開発する

プロジェクト概要

NextJS Base Blog は、最新のコンテンツ Web サイトに見られる多くの一般的な機能を備えた、すぐに運用可能なブログ テンプレートとして設計されています。

プロジェクトの内容は次のとおりです。

  • 注目の投稿のあるホームページ

  • ブログ投稿ページ

  • カテゴリフィルタリング

  • 全文検索

  • ページ付け

  • 目次

  • 関連記事

  • ダーク/ライトテーマ

このプロジェクトで最も興味深い点の一つは、Axiosインターセプターを用いてREST APIをシミュレートするFake APIレイヤーです。これにより、開発者はバックエンドサーバーを必要とせずにアプリケーションを構築・テストできます。

主な特徴

ホームページ

ホームページにはいくつかの重要なセクションが表示されます。

  • 注目のヒーロー投稿

  • カテゴリフィルター

  • ブログ投稿のグリッド

  • ページ区切りのナビゲーション

レイアウトは完全にレスポンシブで、デスクトップとモバイル デバイスの両方に最適化されています。

ブログ投稿ページ

各記事には動的ルート経由でアクセスできます。

/blog/[slug]

ブログ投稿ページには、いくつかの便利な機能が含まれています。

  • 記事全文

  • 自動目次

  • 推定読書時間

  • ソーシャルシェアボタン

  • 関連記事の提案

これらの機能は、最新のブログ プラットフォームに類似したプロフェッショナルな読書体験を生み出すのに役立ちます。

カテゴリページ

ユーザーはカテゴリ別に投稿を閲覧できます。

ルート例:

/blog/category/[slug]

この機能により、読者は特定のトピック内のコンテンツを探索できます。

検索機能

このプロジェクトには組み込みの検索ページが含まれています。

/search

検索は以下をサポートします:

  • リアルタイムの結果

  • デバウンスされた入力

  • タイトル、抜粋、タグを検索する

これにより、使いやすさが向上し、ユーザーは関連するコンテンツをすばやく見つけられるようになります。

会社概要と連絡先ページ

このプロジェクトには、専門的なブログでよく見られる追加ページも含まれています。

このページについて

「About」ページでは以下を紹介しています。

  • チーム

  • プロジェクトのストーリー

  • コアバリュー

お問い合わせページ

連絡先ページには、次の内容を含む完全に検証されたフォームが含まれています。

  • フォーム検証

  • トースト通知

  • 成功とエラーのフィードバック

ダークモードのサポート

このブログはダークモードとライトモードをサポートしています。

機能は次のとおりです:

  • 自動システムテーマ検出

  • 手動トグル

  • localStorageを使用したテーマの永続化

偽の API レイヤー(バックエンドなしの開発)

このプロジェクトの最も興味深い部分の一つは、偽の API システムです。

アプリケーションは、実際のサーバーを呼び出す代わりに、Axios インターセプターを使用してREST API 応答をシミュレートします。

偽APIの仕組み

  1. Axios インスタンスは次の場所に作成されます:

src/services/api-client.ts

  1. 環境変数が有効になっている場合:

NEXT_PUBLIC_USE_MOCK_API=true

  1. リクエストはネットワークに到達する前に傍受されます。

  2. モック ハンドラーは、現実的な遅延(200 ～ 600 ミリ秒) で偽の応答を返します。

  3. 応答は実際の API 応答のように動作します。

モックデータは次の場所に保存されます:

src/mocks/

含む：

  • サンプル投稿

  • 著者

  • カテゴリー

利用可能なAPIエンドポイント

モック API はいくつかのエンドポイントをサポートしています。

方法 終点 説明
得る /投稿 ページ分けされたブログ投稿
得る /投稿/おすすめ 注目の投稿
得る /投稿/:スラッグ 単一のブログ投稿
得る /カテゴリー カテゴリリスト
得る /著者 著者リスト
役職 /接触 お問い合わせフォームを送信

テクノロジースタック

このプロジェクトでは最新のフロントエンド スタックを使用します。

層 テクノロジー
フレームワーク Next.js 15
UIライブラリ リアクト19
言語 タイプスクリプト
スタイリング テイルウィンド CSS 4
HTTPクライアント アクシオス
アイコン ルサイドリアクト
リンティング ESLint
書式設定 もっときれい

このスタックは以下を提供します:

  • 強力な型安全性

  • 保守可能なアーキテクチャ

  • 最新の開発者エクスペリエンス

プロジェクト構造

プロジェクト構造は、クリーンかつスケーラブルなアーキテクチャに従います。

src/ 
├── app/ 
├── components/ 
├── services/ 
├── mocks/ 
├── contexts/ 
├── hooks/ 
├── types/ 
└── lib/

アプリRouter

ディレクトリappにはすべてのアプリケーション ルートが含まれます。

例:

app/page.tsx 
app/blog/[slug]/page.tsx 
app/search/page.tsx

これは、Next.js の新しいバージョンで導入されたNext.js アプリRouterアーキテクチャに従います。

コンポーネント

UIcomponentsは論理グループに編成されています。

components/layout 
components/common 
components/blog

この構造により、UI コードが整理され、保守が容易になります。

サービス層

フォルダーservicesには API 関連のロジックが含まれています。

  • APIクライアント構成

  • 郵便サービス

  • カテゴリサービス

  • お問い合わせフォームサービス

このレイヤーはデータ取得ロジックを UI からcomponents分離し、スケーラビリティを向上させます。

インストールガイド

要件

始める前に、次のものを用意してください。

  • Node.js 18以降

  • npm、yarn、またはpnpm

リポジトリのクローンを作成する

git clone https://github.com/bfotool/nextjs-base-blog.git 
cd nextjs-base-blog

依存関係をインストールする

npm install

環境変数を設定する

cp .env.example .env

開発サーバーを起動する

npm run dev

ブラウザを開いて次のサイトにアクセスしてください:

http://localhost:3000

利用可能なスクリプト

指示 説明
npm 実行 dev 開発サーバーを起動する
npm 実行ビルド プロダクションビルドを作成する
npm 実行開始 本番サーバーを起動する
npm 実行 lint ESLintを実行する
npm 実行形式 Prettierでコードをフォーマットする
npm 実行型チェック TypeScriptチェックを実行する

実際のAPIへの切り替え

プロジェクトを実際のバックエンド API に接続する場合は、次の手順に従ってください。

ステップ1: Mock APIを無効にする

ファイルを編集します.env。

NEXT_PUBLIC_USE_MOCK_API=false

ステップ2: APIベースURLを設定する

NEXT_PUBLIC_API_BASE_URL=https://your-api-server.com

ステップ3: データ型を一致させる

バックエンド API が次の TypeScript 定義に一致するデータを返すことを確認します。

src/types/index.ts

追加のコード変更は必要ありません。

コンテンツのカスタマイズ

モックコンテンツは次の場所で編集できます:

src/mocks/posts.ts 
src/mocks/categories.ts 
src/mocks/authors.ts

これにより、開発者はデモのコンテンツをすばやくカスタマイズできます。

テーマとUIのカスタマイズ

グローバル スタイリングは次の場所にあります。

src/app/globals.css

このプロジェクトでは次のフォントを使用します。

  • DMサンズ

  • ジェットブレインズ モノ

デザイン要件に応じてスタイルを変更したり、フォントを置き換えたりすることができます。

結論

NextJS Base Blog は、 Next.js を使用してブログを構築するための強力で最新のスターター テンプレートです。

このプロジェクトの主な利点は次のとおりです。

  • 最新の技術スタック

  • クリーンアーキテクチャ

  • 開発用のモックAPI

  • 実際のバックエンドAPIとの簡単な統合

  • レスポンシブなUIと最新機能

Next.js を使用してブログ、開発者向け Web サイト、またはコンテンツ プラットフォームを構築する場合、このリポジトリを使用すると開発時間を大幅に節約できます。

ソースコードはこちらをご覧ください: https://github.com/bfotool/nextjs-base-blog