【Kuroco】Next.jsでヘッドレスCMSを使ってみる - 導入編

最近、業務で「Kuroco」というCMSに触れる機会があったので記事にしてみました。

KurocoというCMS

国産のヘッドレスCMSで、API中心に作られています。
自身、CMSを熟知しているわけではありませんが、国産というだけあり、管理画面のユーザビリティ（日本人向け）に富んでいると感じました。

ちなみにヘッドレスCMSとは、フロントエンドとバックエンドが分離されていることを意味していて、使い慣れた開発ツールや言語をそのまま利用できるのが大きな魅力です。

主な特徴とメリット

• 何と言っても国産: 管理画面が日本語対応しているのが魅力です。最近のモダンなフレームワーク（nuxt, next）にも対応していて、githubのリポジトリと連携し、自動デプロイまでサポートしています。
• ログ管理機能: セキュリティ強化や問題解決のための詳細なログ情報が提供され、運用がスムーズになります。
• EC機能のサポート: タニタさんも利用されているそうです。
• Google Analyticsとの連携: サイトの訪問者行動を詳しく分析し、より効果的なウェブ戦略を立てることができます。

特にAPIの管理が使いやすく、開発の手間を大きく削減してくれる点が印象的でした。

料金

1,100円/月の無料料金枠がついていて、以下の料金体系のようです。

はじめかた

1. こちらから、必要事項を入力し、アカウント登録します。
2. 管理画面のログインURLと認証情報が記載されたメールが届きます。
3. メールに記載された認証情報でログインすると、ダッシュボードが表示されます。

ホスティング

Kurocoは、静的フロントエンドのコードをホスティングする機能（KurocoFront）が備わっています。
CDN配信まで行う一方で、GitHubリポジトリの準備は必要ですが、フロントエンド開発において多くの作業を省略できるのは素敵。

導入手順はこちらを見てもらえれば大丈夫なはず。
※ 実際に手順を用意したものの、特に詰まるところもなく済んでしまった。

共有

公式ドキュメントでも書いてありますが、kuroco_front.jsonを必ず出力後のルートへ配置しましょう（これが無ければデプロイに成功しても表示されません）

// 例
{
  "rewrites": [
    {
      "source": ".*",
      "destination": "/index.html"
    }
  ],
  "redirects": [],
  "basic": [],
  "ip_restrictions": []
}

リポジトリ: https://github.com/Yutahhhhh/kuroco-next-app
KurocoFront: https://theblueback.g.kuroco-front.app