Next.js のプロジェクト作成

まず最初に、Next.js のプロジェクトの作成を進めていきます。コマンドとしては以下のようになります。

プロジェクトの作成は以下のように進めました。

フォルダの構成は以下のようになります。

続いて Next.js で Sanity と連携するためのパッケージをインストールします。Next.js のパスに移動して以下のコマンドを実行します。

これで準備ができました。まだパッケージをインストールしただけですが、以下のコマンドで Next.js を起動します。

Next.js のテンプレートのページが立ち上がりました。

Sanity と連携する

続いて Next.js にコードを追加して、Sanity からデータを取得していきます。

イベント一覧の表示

Sanity からデータを取得するためのクライアントを apps/web/src/sanity/client.ts に作成します。

projectId は apps/studio/sanity.cli.ts に記載されているので、参照して書き換えてください。

これだけでも十分ですが、コンテンツの変更を素早く反映させるためのモードを追加します。

これで、Sanity と連携するためのコードの準備ができました。

Next.js 側で利用できるように変更をしていきます。まずは apps/web/src/app/layout.tsx のファイルを以下のように書き換えます。

続いてトップページを以下のように書き換えます。なお、公式サイトに記載されていませんが、Event の interface を追加、ダークモードでも文字が見えるように少し変更をしています。

コードを確認していくと。

• イベントデータを取得する GROQ のクエリ
• sanityFetch を利用してデータを取得
• 取得したデータを表示

結果として、イベントの情報が表示されるようになりました。

イベントのページ作成

一覧から各ページへのリンクを作成するために、events のフォルダの作成、その下に [slug] のフォルダを作成して、page.tsx を作成します。これにより slug を利用した URL を利用できるようになります。

実際に追加したあと、トップページのイベントをクリックすると以下のようにイベントの詳細ページが表示されるようになりました。

このページで重要なコードは以下の部分になります。

以下のような動作になっています。

• EVENT_QUERY には $slug という形で取得した slug を利用できるようにする
• [0] ということで slug の値が一致した 1 つ目のデータを利用
• sanityFetch では query と params を渡して、$slug が [slug] の値として動作するようにしている

取得したイベントのデータをページで簡単に利用できるように以下のように定義しています。

sanityFetch にクエリと値を渡せば、結果となるデータの取得が決まり、ページの中で表示する値も作成できるようになります。

アセットの表示

画像を表示するためのパッケージとして @sanity/image-url が提供されています。これを Next.js のプロジェクトに追加します。

続いて Next.js で外部のドメインの画像を利用する際には、設定にドメインを登録する必要があります。remotePatterns で追加することになります。設定は以下の通りです。

続いて画像を表示するためのコードを追加します。

上記で追加した apps/web/src/sanity/image.ts を利用して、イベントのページ apps/web/src/app/events/[slug]/page.tsx のコードを更新します。

これで、イベントに画像が設定されている場合はその画像を、そうではない場合は Placeholder の画像を表示するようにしました。

イベントによっては画像が含まれていないアーティストもいるため、一覧から画像が指定されているアーティストのイベントを選択してください。

まとめ

今回は Next.js のプロジェクトの作成、そのプロジェクトに Sanity と連携するためのパッケージをインストールしたあと、パッケージで提供している機能を利用して、かつ GROQ を利用して Web ページを作成しました。また、画像に関する情報も併せて取得してページに表示することができました。

ここまでのコードは以下のリポジトリ / ブランチで参照できます。

• haramizu/day-one step-3

タイプの生成

前回はサンプルのコードとして完結させるために、Typescript で利用する Type を手作業で作成をしました。今回は、定義しているフィールドに関しての Type を生成します。