Zenn
📝

ヘッドレスCMS「Newt」でブログを作ったときに使ったメソッドあれこれ

2023/11/04に公開
Next.js
Headless CMS
Newt
tech

最近、自分のブログをNext.jsとヘッドレスCMSの「Newt」を使ってつくり直しました。
https://zumilog.org

せっかくNewtを使ったので、ブログなどで使える記事一覧の取得方法やカテゴリーごとの記事出力、記事詳細ページの出力など、メソッドをまとめようと思います。

Newt CDN APIについて

Newtで投稿したコンテンツは、API経由で取得します。そのために用意されているのが「Newt CDN API」です。（Newt APIもあるが今回は割愛）

Newt CDN APIを使うには、トークンの生成等が必要ですが、今回の趣旨と外れるので、詳しくは下記を参照ください。
https://www.newt.so/docs/quick-start

ベースの設定

まずは、newtで用意されているSDKを利用してNewtのAPIクライアントを作成します。

npm install newt-client-js
# or
yarn add newt-client-js

以下コードでAPIクライアントを定義しておきます。

import { createClient } from 'newt-client-js'

export const client = createClient({
  spaceUid: '{spaceUid}'
  token: '{cdn_token}'
  apiType: 'cdn',
})

記事一覧を取得する

記事一覧を取得するには、getContentsを使用します。

// 記事一覧を全取得
export const getArticles = async () => {
  const items = await client.getContents<Article>({
    appUid: '{appUid}',
    modelUid: '{modelUid}',
  })
  return items
}

記事詳細を取得する

記事ページで詳細情報を取得するときは、getContent,getFirstContentを使いました。
どちらも条件に合致する最新の1件の記事情報を取得します。
記事ページはだいたいスラッグから取得すると思うので、ブログではgetFirstContentを使いました。

記事ID（コンテンツID）から取得する場合

動的なページを想定しているので下記コードは引数に記事IDを入れることで動作します。

export const getArticleById = async (id: string) => {
  const item = await client.getContent<Article>({
    appUid: '{appUid}',
    modelUid: '{modelUid}',
    contentId: '{contentId}'
  })
  return item;
}

記事スラッグから取得する場合

動的なページを想定しているので下記コードは引数に記事スラッグを入れることで動作します。

// スラッグから記事詳細を取得
export const getArticleBySlug = async (slug: string) => {
  const item = await client.getFirstContent<Article>({
    appUid: '{appUid}',
    modelUid: '{modelUid}',
    query: {
      slug,
    },
  })
  return item
}

該当するタグの記事一覧を取得する

こちらはカテゴリーページなどで使うと思います。
メソッドはgetContentsでqueryでタグIDを指定しています。

// タグから記事一覧を取得する
export const getArticleByTags = async (tagId: string) => {
  const items = await client.getContents<Article>({
    appUid: '{appUid}',
    modelUid: '{modelUid}',
    query: {
      tags: {
        in: [tagId],
      },
    },
  })
  return items
}

タグ一覧を取得する

サイドバーなどでタグ一覧を表示するときに利用しました。
内容としては単純ですが、modelUidにモデル「Tag」のIDを指定しています。

export const getTags = async () => {
  const tags = await client.getContents({
    appUid: '{appUId}',
    modelUid: 'tag' // モデル「Tag」のUidを入れる
  })
  return tags
}

おまけ：query指定でできること

どのメソッドでも、queryキーに値を指定してあげることで、条件に合致する情報を取得できます。

記事の取得件数を指定する

limitで取得件数を指定することができます。

export const getArticles = async () => {
  const items = await client.getContents<Article>({
    appUid: '{appUid}',
    modelUid: '{modelUid}',
    query: {
      limit: 3 // 最新3件の記事を取得する
    }
  })
  return items
}

取得の順番を指定する

取得の順番を指定する際には、orderを指定します。
先頭に-をつけることで降順になります。
デフォルト値：_sys.createdAt

export const getArticles = async () => {
  const items = await client.getContents<Article>({
    appUid: '{appUid}',
    modelUid: '{modelUid}',
    query: {
      order: ['_sys.createdAt'] // 作成日の古い順から取得する
    }
  })
  return items
}

スキップする件数を指定する

skipを指定して、何件の記事をスキップするか指定します。
関連記事取得などで使えそうです。

export const getArticles = async () => {
  const items = await client.getContents<Article>({
    appUid: '{appUid}',
    modelUid: '{modelUid}',
    query: {
      limit: 3, // 3件取得
      skip: 1,  // 最新の1件はスキップする
    }
  })
  return items
}

まとめ

というわけで、今回はブログで使ったNewt CDN APIのメソッドをまとめました。
他にもいろんな使い方ができるので、公式のAPIリファレンスを見ると良さげです。
https://developers.newt.so/apis/cdn

Discussion