<p>microCMSという国産ヘッドレスCMSとNext.jsを使ってブログサイトを構築してみようと思いました。<br><br>こちらを参考にしながら進めました。<br><a href="https://dev.classmethod.jp/articles/vercel-microcms-nextjs-blog-sdk/" target="_blank" rel="noopener noreferrer">[Next.js+Vercel+microCMS] microCMS と Next.js でブログを作る</a><br><br>※現在はSDKが提供されているとのことで再編集版が投稿されてました。<br>なので、今(2021/12時点)から始めるにはこちらのほうがいいかもしれません<br><a href="https://dev.classmethod.jp/articles/vercel-microcms-nextjs-blog-sdk/" target="_blank" rel="noopener noreferrer">microCMS と Next.js でブログを作る（SDK 版）</a></p><h2 id="hae6947d5ce"><br>microCMS</h2><h3 id="h7524f66ee2">登録</h3><p><a href="https://document.microcms.io/manual/getting-started" target="_blank" rel="noopener noreferrer">公式ページ</a>を参考にいい感じに登録します。</p><h3 id="h78df02fd38">API</h3><p>API登録する際にリスト形式かオブジェクト形式が選択できます。<br>とりあえず以下の様なAPIを生やしました。</p><h4 id="hfab6db4976">リスト形式</h4><ul><li>blogs: 記事一覧</li><li>portfolios: 何か作って公開したもの一覧</li><li>tags: 記事に付与するタグ一覧</li></ul><h4 id="ha3b9fbc8d9">オブジェクト形式</h4><ul><li>profile: プロフィール</li><li>sitedata: サイト情報、多分headに入れる</li></ul><h2 id="haab1fd6475">Next.js</h2><p><a href="https://dev.classmethod.jp/articles/vercel-microcms-nextjs-blog/" target="_blank" rel="noopener noreferrer">前述の記事</a>を参考にしてcliでnextアプリを生成します。<br><a href="https://nextjs-ja-translation-docs.vercel.app/docs/basic-features/data-fetching#getstaticprops%EF%BC%88%E9%9D%99%E7%9A%84%E7%94%9F%E6%88%90%EF%BC%89" target="_blank" rel="noopener noreferrer">公式ページのこの辺</a>を読んでおけば大体OK。<br>今回はブログなのでSSGのみ使います。<br>なので基本的な作業としては以下となります。</p><ul><li>各ページコンポーネントで<code>getStaticProps</code>関数を定義しexportする</li><li>必要なデータ、ここではmicroCMSのAPIで取得した結果をpropsにセットする</li><li>Pageコンポーネントに↑のpropsが渡されるのでそれらをいい感じにrenderする</li></ul><h3 id="h4ebc0439a6">aspida</h3><p>microCMS
のデータを取得する際のAPIに型をつけるためにaspidaというHTTPクライアントを導入します。</p><h3 id="ha4bf0462ef">pathpida</h3><p>ついでにリンクについても型をつけられるpathpidaというaspidaの親戚みたいなものがあるのでそれを導入しました。<br>こちらについては先程のブログ記事には無いので<a href="https://github.com/aspida/pathpida" target="_blank" rel="noopener noreferrer">github上のpathpida</a>を参考に。<br>基本的に設定は不要でnext/nuxt両方に対応してくれているようです。<br>下記コマンドをpackage.jsonに追加し実行すると、pages配下の構造に応じたメソッドを定義したファイル(lib/$path.ts or utils/$path.ts)が生成されます。</p><pre><code>    "dev:path": "pathpida --watch",</code></pre><p><br>生成されたファイルを各ページコンポーネントにimportして使います。</p><pre><code>import { pagesPath } from '@/utils/$path'

pagesPath.profile.$url()</code></pre><h3 id="hcf83e1357e"><br></h3><h2 id="h9dcc071ccd">デプロイ</h2><h3 id="had9f88b197">github x vercel連携</h3><p>github x vercelを連携しgithubにpushしたらビルドが走るようにしておきます<br></p><h3 id="h55c04bc843">microCMS x vercel連携</h3><p>同じくmicroCMSのコンテンツを追加・更新した時もビルドが走るようにしたい。<br>microCMSからvercelへwebhookする設定があるのでする。webhook飛ばすタイミングは色々と設定できる。<br>注意点としてはwebhookの設定はAPI単位なので、全てのコンテンツ追加・更新のタイミングでビルドしたい定義したい場合はそれぞれのAPIで設定しなければならなそう。<br><br>これで一旦作成完了しました。<br>プレビュー機能はスキップしたのと、OGPだとか細かい設定はできてないので後々やる予定です。<br></p><h4 id="hce2b598e0e">レイアウト調整</h4><p>完了..と思ってビルド結果をみたらコンテンツ部分にスタイルがあたってなかったので修正。<br><a href="https://zenn.dev/crea7/articles/5b2fde4be6b6f3" target="_blank" rel="noopener noreferrer">microCMS + TailwindCSSでのHTMLコンテンツに対するスタイル適用</a>を参考に対応していく。<br><a href="https://github.com/tailwindlabs/tailwindcss-typography" target="_blank" rel="noopener noreferrer">tailwindlabs/tailwindcss-typography</a>を使う。<br></p><blockquote><span style="color:#24292f">A plugin that provides a set of&nbsp;</span><code>prose</code><span style="color:#24292f">&nbsp;classes you can use to add beautiful typographic defaults to any vanilla HTML you don't control (like HTML rendered from Markdown, or pulled from a CMS).</span></blockquote><p><br><span style="color:#24292f">MarkdownとかCMSからレンダリングしたHTMLにスタイルを当ててくれますと。</span><br>コンテンツ流し込んでる要素のclassに<code>prose</code>を追記する。<br> <br>直った。OK。</p>

microCMSとNext.jsでブログ作ってみた

<p>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）</p>

BlogList

microCMSとNext.jsでブログ作ってみた

TEST-004

TEST-003

TEST-002

TEST-001