Next.js＋microCMSで勉強したスパイスを登録していくアプリを作った。

ヘッドレスCMSを試したかったので、microCMSを使ってアプリケーションを作った。とりあえずベースだけ作ったので今後デザインとかコンテンツは更新予定。

スパイス図鑑の概要

• サイトのURL
• リポジトリ

一覧と詳細がありそれぞれのデータはmicroCMSで管理している。アプリケーション自体は、Next.js＋TypeScript＋Tailwindcssで構築している。

導入方法

microCMSの設定はこちらを読むと分かりやすい

Next.jsで呼び出す時

今回は、SSGとして公開するためgetStaticPropsとgetStaticPathsを利用した。

export const getStaticProps = async () => {
  const key = {
    headers: { 'X-API-KEY': process.env.API_KEY as string },
  }

  const res = await fetch(process.env.ENDPOINT + '/spice_list', key)

  const data = await res.json()

  return {
    props: {
      dataList: data.contents,
    },
  }
}

こんな感じで一覧は呼び出しを行っている。

また、TypeScriptを使用するためmicroCMSのデータに型をつけた。

API呼び出しの部分は共通化できそうなのでTODOとしておく。

TailWindCSS

TailWindCSSは、BootStrapのようにUIを構築するCSSを提供してくれるもの。違いは何かというとBootStrapの場合は、既存で用意されたCSSが純粋に使えないから上書きすると言った対応をとりがちだが、TailWindCSSの場合はコンポーネント単位でのcssではなく粒度が小さい単位でcssのユーティリティが沢山用意されているので、別のCSSで上書きするといったことが起きにくい。

また、粒度が細かいということはカスタマイズ性もあるということ。更にclass名が、bg-blue-500``text-white``px-4のように直感的に分かりやすいものになっている。

vscodeの拡張もあるのでオススメ。

設定自体はtailwind.config.jsを用意して設定ファイルを書いていく。ここで標準のメインカラーなどを設定していく。

pluginsに独自cssも書くことができるので開発中もこのファイルだけを気にすればよい。

Next.jsの場合は_app.tsxにindex.cssをimportすると使用できる。

import { AppProps } from 'next/app'
import '../styles/index.css'

import React from 'react'

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default MyApp

microCMS使ってみた感想

ヘッドレスCMSはプレビューがないという特長があるので、サービスとして導入した場合は必ずプレビュー画面の作成が必要になるだろうと思った。本当に管理画面に入力していって保存したら即公開になるので。

日本製ということで、ドキュメントや操作性などが充実しており非常に分かりやすい。頻繁にアップデートも行っているので応援したい。