2022-07-30 18:54:23

Next.js で Markdown ブログを作った

#Next.js

はじめに

技術ブログを Next.js を使って開発した（完成したのがこのブログ）。

Qiita とか Zenn といった素敵なサービスはあるけれど、あくまで「自分のためのアウトプット」という意識でアウトプットを頑張っていこうと思っているので、自分で技術ブログを開発することにした。

実現したかったこと

ブログを開発するにあたって、最低限欲しい機能として下記の要件を MUST とした。

(1) Markdown ファイルがブログ記事になること

下記のように配置した Markdown ファイルがブログ記事として表示されるようにしたい。

※ GitHub リポジトリで記事を管理したい。

_posts
├── hello-world/
│   └── index.md  # 記事
│   └── image.png # 記事に埋め込む画像

(2) 記事ファイルを配置しているディレクトリ名が URL となること

hello-world というディレクトリ名の場合、下記の URL としたい。

http://localhost:3000/posts/hello-world

(3) 簡単にデプロイできること

GitHub のリポジトリで main ブランチにプルリクをマージしたら自動でデプロイされる運用にしたい。

いらないもの

いいねとかコメントとかの他のユーザーとコミュニケーションする機能

Next.js について

上記の要件と満たしたブログを開発するために、下記の理由でフレームワークに Next.js を採用した。

(1) イケてる

今最もイケてる React ベースのフレームワークだと認識していたので、触ってみたいなと思った（ぶっちゃけこの理由が9割）。

※ チュートリアルが洗練されていて、学習しやすかった。

(2) SSG（Static Site Generation｜静的サイト生成）

ブログ記事は静的ページなので、コンテンツ配信の方式としては SSG が適していると考えた。

Next.js は SSG にも対応しているフレームワークである。

(3) アセットの最適化

アセット類を最適化するための仕組みが優秀で、パフォーマンスが良いらしい。

(4) Vercel

Vercel というホスティングサービスを利用すると、さくっと「GitHub のリポジトリで main ブランチにプルリクをマージしたら自動でデプロイされる」を実現できる。

開発環境

下記のシステム要件により、 Node.js 16.X がインストールされている環境を docker-compose で準備した。

Next.js のシステム要件は Node.js: 12.22.0 ~ である。
Vercel で利用可能は Node.js のバージョンは 16.X である。

version: '2.6'
services:
  app:
    image: node:16.16.0-slim
    ports:
      - 3000:3000
    volumes:
      - ./data/chibaqn.tech:/app
    working_dir: /app
    tty: true

Markdown を HTML に変換する

特にこだわりは無かったので、公式チュートリアルや公式サンプルと同じライブラリを導入した。

$ npm install remark remark-html gray-matter

remark / remark-html

remark と remark-html は、Markdown を解析して HTML に変換するためのライブラリである。

これらのライブラリを使用することで、下記のようなコードで簡単に Markdown を HTML に変換できる。

import { remark } from 'remark'
import html from 'remark-html'

export default async function markdownToHtml(markdown: string) {
  const result = await remark().use(html).process(markdown)
  return result.toString()
}

gray-matter

gray-matter は、front matter の YAML 解析を行うライブラリである。

front matter にタイトルや投稿日時などのメタ情報を記載することで、Markdown ファイルからメタ情報を取り出すことができる。

下記の例でいうと title と date をもとに、「投稿日が新しい順にならんだ記事タイトル一覧を作成する」といったことができる。

---
title: &#39;タイトル&#39;
date: &#39;2022-07-29 23:53:01&#39;
---

## はじめに
...

デプロイ

良い意味で特に記事として残しておくことはない。それだけ Vercel へのデプロイは簡単で、素晴らしい開発者体験だった。

おわりに

機能としては最低限の状態を実現できた。

ここまでは公式チュートリアルと公式サンプルを参照し、あとはバックエンドエンジニアの知識で開発を進めることができた。

次は UI とか画像表示のあたりに手をいれるつもり。チュートリアルでは JSX に全然慣れなかったので大変そう（小並）。