Zenn
👨‍💻

Next.jsとSanityで“自由に作って運用しやすい”サイトを目指した話

に公開
Next.js
Headless CMS
sanity
tech

はじめに

こんにちは、フロントエンド開発に特化した制作会社「dotbind」代表の小栗(x: @amagurik2)です。

弊社では、コーポレートサイト（https://www.dotbind.jp/）と、オウンドメディア「ちょい旅」（https://www.choitabi.jp/）を自社で開発・運用しています。

どちらも Next.js × Sanity を活用しており、開発者の視点から「なぜSanityを選んだのか？」「どう設計したのか？」を実例ベースで紹介していきます。

なぜSanityを選んだか

オウンドメディアやコーポレートサイトにおいて、CMS選びはとても重要です。
以下の観点でSanityを評価しました。

  • 柔軟なスキーマ設計が可能
  • TypeScriptとの相性が良い
  • リアルタイムプレビューが導入しやすい
  • 無料枠でも実用的(全員管理者権限になってしまうがメンバー招待も20人まで）
  • カスタムUIも対応可能

比較検討した他のCMS：microCMS、Contentful、WordPressなど

実際に作ったサイト紹介

dotbind コーポレートサイト（https://www.dotbind.jp/）

  • 静的な構成が中心で、動的箇所(実績、お知らせ、メンバー)はSanityで編集可能
  • Studioは内部メンバー用にカスタマイズ
  • OG画像やSEOまわりもSanityで一元管理可能
  • 開発期間: １ヶ月程度



Sanity CMSの記事投稿画面

ちょい旅（https://www.choitabi.jp/）

  • 記事・スポット情報・カテゴリ・エリアをSanityで完全管理
  • 動的ルーティングでカテゴリ別/地域別に一覧を構築
  • プレビューや画像調整、タグ管理もSanity上で可能
  • 多言語対応（日本語、英語記事をCMSで作成可能)
  • 開発期間: １ヶ月程度



Sanity CMSの言語切り替え投稿画面

Next.jsとの連携ポイント

  • @sanity/client + groq でAPIからデータ取得
  • ISR（Incremental Static Regeneration）を使用し、更新内容を即座に反映
  • Sanity Studioを/studio以下に埋め込み運用も可能
import { client } from '@/lib/sanityClient'

const data = await client.fetch(`*[_type == "post"]{title, slug}`)

投稿のスキーマを定義するだけでCMSに適用

/sanity/schemaTypes/post.ts

export default defineType({
  name: 'post',
  title: 'Post',
  type: 'document',
  fields: [
    defineField({
      name: 'language',
      type: 'string',
      readOnly: true,
    }),
    defineField({
      name: 'title',
      title: 'タイトル',
      type: 'string',
      validation: (Rule) => Rule.required(),
    }),
    defineField({
      name: 'publishedAt',
      title: '公開日',
      type: 'datetime',
      initialValue: () => new Date().toISOString(),
      validation: (Rule) => Rule.required(),
    }),
    defineField({
      name: 'slug',
      title: 'Slug',
      type: 'slug',
      // validation: validateSlug,
      description: "⚠️ スラッグは英小文字・数字・アンダースコア・ハイフンのみ使用可能です（大文字やスラッシュ、ピリオドは禁止）",
      options: {

設計イメージ

  • ホスティング: Vercel
  • フロントエンド: Next.js
  • CMS: Sanity
  • お問い合わせ用フォーム: Resend

運用して感じたメリットと課題

良かった点

  • 管理画面のカスタマイズが自由で、非エンジニアにも使いやすいシンプルなUI
  • 画像処理やプレビューも柔軟
  • カスタムフィールドで独自運用にも対応可能

課題感

  • 初学者には学習コストがやや高め
  • 日本語ドキュメントが少ない（が、最近少しずつ増えてきた）

まとめ

Sanityは自由度が高く、オウンドメディアやコーポレートサイトのような「情報設計＋拡張性」が求められる案件にとてもフィットします。

データの扱いやすさとスピード構築、自由度が高いので柔軟に機能追加も可能で、拡張性が高いです。
ビジネスサイドからすると関係なさそうな、「良い開発体験」は実はかなり重要です。
作って終わりではなく、「アップデート」していくことを想定した技術スタックを選べると良いですね。

今後も私たちはSanity × Next.jsをベースに、柔軟で継続的に改善できるサイトづくりを進めていきます。

Discussion