この記事について

筋トレ活動を発信するために作ったブログ「マッスルブログ」の制作記録です。
Next.js × Tailwind CSS を使って、Vercelの公式テンプレートをベースにカスタマイズしました。
初心者がポートフォリオとしても使えるブログを作った過程や、GitHub Copilotを活用して開発効率を爆上げした話を紹介します！

作ったもの：マッスルブログ

GitHub: https://github.com/saitojo1106/muscleclub_honmepage
使用テンプレ：Vercel公式のhttps://supabase.com/
フロントエンド：Next.js, Tailwind CSS
デプロイ：Vercel（Next.jsと相性バッチリ）

技術スタックと採用理由

技術	理由
Next.js	ページを素早く表示できる(SSR対応),使いやすくてテンプレ豊富
Tailwind	CSSを細かく書かずにデザインできる
Vercel	デプロイが早い,Next.jsとの相性◎
Markdown	記事投稿を楽にしたかったので採用（テンプレに元からある）
Github Copilot	コーディング速度と学習効率を爆上げしてくれるAIペアプロ

Copilotが役に立ったポイント

今回の開発では、GitHub Copilotをがっつり活用しました。
特に以下の場面で「手が止まらない」感覚を得られたので、紹介しておきます。

1. Tailwindのクラス補完が神

Tailwindは自由度が高い分、クラスを毎回思い出すのが地味に手間。
Copilotが文脈に合わせて適切なクラスを提案してくれるので、ほぼ手入力いらずでした。

<div className="bg-white rounded-xl shadow-md p-4">
  <h2 className="text-xl font-bold mb-2">タイトル</h2>
  <p className="text-gray-600">本文</p>
</div>

2. App Router周りの学習に最適

Next.jsのApp Routerは新しくて難しいですが、Copilotの提案がちょうどよいお手本に。コードを参考にしながら仕組みを理解でき、自然とキャッチアップできました。

3. 認証・ミドルウェアの実装支援

NextAuth.jsとミドルウェアを使って、管理者ページの保護などを行いましたが、
Copilotの提案でトークン管理・リダイレクト処理もスムーズに実装できました。

if (!token) {
  return NextResponse.redirect('/admin/login');
}

4. 繰り返し処理やUIコンポーネントの雛形生成

「カードをリスト化する」「テーブルを作る」など、面倒な定型処理を瞬時に提案してくれるので、繰り返し作業に時間を取られず、UI/UX改善に集中できました。

カスタマイズしたポイント

1. デザイン面

部員紹介ページ（プロフィールカード）
- Instagramリンク付きで、専門種目と自己記録も一目で分かる！

<div className="flex gap-4 items-center mb-4">
  <p className="text-gray-600 dark:text-gray-300">
    <span className="font-bold">専門種目:</span> {member.speciality}
    <Link href={member.instagram} target="_blank" rel="noopener noreferrer"
      className="ml-2 inline-flex items-center text-pink-500 hover:text-pink-600"
    >
      <InstagramIcon /> <span className="ml-1 hidden sm:inline">@{member.instagram.split('/').pop()}</span>
    </Link>
  </p>
</div>

イベントカレンダー（日本語対応）
- イベントがある日に色が付く＋詳細がポップアップ表示
- 次のイベントまでのカウントダウンも！

// カレンダーの日付ごとにイベントを表示
{hasEvents && (
  <div>{event.title}</div>
)}

大会実績ページ
- 出場選手や順位が一覧表で見やすい
- 写真は大きくヒーロー風に!

<table>
  <thead>
    <tr><th>選手名</th><th>カテゴリー</th><th>順位</th></tr>
  </thead>
  <tbody>{/* 結果を表示 */}</tbody>
</table>

2. 管理機能の追加

NextAuth.js による認証システム
- 管理者しか見れないページを設定
- トークン（JWT）でログイン管理

if (!token) {
  return NextResponse.redirect('/admin/login');
}

簡易データベース（ローカルストレージ利用）
- 本格DBがまだいらない段階での軽量設計
- 新しい部員の追加や削除も可能！

localStorage.setItem("members", JSON.stringify(updatedMembers));

3. UI/UX改善

ダークモード切り替え（システム連動 or 手動選択）
SNSシェア機能(Twitter/Facebook/LINEボタン）
レスポンシブ対応（スマホでもPCでも見やすい）

4. コンテンツ管理

マークダウンベースでブログ管理
- タイトル・タグ・日付などの「メタ情報」も記述可能
タグ表示・フィルター機能もあり！
イベント管理：表示・参加者管理・カウントダウン付き！

苦労したポイント・学び

苦労したところ

ReactとNext.jsのバージョンの相性問題（RC版は注意）
NextAuth.jsでの認証の設計（セッションの扱い）
ローカルDB→本格DB移行を検討中
Git操作（ブランチ統合・競合解決）に苦戦
.env.localの管理（開発/本番の分け方）

学びになったこと

Next.js App RouterやServer Componentsの使い方
JWT認証の流れ、ミドルウェアでのページ保護
再利用できるUIコンポーネント設計
無料サービス（Vercel, MongoDB, Cloudinaryなど）の活用
CRUD機能と非同期処理の基本
Tailwindでのレスポンシブなデザイン
実際の開発フローの体験（要件定義〜公開まで）

💡 今後の改善アイデア

認証機能の強化（ロール・外部ログイン対応）
イベント機能の拡張（申込み・通知・Meet連携）
コミュニティ機能（コメント・掲示板）
データ分析機能（トレ記録・成長チャート・PDF出力）

最後に

Vercelのテンプレを活用すれば、初心者でもポートフォリオとして十分通用するブログが作れます。さらにGitHub Copilotを活用することで、実装スピードも学習効率も格段にアップしました！筋トレ × Web開発のように、「好きなこと × 技術」＝最高のモチベになるので、興味ある方はぜひチャレンジしてみてください！