【🚀 Next.js×Contentful×Vercelで未来を創る✨】高速＆スマートなサイト再構築プロジェクト 

# Next.js × Contentful × Vercel で実現するサイト再構築プロジェクト 🚀

こんにちは！ 現役エンジニアとして活躍しているテックブロガーの@YushiYamamotoです。今回は、**Next.js**、**Contentful**、**Vercel** を活用して、サイトの高速化とコンテンツ管理の柔軟性を両立する再構築プロジェクトについてお話しします。

既存のスタジオからのコンテンツ移管や、**Largest Contentful Paint（LCP）** の改善施策も含まれるので、初心者から中級者まで、最新技術を学びたい方にぴったりの内容です。この記事では、具体的な手順やコード例、図解を交えて分かりやすく解説します。さあ、一緒に学びながら、未来のサイトを作り上げましょう！

---

## プロジェクトの目的と技術の概要 📝

### なぜサイトを再構築するのか？

Webサイトの課題としてよく挙がるのが、「ページの読み込みが遅い」「コンテンツ更新が面倒」「デザインや機能の拡張が難しい」といった点です。これらを解決するため、今回は **Next.js**、**Contentful**、**Vercel** を組み合わせたプロジェクトを進めます。目標は、**高速で柔軟性のあるサイト** を構築し、ユーザ体験を向上させることです。

### 各技術の役割とメリット

- **Next.js** 🛠️  
  Reactベースのフレームワークで、**静的生成（SSG）** や **サーバーサイドレンダリング（SSR）** が得意です。これにより高速なページ表示とSEO対策が容易に実現できます。

- **Contentful** 📦  
  ヘッドレスCMSとして、コンテンツをAPI経由で管理・配信します。従来のCMSとは異なり、フロントエンドの制約から解放され、複数のプラットフォームで同じコンテンツを利用できるため、開発者と編集者がそれぞれ独立して作業できます。

- **Vercel** ☁️  
  Next.js を開発したチームが提供するプラットフォームで、**Git連携による自動デプロイ** と **グローバルCDN** によりパフォーマンス向上が実現されます。

この3つの技術を組み合わせることで、**パフォーマンスと管理の両立** を目指します。

---

## Contentful の API で効率的なコンテンツ移管 🔄

### Contentful とは？

Contentful は、デザインや表示部分を担当せず、コンテンツだけをAPIで提供する**ヘッドレスCMS**です。これにより、フロントエンド側の自由度が高まり、さまざまなプラットフォームで同じデータを活用できます。

### 既存スタジオからのコンテンツ移管

既存のスタジオ（別のCMSや静的サイト）からContentfulへデータを移行する場合、**APIを活用した自動化**がおすすめです。手順は以下の通りです。

#### 手順

- **コンテンツモデルの設計**  
  Contentful のダッシュボードで、移管するデータに合わせたモデル（例：ブログ記事なら「タイトル」「本文」「画像」など）を作成します。

- **APIトークンの取得**  
  移管用スクリプトでは、コンテンツの作成・編集に必要な**Content Management Token**を使用します。なお、コンテンツの取得には**Content Delivery API キー**を利用します。

- **移管スクリプトの実装**  
  既存データをJSON形式などに変換し、Contentful にアップロードするスクリプトを作成します。

#### コード例

```javascript
const contentful = require('contentful-management');
const client = contentful.createClient({
  accessToken: 'YOUR_CONTENT_MANAGEMENT_TOKEN'
});

client.getSpace('YOUR_SPACE_ID')
  .then(space => space.createEntry('blogPost', {
    fields: {
      title: { 'en-US': 'My First Post' },
      body: { 'en-US': 'This is a sample blog post.' }
    }
  }))
  .then(entry => console.log('Entry created:', entry))
  .catch(console.error);
```

このようなスクリプトを利用することで、大量のコンテンツ移管も効率的に行えます。

---

## Next.js の静的生成で高速レンダリング ⚡

### 静的生成（SSG）の魅力

Next.js の **静的生成（SSG）** は、ビルド時にHTMLを生成し、リクエスト時に即座に配信する仕組みです。これにより、ブログ記事やランディングページなど更新頻度が低いコンテンツの表示速度を向上させ、ユーザ体験を改善できます。

### Contentful との連携方法

Next.js で Contentful のデータを取得する際、`getStaticProps` を用いてビルド時にデータをフェッチします。なお、記事の例では entries が存在しない場合の対応を追加し、エラーを防ぐ実装に修正しています。

#### コード例

```javascript
// pages/blog/[slug].js
import { createClient } from 'contentful';

export async function getStaticProps({ params }) {
  const client = createClient({
    space: process.env.NEXT_PUBLIC_SPACE_ID, // クライアントサイドに公開しても問題ない場合はNEXT_PUBLIC_を付与
    accessToken: process.env.CONTENTFUL_DELIVERY_API_KEY,
  });

  const response = await client.getEntries({
    content_type: 'blogPost',
    'fields.slug': params.slug,
  });

  if (!response.items.length) {
    return {
      notFound: true,
    };
  }

  return {
    props: {
      post: response.items[0],
    },
  };
}

export async function getStaticPaths() {
  const client = createClient({
    space: process.env.NEXT_PUBLIC_SPACE_ID,
    accessToken: process.env.CONTENTFUL_DELIVERY_API_KEY,
  });

  const response = await client.getEntries({ content_type: 'blogPost' });
  const paths = response.items.map(item => ({
    params: { slug: item.fields.slug },
  }));

  return { paths, fallback: false };
}

export default function BlogPost({ post }) {
  return (
    
      {post.fields.title}
      {post.fields.body}
    
  );
}
```

ここでは、`getStaticPaths` により動的ルートを定義し、各記事のページを生成しています。

---

## Next.js の Image コンポーネントと LCP 改善 🎨

### Next.js の Image コンポーネント

Next.js の `Image` コンポーネントは、画像の自動リサイズや最適化、遅延読み込みなどの機能を提供します。特に、`priority` 属性は、**Largest Contentful Paint（LCP）** に該当する重要な画像の読み込みを優先させるために使用されます。これにより、ユーザが最初に目にする重要なビジュアルコンテンツの表示が高速化されます。

#### コード例

```jsx
import Image from 'next/image';

export default function Hero() {
  return (
    
  );
}
```

上記の例では、`priority` 属性によってHero画像の読み込みが最優先され、ページのLCP改善に寄与します。

---

## Vercel の高速デプロイと環境変数の管理 🌐

### Vercel の特徴

Vercel は、Git連携による自動デプロイを実現し、コードをプッシュするだけで全世界へ高速配信される環境を提供します。また、グローバルCDNの恩恵により、ユーザのアクセス元に応じた最適な配信が可能です。

### デプロイ手順と環境変数の命名

1. **プロジェクトの準備**  
   Next.js プロジェクトをGitHubなどのリポジトリにプッシュします。

2. **Vercel にインポート**  
   [Vercelダッシュボード](https://vercel.com/)からリポジトリをインポートします。

3. **環境変数の設定**  
   Contentful の**SPACE_ID** や**ACCESS_TOKEN**（※  
   ・サーバーサイドのみで使用する場合はそのままで構いませんが、  
   ・クライアントサイドで参照する必要がある変数は `NEXT_PUBLIC_` プレフィックスを付与してください）  
   などを設定します。

4. **デプロイ実行**  
   自動でビルドされ、グローバルCDNにより高速にサイトが配信されます。

このような運用により、Vercel を利用した迅速なデプロイと、環境変数の適切な管理が実現できます。

---

## プロジェクトのフローチャート 📊

以下は、コンテンツの作成からデプロイまでの流れを示した図です。

```mermaid
graph TD;
    A[Contentful] -->|API経由| B[Next.js];
    B -->|SSGでビルド| C[静的HTML];
    C -->|デプロイ| D[Vercel];
    D -->|グローバルCDN| E[ユーザ];
```

---

## まとめと次のステップ 📚

今回のプロジェクトで学べるポイントは以下の通りです：

- **Contentful** を用いた効率的なコンテンツ管理と、Content Management Token の正しい活用  
- **Next.js** による静的生成や動的ルーティング、そして重要な画像の優先読み込みによる LCP 改善  
- **Vercel** による自動デプロイと環境変数の適切な管理、グローバルCDNを利用したパフォーマンス最適化  

これらの知識を活用することで、高速かつ柔軟なサイト構築が可能となります。ぜひ実際に手を動かして、新しい技術に挑戦してください！

### 参考リンク

- [Contentful 公式サイト](https://www.contentful.com/)
- [Vercel 公式サイト](https://vercel.com/)
- [Next.js 公式ドキュメント](https://nextjs.org/docs)

---

### 最後に：業務委託のご相談を承ります

私は、業務委託エンジニアとしてWEB制作やシステム開発を請け負っています。最新技術を活用し、レスポンシブなWebサイトやインタラクティブなアプリケーション、API連携など、幅広いニーズに対応可能です。

「課題解決に向けた即戦力が欲しい」「高品質なWeb制作を依頼したい」という方は、ぜひお気軽にご相談ください。一緒にビジネスの成長を目指しましょう！

👉 [ポートフォリオ](https://yushiyamamoto.vercel.app/)