こんにちは<a href="https://twitter.com/takashima_katsu">高島</a>です。 今年も残るところあと2日になりましたね。 来年の抱負を立てているのですが、その一つに『ブログで技術発信する』というのがあります。 色々とネタを考えていたのですが、最初の記事は、実際にブログを作ってそれ自体をネタに書いていきます。 <h2 id="h48162eced8">使用技術</h2><ul><li>Next.js</li><li>microCMS</li><li>ZEIT Now</li></ul> Next.jsでフロントエンドを構成して、microCMSでコンテンツを管理し、ZEIT Nowでホスティングといった流れです。 <h3 id="h7f0f3e295c">microCMSとは</h3><a href="https://microcms.io/">microCMS</a>について簡単な説明をしておきます。 microCMSとは日本製のヘッドレスCMSです。 APIスキーマの種類も豊富で、日本語であることを抜きにしてもUIがとてもわかりやすく作られています。 8月ごろにリリースされた新しいものなのですが、機能もどんどんと更新されていっています。(年末の追い込みも凄かったですねw) <h2 id="h61204452a6">コンテンツ作成</h2>はじめにmicroCMSでコンテンツを作成していきます。 APIスキーマは以下です 今回はタイトル、本文、ogp画像を設定しました。 <img src="https://images.microcms-assets.io/assets/230110892db44e07ad869259f32dc191/3ca111700fac27663b601551908ce825/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202019-12-30%2017.38.52.png?w=620&amp;h=288" alt=""> エンドポイントはAPIリファレンス &gt; 試してみる で確認できます。 microCMSではリクエストヘッダーに認証キーを含めて、このエンドポイントを叩くことで取得することができます。 <img src="https://images.microcms-assets.io/assets/230110892db44e07ad869259f32dc191/03af04146e003d9ef74341842c6ccd66/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202019-12-30%2017.48.34.png?w=620&amp;h=277" alt=""> 認証キーはサービス名横の歯車 &gt; API-KEY で確認できます。 <img src="https://images.microcms-assets.io/assets/230110892db44e07ad869259f32dc191/63984ed9d14447d4c190543185d7d391/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202019-12-30%2018.43.31.png?w=620&amp;h=266" alt=""> 簡単にですが、microCMS側でのコンテンツ作成は終わりです。 <h2 id="h97111978a3">フロントエンド作成</h2>Next.js + TypeScriptで作成していきます。 <h3 id="h73d85a83b8">TypeScriptでCSS Modulesを使う</h3>私の場合はCSS Modulesを採用して、scssを使用しています。 TypeScriptで書いていきますので、next-env.d.ts ファイルは以下です。 (next-imagesで画像を扱っています)<pre><code>/// &lt;reference types="next" /&gt;
/// &lt;reference types="next/types/global" /&gt;
/// &lt;reference types="next-images" /&gt;

declare module '*.scss' {
 const content: {[className: string]: string};
 export = content;
}</code></pre> <h3 id="h48847a5ad5">コンテンツの取得</h3>microCMSで作成したコンテンツを取得します。 先ほども書いたように、microCMSではリクエストヘッダーに認証キーを含めて取得します。 ですので、リクエストヘッダーに認証キーを含める処理をdotenvライブラリを使って行います。<pre><code>$ yarn add dotenv</code></pre> .env<pre><code>API_KEY=XXXXXXXXXXXXXXXXXX</code></pre>microCMSで発行された認証キーをいれる next.config.js<pre><code>require("dotenv").config();

module.exports = {
 env: {
 api_key: process.env.API_KEY
 }
}</code></pre>これでprocess.env経由で参照できるようになりました。 APIからのデータ取得をaxiosを使って行います。<pre><code>$ yarn add axios</code></pre> index.tsx<pre><code>import axios from 'axios'
 .
 .
 .

const Home: NextPage&lt;Props&gt; = ({ articles }) =&gt; {
 return (
 .
 .
 .
 )
};

Home.getInitialProps = async () =&gt; {
 const key = {
 headers: {'X-API-KEY': process.env.api_key},
 };
 const res = await axios.get(
 `https://my_blog.microcms.io/api/v1/article/`,
 key,
 );
 const data = await res.data.contents;
 return {articles: data};
};

export default HomeNext</code></pre>Next.jsのgetInitialPropsメソッドを使用して取得しています。 以上で、microCMSで作成したコンテンツをフロントエンドで取得できるようになりました。 <h2 id="h7f56caead5">ホスティングする</h2>ZEIT Nowでホスティングします。 ここはNetlifyを採用されている方が多いと思います。 (microCMSのWebhookでもNetlifyがありますね) <pre><code>$ yarn global add now</code></pre> now.json<pre><code>{
 "build": {
 "env": {
 "API_KEY": "@api_key"
 }
 }
}</code></pre>nowで使用する設定ファイルです。 <pre><code>$ now secrets add api_key "XXXXXXXXXXXXXXXXXX"</code></pre>nowで環境変数を設定します。 .envファイルでも使ったmicroCMSで発行された認証キーを入れてください。 これにより暗号化され安全に保存されます。 <pre><code>$ yarn build
$ now</code></pre>これで完了です！ <h2 id="h8d78e14043">感想</h2>microCMSの使い勝手がかなり良かったです。 最近のトレンドとして日本でもJAMstackがきてますので、どんどんと採用されていきそうですね。 Nuxt.js + microCMS + Netlifyの構成はたまに見ますが、Next.jsの情報はまだ少ないですね... そういった中で、こちらの記事はとても参考になりました。 ありがとうございます。 <a href="https://qiita.com/kamimura3589/items/07bd5fc2a93105dfe180">Next.js + microCMS + NetlifyでJAMstackな世界に入門する</a> あと、ZEIT Nowの環境変数やnow secretsが絡んだ辺りの情報が少なかったですね ZEIT Nowはあまり採用されていないんですかね せっかくブログも作ったので、どんどんと記事も書いていきたいと思います。 あと、自己紹介ページなども作りたい！

Next.js + microCMS + ZEIT Nowでブログを作った