Zenn
🍊

Next.jsへのTina CMS導入方法 2024

2024/03/10に公開
Next.js
React
CMS
tech

概要

  • 運用中のNext.js製のブログサイトにCMSを導入したい
  • markdownでブログの記事の管理をしている
  • Gitベースでmarkdownファイルを管理したい

※ CMSでの記事の投稿・更新が目的のため、ブログ以外のページをリアルタイムで編集できる「visual editing」は使用しません。

背景

  • ブログ記事の投稿やちょっとした更新をもっと手軽にできるようにしたい
  • Zennでのmarkdownの編集・更新体験がとても良くCMS導入意欲が高まった
  • 検討を兼ねたCMS導入のため、サイトの構造を大きく変更せずに導入できるGitベースを選択

TinaCMSとは

  • オープンソースのGitベース ヘッドレスCMS
  • バックエンドはTina Cloudとセルフホスト型から選べる

https://tina.io/

Tina CMSを選んだ理由

  • バックエンド
    多くのCMSが無料で利用するには自分でバックエンドをホストする必要がある中、Tina Cloudを使用すればバックエンドの設定不要ですぐにCMSを始められる（無料）
  • 多言語対応
  • 他の主要そうなGitベースCMSを検討した結果（詳しくは「GitベースのヘッドレスCMS 2種 Decap CMS と Contentrain を試してみた」へ）

導入手順

1. アカウントを作成する

公式サイトの「Sign Up」から登録します（GitHubアカウントでの登録可能）。

ログインに成功するとダッシュボードが表示されます。

2. プロジェクトを作成する

運用中の既存サイトのリポジトリが既にGitHubにあるため「Import your Site」を選択します。

「Authenticate With GitHub」を選択してGitHubと連携します。

CMSを導入するサイトのリポジトリを選択したら、「Project Name」と「Site URL（s）」を入力します。

3. フロントエンドの用意

  1. Tina CMSをインストール
    ローカル環境で、プロジェクトrootに移動し、以下を実行します。
npx @tinacms/cli@latest init

インストール後、下記のフォルダ・ファイルが追加されます。

 /
+├── content/
 ├── public/
+│   └── admin/
+│       ├── .gitignore
+│       └── index.html
 ├── src/
 │   ├── pages/
+│       └── demo/
+│           └── blog/
+│                └── [filename].tsx
+├── tina/
+│       ├── .gitignore
+│       └── config.ts
...

今回デモページを使用しないため、 pages 内に生成されたdemoフォルダは削除しました。

  1. package.jsonを編集
    インストール後に自動で書き変わりますが、フレームワークによっては手動での書き換えが必要でした。
  "scripts": {
    ...
    "dev": "TINA_PUBLIC_IS_LOCAL=true tinacms dev -c \"next dev\"",
    "build": "tinacms build && next build",
    "start": "tinacms build && next start"
    ...
  }

  1. ローカル環境で管理画面の表示を確認
    ここまでで問題なければ npm run dev を実行して http://localhost:3000/admin/ へアクセスするとダッシュボードが表示されます。

  2. ブログ投稿の設定（collection の作成）
    tina/config.ts でコレクションを作成します。

label, name, path, format にブログの大枠の情報を設定して、 fields で記事本文とmarkdownファイルの先頭の --- で囲われた部分の情報を入力するためのフィールドを設定します。

...
export default defineConfig({
  ...
  schema: {
    collections: [
      {
        label: "Blog",
        name: "blog",
        path: "src/contents/posts/blog",
        format: "md",
        fields: [
          {
            type: "string",
            label: "Title",
            name: "title",
            required: true,
          },
          {
            type: "rich-text",
            label: "Content",
            name: "body",
            isBody: true,
          },
          ...
        ],
      },
    ],
  },
});

4. デプロイ

ローカルで確認して問題がなければVercelへデプロイします。
デプロイする前に、環境変数をVercel側で追加する必要があります。
TinaCMSのダッシュボードで「Client ID（Overviewページ）」と「Content Token（Tokenページ）」の2種のTokenを控えてVercelの Settings > Environment Variables で以下のように設定します。

Key Value
NEXT_PUBLIC_TINA_CLIENT_ID Client ID
TINA_TOKEN Content Token

環境変数の設定が完了したらデプロイします。
ビルドが通ったら <ブログのURL>/admin/index.html へアクセスして管理画面へログインします。

ローカルで確認したダッシュボードと同じ画面が表示されたら設定は完了です 🎉

既存の記事も一覧に表示されます。

Discussion