microCMS

microCMSのNuxt.js用モジュールを公開しました

エンジニアリング
柴田 和祈

こんにちは、柴田です。
先日のPWA Night Conference 2021にて行われたmicroCMSワークショップでもお披露目したのですが、microCMSのNuxt.js用モジュールを公開しました。

https://github.com/microcmsio/nuxt-microcms-module

何ができる?

内部的にはNuxt.jsのModuleとPluginの機構を使っており、microCMSとの通信用クライアントをNuxt.jsのContextから利用できるようにするためのものです。
これによって、$microcms.get(...)という形で簡潔にmicroCMSとの通信を行うことができるようになります。

準備

まずはnpmからパッケージをインストールしてください。

$ npm install nuxt-microcms-module


次に、nuxt.config.jsにて下記のように設定します。

export default {
  // 略

  buildModules: ['nuxt-microcms-module'],
  microcms: {
    options: {
      serviceDomain: process.env.SERVICE_DOMAIN,
      apiKey: process.env.API_KEY,
    },
    mode: process.env.NODE_ENV === 'production' ? 'server' : 'all',
  },
};

serviceDomainにはmicroCMSのサービスID(サブドメイン部分)、apiKeyにはサービス固有のAPIキーを入力してください。
これらは.envファイルにて環境変数で管理することで、セキュアに扱うことが可能です。

// .env

API_KEY=xxxxxxxxxxxx
SERVICE_DOMAIN=xxxxxxxxxxxxx

mode はこのモジュールをクライアントサイドで読み込むのか(client)、サーバーサイドで読み込むのか(server)、両方で読み込むのか(all)を指定することができます。
デフォルトはallです。
Jamstack構成においては、APIコールは基本的には次のタイミングで行われます。

  • 開発時はSSR+CSRなので、ページロード時にはサーバーサイド、ページ遷移時にはクライアントサイド
  • 本番時はビルド時のみとなるので、サーバーサイドのみ


よって、Jamstack構成の場合にはprocess.env.NODE_ENV === 'production' ? 'server' : 'all'と指定しておくと良いと思います。
環境変数を用いていれば、APIキーの隠蔽もこちらで完了します。
(以前、こちらの記事で説明した方法は不要になります。)

使い方

ここまでの設定により、Nuxt.jsのContextから$microcmsという通信用クライアントを利用できるようになります。
内部的にはmicrocms-js-sdkを利用しているため、詳しくはそちらのReadmeをご参照ください。

下記はNuxt.jsのpages配下での利用例です。

<template>
  <ul>
    <li v-for="content in contents" :key="content.id">
      <nuxt-link :to="`/${content.id}`">
        {{ content.title }}
      </nuxt-link>
    </li>
  </ul>
</template>

<script>
export default {
  async asyncData({ $microcms }) {
    const data = await $microcms.get({
      endpoint: 'your_endpoint',
      queries: { limit: 20, filters: 'createdAt[greater_than]2021' },
    });
    return data;
  }
}
</script>


おわりに

まだまだ最低限の機能しか備えておりませんが、Nuxt.jsでのmicroCMSのご利用がよりしやすくなったかと思います。
今後も追加開発してまいります。(globalDraftKey対応など)

-----

microCMSは日々改善を進めています。
ご意見・ご要望は管理画面右下のチャット、公式Twitterお問い合わせからお気軽にご連絡ください!
引き続きmicroCMSをよろしくお願いいたします!

ABOUT ME

柴田 和祈
microCMSのデザイン、フロントエンド担当 / ex Yahoo / 2児の父 / 著書「React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで 」 / Jamstack

microCMSとは

  1. 開発者、編集者どちらも分かりやすい管理画面

  2. 細かな権限管理や豊富な外部サービス・データ連携

  3. 安心の日本製・日本語でのチャットサポート