<BACK TO BLOG
開発

【Next.js】microCMS + Next.jsでSSGするブログを作る

最終更新日: 2021-1-2

【Next.js】microCMS + Next.jsでSSGするブログを作る

仕事でNext.jsでwebアプリケーションを開発する機会があり、今後アウトプットのためのブログもはじめようと思っていたので、0からブログを作成しました。
バックエンドは現在勉強中でコストも高くなってしまうのでとりあえず今回はバックエンドは日本製headlessCMSのmicroCMSに任せました。今後バックエンドを習得すればこのブログにフォーム機能など導入して行けたらなと思っております。
今回はmicroCMSとNext.jsを用いて作成したこのブログの大まかな構成や環境などを紹介したいと思います。

大まかな構成

  • バックはHeadlessCMS(microCMS
  • Next.js v10.0.3
  • データ処理部分:TypeScript


環境構築

プロジェクト作成

まずは環境構築からマニュアルでやっても良かったのですが、手間がかかってしまうので公式リファレンスを参照しながら作成しました。

yarn create next-app


プロジェクトに必要なツールなど導入

僕はデータ処理部分はTypeScriptを使い、スタイルはtailwindやstyled-componentsなど使用しました。
TypeScriptを使うと型定義パッケージもインストールしなければいけないので注意が必要です。

yarn add --dev typescript @types/react @types/node


プロジェクト構造

データ処理部分

microCMSからデータをAPIを介してフロントへ受け渡します。

ビュー周り

microCMSのリッチエディタで入力したデータはHTMLの文字列で返ってきてしまうので、

<div dangerouslySetInnerHTML={{ __html: hogehogehogehoge }} />


を使ってhogehogehogehoge部分に無理やり突っ込んでDOMを作成しました。
しかし、ReactのdangeroulsySetInnerHTMLは非推奨のためあまりおすすめできません。これ以外の方法を他に知っている方がいれば教えていただきたいです。

ビュー(コンポーネント)の構造

ビューを構成するコンポーネントのディレクトリ構造は以下の様にしています。

blog/
┣ components/
┃   ┝ atoms
┃    ┃    └ texts
┃    ┃        ┝ h1.tsx
┃    ┃        ┝ h2.tsx
┃    ┃        └ text.tsx
┃    ┝ molecules
┃    ┃    └cards
┃    ┃        ┝ articleCard.tsx
┃    ┃        └ profileCard.tsx
┃    ┃
┃    └organisms
┃        ┝ articles.tsx
┃        ┝ footer.tsx
┃        └ header.tsx
┣ pages
...


と、こんな感じです。AtomicDesign風に作成していますが、あくまでもAtmicDesign風であって、チーム開発などではないため時間的コストを考えた時、厳密に従う必要はないと考えたのであくまでもAtmicDesign風で実装してます。
開発していくうちに変更などした(これからもする)ので最終的な構造を見たい方は僕のgithubのソースをご覧ください。デザインはtailwindtoolboxや、tailwindComponentsを参考にしました。(元々それらが非常に便利なのでスタイルツールとしてtailwindを採用しました。)

静的ジェネレート

indexページと記事詳細ページで静的データの取得をしたのですが、記事詳細ページはgetStaticPathを使って動的ルーティングによってページを静的に生成させてます。getStaticPathは必ず、

 {
      params: {
            params: id
      }, 
      fallback = true | false
 }


の形で返さなければならず、getStaticPropsを用いる時はその引数に以上の返り値であるparamsを加える必要がありました。
params.idを指定すると、表示されている記事の記事IDをとることができ、それを元に記事詳細の内容や投稿日時などを取得するメソッドの引数にしてデータを取得してます。

その他

このブログはNext.jsのSSGを導入していますが、その中でも定期的にデータを取得してSSGする機能(Incremental Static Regeneration)を実現しています。
Incremental Static Regenerationについての記事はこちら
また、PWAにも対応させています。→記事はこちら

たがわ ゆうすけ

web開発やアプリ開発などやってます