Zenn
📚

初めて Newt を使ってみて

2023/10/23に公開
JavaScript
Next.js
React
Web
Newt
tech

はじめに

Newt とは

NewtはmicroCMSと同じヘッドレスCMSを提供するサービスです。
UI とバックエンドを切り離してウェブサイトを作れる上に、バックエンドも手軽に操作することができるので、フロントにグッと集中することができます。
今回は Newt と Next.js、typescript を使用してホームページを作成しました。

なぜ Newt を使ったか

下記2点の理由から同様のサービスである microCMS ではなく、Newt を選びました。
(無料プランのみで検討した結果です)

  1. モデル数(microCMS でいうスキーマ)が10まで利用可能
    → microCMS は無料だと3つまで
  2. データ転送量が microCMS の5倍の100GB/月

正直、ある程度の種類のデータを引っ張ってこようとすると microCMS の3つまでという制限が厳しかった、という部分が大きいです。(かといって microCMS の Team プラン(4980円/月)はお財布に優しくない...)

使ってみた感想

API のドキュメントは個人的にはわかりやすかったので、特に複雑ではないホームページの作成ということもあり使用していて困った箇所はなかったです。
ただ、microCMS に比べて使用されている方が少ないのか、困った時に検索でヒットする数がどうしても少ないこともあり、備忘録も兼ねて記事を書こうと思いました。
(Newt 自体の取り扱いについては、使用する言語によって左右される部分ではないので割愛いたします)

使用例

私は今回、一覧取得とカテゴリーフィルターとしてしか使用しなかったのですが、やはりこの2つが最も使用頻度の高い項目かと思いますので、それぞれに分けて書いていきます。

一覧取得

では、具体的な使用例と、簡単ではございますが解説を書いてみます。
まず、Next.js で Newt を使用する手順として紹介されている例です。

export const getArticles = cache(async() => {
  const {items} = await.client.getContents<Article>({
    appUid: 'hoge',
    modelUid: 'fuga',
    query: {
      select: ['_id', 'title', 'slug', 'body']
    },
  })
  return items
})

上記で、appUidにhogeを持つユニットからfugaモデルに対して_id、title、slug、bodyの情報を取得する query を投げることが可能です。

フィルター

同じページ内で取得する情報を絞りたい場合には、投げる query に項目を追加します。
今回は Newt で作成した works という app の category フィールドから、特定の文字列に該当するデータのみ取得します。

export const getStaticProps = async (context: GetStaticPropsContext) => {
  const category = context.params?.category;
  if (typeof category !== "string") {
    return {
      notFound: true,
    };
  }

  const { items } = await client.getContents<Works>({
    appUid: "works",
    modelUid: "portfolio",
    query: {
      select: ["_id", "fullName", "RefLink", "postDate", "appeal", "category"],
      category: category,
    },
  });
  
  const currentPage = items.slice(0, 12);
  
  return {
    props: {
      currentPage,
    },
  };
};

絞り込みたいフィールドをキーにして、そのフィールドに対してどんな内容で絞り込みたいかを値に設定します。
私は、context.paramsから category を取得して、それを値に設定しました。

まとめ

使用するか迷っていた microCMS に比べて、検索で引っ掛けられる記事数は少なかったですが、個人的にはドキュメントがわかりやすく、制限が緩い Newt はこれからも使用したいと考えています。
作成したサイトは下記になりますので、よかったらご覧ください。
porko

参考

Newt API Reference
Next.js で Newt を使用する手順

Discussion