newt と Next.jsでHP作成してみる

概要

友達の設計事務所のHP作成をすることになりました。
コンテンツは非エンジニアでも更新できるようにCMSで作成しました。
NewtというヘッドレスCMSを初めて使ったのですが、Vercelでデプロイするまで、簡単に作れたので内容をまとめます

CMSの選定

WordPressは使いたくない
無料で使える
簡単に導入できる
ヘッドレスCMS(API部分とコンテンツの管理だけが提供される)
Next.jsを使いたい

以上から、Newtを選択することにしました！

設計 / Next.jsでフロント部分を実装する

HPでは、Home, About, Works, Contact, Newsのコンテンツがあり、それぞれAPIを叩いてデータを取得するようにしました。

データ取得部分はベタ書きで仮の値を入れて実装しました。
src以下の構成はこんな感じで簡単にしました。
NewsとWorksは一覧を表示するページと、個々の詳細を表示するページがあります。

src
├── components
│   └── WorkCard.tsx
├── layouts
│   └── DefaultLayout.tsx
├── pages
│   ├── _app.tsx
│   ├── _document.tsx
│   ├── about
│   │   └── index.tsx
│   ├── contact
│   │   └── index.tsx
│   ├── index.tsx
│   ├── news
│   │   ├── [slug]
│   │   │   └── index.tsx
│   │   └── index.tsx
│   └── works
│       ├── [slug]
│       │   └── index.tsx
│       └── index.tsx
├── styles
│   └── globals.css
└── types
    └── type.ts

Newt側の設定

スペース作成

スペース

スペースとは、チームや個人に関わるあらゆるコンテンツを統合的に管理するためのものです。スペースには、Appと呼ばれるコンテンツ管理のグループをいくつも作成することができ、ワークスペースのメンバーは必要に応じてこれらのAppに参加することでコンテンツ管理作業を行います。

App作成

App

Appとは、コンテンツやコンテンツの管理者を、その関連度の高さを元にひとまとまりにした「コンテンツ管理のユニット」です。
Appを構成するリソース

私はこのような構成にしました各Appにそれぞれ、モデル(コンテンツ管理の骨組み。データ構造のこと。 (ex) タイトル、スラッグ、メタ情報・・・)、ビュー(管理画面のUI)が存在します

App名	App UID
works	works
about	about
contact	contact
news	news

モデルを追加する

モデルとは、コンテンツ管理の骨組みとなるものです。

モデルは、1つ以上のフィールドによって構成されており、それらの組み合わせによってコンテンツのデータ構造や入稿画面のUIが決定されます。モデル

フィールドを追加していきます。
右上の保存ボタンを忘れないこと!!これを忘れていて、詰まりました。

これはメインコンテンツである、Workのモデルです。
worksでは一覧ページと詳細ページが存在するので、スラッグでidを指定して、個別のページを取得できるようになっています。
カバー画像は一枚で、サブ画像は複数設定できます。

ここでJSONのプレビューも確認できます

{
  "_id": "_id",
  "_sys": {
    "createdAt": "2022-01-01T00:00:00.000Z",
    "updatedAt": "2022-01-01T00:00:00.000Z",
    "raw": {
      "createdAt": "2022-01-01T00:00:00.000Z",
      "updatedAt": "2022-01-01T00:00:00.000Z",
      "firstPublishedAt": "2022-01-01T00:00:00.000Z",
      "publishedAt": "2022-01-01T00:00:00.000Z"
    }
  },
  "title": "text",
  "slug": "text",
  "meta": {
    "title": "text",
    "description": "text",
    "ogImage": {
      "_id": "imageId",
      "src": "imageUrl",
      "fileType": "image/png",
      "fileSize": 12345678,
      "fileName": "image.png",
      "width": 600,
      "height": 400
    }
  },
  "body": "<p>Plain text is available using the fmt operator.</p>",
  "coverImage": {
    "_id": "imageId",
    "src": "imageUrl",
    "fileType": "image/png",
    "fileSize": 12345678,
    "fileName": "image.png",
    "width": 600,
    "height": 400
  },
  "subImages": [
    {
      "_id": "imageId",
      "src": "imageUrl",
      "fileType": "image/png",
      "fileSize": 12345678,
      "fileName": "image.png",
      "width": 600,
      "height": 400
    }
  ],
  "member": "<p>Plain text is available using the fmt operator.</p>"
}