Tailwind Nextjs Starter Blog + Netlifyでブログ構築

これまで Hugo で作っていたブログを Next.js ベースに移行することにしました。 移行理由は go をあまり業務で使わない、自分で css をメンテするのがしんどくなったからです。

自分であまりメンテナンスをしなくていいように今回はある程度デザインが構築済みかつ Next.js + Typescript で書かれているものを探しました。 Next.js + Typescript を採用したのはモダンなフロントエンドを扱ってみたかったからです。 そして見つけたのがTailwind Nextjs Starter Blogです。

本記事では、以下の内容について記載します。

1. Tailwind CSS について
2. Next.js について
3. Tailwind Nextjs Starter Blogを使用したブログ構築方法
4. Next.js を SSG で Netlify へのデプロイ方法

本記事の内容については私自身も学習中ということもあり、不確かな内容もあるかもしれません。 なるべく個人ブログではなく、公式サイトの情報を参照し書きました。

まずは以下の関連ワードの整理から始めます。

• Tailwind CSS とは
• Next.js とは

Tailwind CSS とは

公式サイトによると Tailwind CSS は以下のように書かれています。

A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

flex、pt-4、text-center、rotate-90 などのクラスが搭載されたユーティリティファーストの CSS フレームワークで、マークアップに直接組み込むことで、あらゆるデザインを構築できます。 (DeepL 翻訳)

イメージとしては Bootstrap のような便利 CSS の集まりですが、Bootstrap よりも細かく CSS のクラスという概念がないです。 例として公式ドキュメントのコードの一部を載せておきます。

以下が一般的な CSS の書き方で、スタイルの定義をchat-notification-logoにまとめています。

<img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo" />
<style>
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
</style>

そして以下が Tailwind CSS の書き方です。

<img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo" />

このように高さと幅を定義したものがそもそもされていて、それらを組み合わせてスタイルを形成しています。 Tailwind CSS の特徴については以下のブログが日本語でよくまとまっていてわかりやすかったです。

• TailwindCSS って何？なんで流行ってるの？

少し話は変わりますが、Tailwind CSS はいろいろ調べてみるとどうやら PostCSS というフレームワークから作られているようです。 これがよくわからなかったのでもう少し遠回りして調べてみます。

そもそも現状の CSS について調べてみると、よくある素の CSS ではなく SASS 構文・SCSS 構文というものを見かけます。 これらは CSS のメタ言語、AltCSS、CSS プリプロセッサ と呼ばれるもので、より便利な方法で CSS を書けるようにしたものです。 SASS の公式サイトでは以下のように記述されています。

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

おそらく、SASS 構文で書かれたものを素の CSS にコンパイルしてくれるのでしょう。なので CSS プリプロセッサとも呼ばれていると推測できます。

では、PostCSS とはなんなのでしょうか。こちらも公式 GitHubの定義を引用します。

PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more

PostCSS は、JS プラグインで CSS を変換するためのツールです。これらのプラグインは、変数やミックスイン、トランスパイル・フューチャー・CSS シンタックス、インライン・イメージなどをサポートすることができます。(DeepL 翻訳)

CSS を変換する JS のプラグインのようです。CSS を変換するという意味では SASS と同じように思います。 おそらく違いは、PostCSS は JS を使って CSS を出力する仕組みを提供しているだけであり、何をどのように変換するかはプラグインによって実現されるということです。 なので例えば SASS の継承を利用したい場合は、それ用のプラグインを導入するという使い方になります。

SASS と PostCSS の両方を使うことも可能なようです。SASS で足りないものがあれば PostCSS のプラグインで実現する感じでしょうか。

ただし、Tailwind CSS のドキュメントではプリプロセッサの導入は可能だが、必要ないという旨の内容が記述されています。

参考：Using with Preprocessors

PostCSS の GitHub で紹介されていた参考サイトを載せておきます。私と似たような疑問を持つ方は多そうです。

• PostCSS Deep Dive: What You Need to Know
• Some things you may think about PostCSS... and you might be wrong

Next.js とは

Next.js は React を使用したフロントエンドのフレームワークです。Next.js の何がいいのかは公式トップに Why Next.js として記載されています。 全部で以下の 12 個の特徴が挙げられています。（2021/8/11 時点）

• Image Optimization
• Internationalization
• Next.js Analytics
• Zero Config
• Hybrid: SSG and SSR
• Incremental Static Regeneration
• Typescript support
• Fast Refresh
• File-system Routing
• API Routes
• Built-in CSS Support
• Code-splitting and Bundling

個人的には React 製、早い、SSG 対応、そしてZero Configというのが気に入ってます。 かなり前に本ブログでも取り上げたJavaScript のいろいろまとめ（歴史・ツールなど）のようにフロントエンドはとにかく設定しなきゃいけないことが 多くて大変に思っていました。 Next.js では Zero config をうたっているだけあって簡単なものなら特に設定を書かずに作れます。

もっと細かい話は以下のブログが非常に参考になりました。

• Next.js を使うべき 5 つの理由 + 実装 Tips
• Next.js 4 年目の知見：SSR はもう古い、Vercel に API サーバを置くな

Tailwind Nextjs Starter Blog を使用したブログ構築方法

Tailwind Nextjs Starter Blogの内容に従えば問題なく開始できます。

まずは以下のコマンドを実行（Typescript 版です）

npx degit timlrx/tailwind-nextjs-starter-blog#typescript

ディレクトリ 構造は以下のようになっています。

.
├── LICENSE
├── README.md
├── components
├── css
├── data
├── jsconfig.json
├── layouts
├── lib
├── next-env.d.ts
├── next.config.js
├── node_modules
├── package-lock.json
├── package.json
├── pages
├── postcss.config.js
├── prettier.config.js
├── public
├── scripts
├── tailwind.config.js
├── tsconfig.json
├── types
└── yarn.lock

どんな感じかみたければ以下のコマンドを実行します。

npm start
# or
npm run dev

自分はyarn startで実行しています。startの方だと変更が即座にブラウザで確認できます。

次に肝心の記事の書き方です。

記事を新たに追加するには以下のコマンドを実行します。

node ./scripts/compose.js

コマンドを入力すると、フロントマターの内容について聞かれるので答えられるものは入力していきます。

ファイルの形式は.mdでも.mdxでも OK ですが、.mdxの方が HTML を書けるので便利です。 完了すると、data/blog/配下に新しいファイルが生成されます。

ファイルには以下のように入力したフロントマターが定義されています。

---
title: Tailwind Nextjs Starter Blog + Netlifyでブログ構築
createdAt: '2021-08-07'
updatedAt: '2021-08-07'
tags: ['NextJs']
draft: false
description:  'Hugoで書かれていたブログをNext.jsベースに移行しました。使用したのはTailwind Nextjs Starter Blogと呼ばれるものでHugoと似たような使い心地で使用できます。'
thumbnail: '/img/twitter-card.png'
---
# Tailwind Nextjs Starter Blog + Netlifyでブログ構築

ほとんどは書いてある通りです。layout は 2 パターンあり、そこを変えると表示が微妙に変わります。 自分の場合はPostSimpleに統一しています。

ちなみにフロントマターと呼ばれる部分は Hugo とほぼ同じだったので、やりやすいです。 Hugo とちょっと違って戸惑ったのは、フロントマターのdraft=trueだと、変更が反映されないことです。 書いた内容をチェックしながらやりたいならdraft=falseにする必要があります。

あとは普通に Markdown を書いていくだけです。

その他の操作情報

• ブログ内ページへの内部リンクの書き方：[表示名](ファイル名)
• 全体の CSS の書き換え方
  • tailwind.config.jsで書き換える。css で-で繋がれている要素は-を消して書くと認識される。
• 数式は Hugo と同じで$$ y=ax$$みたいにかける

Next.js を の Netlify へのデプロイ方法

Hugo から変わったので Netlify でのデプロイ方法も変更する必要があります。 リポジトリにnetlify.tomlを追加します。

合っているかわかりませんが内容は以下の通りです。 Next + Netlify Starter リポジトリを参考にしました。

[build]
  command = "yarn build"
  publish   = "out_publish"
[[plugins]]
  package = "@netlify/plugin-nextjs"
[[plugins]]
  package = "netlify-plugin-cache-nextjs"

あとは Netlify のブラウザからリポジトリの参照先を変更すれば移行完了です。 これで Hugo の時のように記事追加などの変更後に git push すると自動でデプロイ可能です。

正直、Netlify の変更はかなりハマりました。通常だと SSG ではnext exportで画像最適化を行うようですが、うまくいきませんでした。 そのせいか、デプロイ後のページでは画像の読み込みが遅いです。

今後の課題

• Hugo の時のようにブログカードに画像が表示されるようにする。
• 記事の目次が表示されるようにする