Next.js から Sanity のコンテンツを取得する

この記事では新しいプロジェクトを作成して、Next.js で Sanity で管理しているコンテンツを取得する手順を紹介します。

前提条件

すでに Sanity に関するサンプルを起動できている基本的な部分を理解していることを前提とします。このサイトでは以下のガイドで簡単に紹介をしています。

Headless CMS 製品である Sanity を利用するにあたって、全体を理解するためのガイドを用意してみました。

また、Wordpress からコンテンツの移行をしたプロジェクトをベースに紹介を進めて行きます。

このシリーズでは Wordpress で管理しているコンテンツを Sanity に移行するための手順を紹介します。

今回はブログサイトのために、Wordpress のプロジェクトからのコードをそのまま引き継いで進めます。同じリポジトリで Sanity Studio のコードを、また合わせて Next.js のコードを管理するために、以下のような構成とします。

apps/studio のフォルダには、以下のリポジトリからのコードを利用しています。

すでに studio のフォルダには必要なファイルが準備できている状態です。

続いて、Next.js のプロジェクトを作成します。コマンドラインで以下のコマンドを実行します。

プロジェクトの名前、そして推奨の設定を利用するかの確認が表示されます。今回は以下のように選択しました。

しばらくするとフォルダが作成されます。

プロジェクトのディレクトリに入って、 npm run dev を実行して Next.js のプロジェクトが起動することを確認します。

これで準備ができました。

Next.js から Sanity に対してコンテンツを取得するためのパッケージを追加いていきます。以下のコマンドを nextjs のフォルダの中で実行します。

コンテンツにアクセスするための Sanity Client のファイルを追加します。サンプルのコードは以下のようになります。YOUR-PROJECT-ID に関しては、Sanity のプロジェクトの ID を利用してください。

apps/nextjs/sanity/client.ts

実際の Next.js のトップページにあるファイルを以下のように書き換えます。なお、Sanity のサイトで公開しているコードとはことなり、公開日のパラメーターを date に変更してあります。

apps/nextjs/app/page.tsx

反映ができたところで、Next.js のサイトを起動してください。コンテンツの取得ができていることを確認できました。

今の段階では、Sanity Client の中にプロジェクト ID などがハードコーディングされている形です。このため、以下のように変更して行きます。

apps/nextjs/sanity/client.ts

上記のコードとあわせて、.env.sample のファイルを作成しておきました。

apps/nextjs/.env.example

私は Vercel と連携させて環境変数を管理するため、上記のファイルを参考にしつつ、.env.local のファイルを作成して運用しています。

Next.js のトップページとなる apps/nextjs/app/page.tsx のファイルでは、GROQ というクエリー言語でコンテンツを取得、その結果を利用してページを作成していることを確認することができました。まずデータの取得ができたので、これをベースにブログの構築を進めて行きます。

ここまでのコードは以下のブランチで公開しています。