個別記事ページの実装から、Vercelでの公開まで

1. 1つのファイルで全記事を表示する仕組み

一覧画面ができたので、次は記事をクリックしたときに本文が読める「個別記事ページ」を作ります。
ただし、記事が増えるたびにページを1つずつ手作りしていたら、とても追いつきません。

Next.jsでは、app/articles/[slug]/page.tsx という特殊な名前のファイルを1つ用意するだけで、どの記事がクリックされても同じレイアウトで本文を表示してくれます。
いわば「記事表示用のテンプレート」です。

このテンプレートを機能させるために、3つの設定をClaudeに確認しながら進めました。

URLの末尾を決める「slug（スラッグ）」

ファイル名の [slug] の部分には、記事ごとに決めた名前が入ります。
たとえば、タイトルが日本語でも、slugを blog-start と設定しておけば、URLは blog-nori.com/articles/blog-start のようにすっきりした形になります。

文章を変換する「Portable Text」

Sanityは「ここは見出し」「ここは太字」といった情報をデータとして持っていますが、そのままではブラウザが読めません。
これをブラウザが理解できるHTMLに翻訳してくれるのが「Portable Text」というツールです。
この変換を入れることで、Sanityで書いた文章の構造がそのまま画面に再現されるようになりました。

コードを見やすく表示する装飾

技術的な内容を扱うブログなので、コードがただの文字列として表示されるのでは読みづらい。
react-syntax-highlighter というツールを導入して、背景色をつけたり、プログラミング言語に合わせて文字に色をつけたりできるようにしました。
これで、読者がコード部分を一目で識別できるようになります。

2. 独自ドメインの取得：blog-nori.com に決めた理由

サイトのURLを自分専用にするために、独自ドメインを取得することにしました。手続きにはXServerドメインを使いました。

最初に希望していたのは nori-blog.com でしたが、すでに他の人に取得されていました。
そこでClaudeに相談したところ、単語の順番を入れ替えた blog-nori.com を提案してくれました。
英語圏では「Blog Nori」のように、媒体名のあとに名前を置く組み合わせは一般的で、不自然さはないとのことでした。

また、.jp ではなく .com を選んだのにも理由があります。
将来的にコンテンツを多言語化する可能性を考えたとき、.jp だと日本のサイトという印象が強くなります。
.com であれば特定の地域に依存しないため、どの国の読者にとっても自然に受け入れられる。そう判断して .com に決めました。

3. Vercelでの公開と、最初のエラー

いよいよ、サイトをインターネット上に公開する作業です。
自分のコードをGitHubにアップロードし、Vercelと連携させることで公開できる仕組みになっています。

ところが、最初の公開ではエラーが出て画面が表示されませんでした。
表示されたエラーは

Error: NEXT_PUBLIC_SANITY_PROJECT_ID is not defined

Sanityからデータを読み込むための情報が見つからない、という意味です。

このエラーをClaudeに見せて原因を聞いたところ、理由はシンプルでした。
開発中、自分のパソコンでは .env.local というファイルにSanityへの接続情報を書いていました。
しかし、このファイルはGitHubにアップロードされない設定になっています。GitHubは誰でも中身を見ることができる場所なので、接続情報をそのまま載せてしまうと、第三者に自分のデータを操作されるリスクがあるからです。

つまり、自分のパソコンでは問題なく動いていたけれど、公開先のVercelにはその情報が届いていなかった。
だからエラーになった、ということでした。

4. 環境変数の登録と、公開の完了

GitHubに接続情報を載せられない以上、公開先であるVercelには手動で教える必要があります。
Vercelの管理画面にある「Environment Variables（環境変数）」という項目に、自分のパソコンで使っていたものと同じ情報を登録していきます。

登録したのは2つです。

NEXT_PUBLIC_SANITY_PROJECT_ID（Sanityの管理画面にある自分専用のプロジェクトID）
と、
NEXT_PUBLIC_SANITY_DATASET（データの保存場所を示す名前で、ここでは「production」）
です。

ここで一つ疑問がありました。
名前の先頭についている NEXT_PUBLIC_ という部分です。
Claudeに聞いたところ、これはNext.jsに対して「この値はブラウザ側から参照してもいい」と伝えるための目印でした。
この目印がないと、セキュリティの仕組みが働いて、閲覧者の画面からSanityにデータを読みに行くことができず、ページがエラーになってしまいます。

これらをVercelに登録し、再度公開作業を実行しました。
数分後、エラーは解消され、blog-nori.com でサイトが正常に表示されるようになりました。
自分のパソコンの中だけで動いていたブログが、誰でもアクセスできる状態になった瞬間でした。

今回のまとめ

今回は、個別記事ページのテンプレート作成、独自ドメインの取得、そしてVercelでの公開までを進めました。

公開作業では、環境変数が未登録というエラーに遭遇しました。
開発中は自分のパソコンの中で完結していたので気づかなかった問題です。
GitHubには載せてはいけない情報がある。公開先のサーバーには、その情報を手動で登録する必要がある。
この仕組みを理解できたことは、サイトを安全に運用していく上で大きな一歩でした。

振り返ると、今回もやはり「なぜエラーが起きたのか」「なぜこの名前をつけるのか」をClaudeに一つずつ確認しながら進めたことで、ただ動くだけでなく、自分で理由を説明できる状態にたどり着けたと思います。

次回は連載の最終回です。
公開後のアクセス解析の設定と、スマホから記事を更新できる仕組みづくりについて記録していきます。