Generated with sparks and insights from 10 sources

img10

img11

img12

img13

img14

img15

Introduction

  • Next.jsとNewtを使ったウェブサイトのデプロイには、Vercelを使用することが一般的です。

  • VercelはNext.jsの開発元が運営しているホスティングサービスで、Next.jsとの相性が良いです。

  • Newtは日本製のヘッドレスCMSで、APIを通じてコンテンツを配信します。

  • NewtとVercelを連携させることで、コンテンツの更新時に自動でデプロイが行われます。

  • Vercelの無料プラン（Hobbyプラン）を使用することで、個人使用においてはコストを抑えることができます。

Next.jsの概要 [1]

  • Next.jsはReactフレームワークの一つで、サーバーサイドレンダリングや静的サイト生成が可能です。

  • ファイルベースのルーティングを採用しており、開発が容易です。

  • パフォーマンスが重視されており、コード分割や最適化が自動で行われます。

  • Next.js 13以降ではApp Routerが導入され、ルーティングがさらに簡単になりました。

  • 公式サイトから簡単にプロジェクトを作成することができます。

img10

img11

img12

Newtの概要 [2]

  • Newtは2021年3月にサービスを開始した日本製のヘッドレスCMSです。

  • APIを通じてコンテンツを配信し、柔軟なコンテンツモデリングが可能です。

  • 無料プランでもコンテンツ数、API数、メンバー数が無制限です。

  • 日本語対応しており、日本のユーザーにとって使いやすいです。

  • 他のヘッドレスCMSと比較しても優位性があります。

Vercelの概要 [2]

  • VercelはNext.jsの開発元が運営するホスティングサービスです。

  • 個人使用（Hobbyプラン）は無料で利用できます。

  • Next.jsとの相性が良く、新しい機能をすぐに利用できます。

  • CI/CDの設定が簡単で、ソースコードの修正やコンテンツの更新時に自動でデプロイが行われます。

  • 独自ドメインの設定も可能です。

img10

img11

デプロイ手順 [2]

  • Next.jsプロジェクトを作成し、NewtのAPI設定を行います。

  • Vercelにログインし、GitHubリポジトリと連携します。

  • Vercelの設定で環境変数を追加し、デプロイを実行します。

  • デプロイが完了すると、Vercelのドメインでプロジェクトを確認できます。

  • 独自ドメインを設定する場合は、Vercelの管理画面から設定を行います。

img10

img11

img12

自動デプロイの設定 [2]

  • VercelのDashboardからSettingsタブを選択し、Git > Deploy Hooksでhookを作成します。

  • hookの名前を設定し、対象ブランチを指定します。

  • microCMSの管理画面でWebhookの設定を行い、VercelのWebhook URLを入力します。

  • 記事を更新すると自動でビルド・デプロイが行われます。

  • 複数のコンテンツを追加する場合は、それぞれにWebhookの設定が必要です。

トラブルシューティング [2]

  • デプロイが反映されない場合、Vercelの設定を確認します。

  • 環境変数が正しく設定されているか確認します。

  • NewtのAPIキーやドメインが正しいか確認します。

  • VercelのDeploy Hooksが正しく設定されているか確認します。

  • エラーログを確認し、必要に応じて修正を行います。

img10

Related Videos

<br><br>

<div class="-md-ext-youtube-widget"> { "title": "Newt \u3068 Next.js \u3067\u4f01\u696d\u30b5\u30a4\u30c8\u3092\u4f5c\u3063\u3066\u307f\u308b", "link": "https://www.youtube.com/watch?v=I9vC-dKo76A", "channel": { "name": ""}, "published_date": "Apr 23, 2024", "length": "" }</div>

<div class="-md-ext-youtube-widget"> { "title": "Next.js 13\u5165\u9580 - App Router\u5bfe\u5fdc", "link": "https://www.youtube.com/watch?v=lO-Ulx1rclk", "channel": { "name": ""}, "published_date": "Aug 23, 2023", "length": "" }</div>

<div class="-md-ext-youtube-widget"> { "title": "\u3010\u6709\u6599\u7d1a\u3011Next.js\u3067\u30b3\u30fc\u30dd\u30ec\u30fc\u30c8\u30b5\u30a4\u30c8\u4f5c\u3063\u305f\u306e\u3067\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u3068 ...", "link": "https://www.youtube.com/watch?v=V0fNSj4R8tQ", "channel": { "name": ""}, "published_date": "Mar 6, 2023", "length": "" }</div>