Next.jsを使って医師国家試験の勉強ノートを公開するブログを作った話

表題の通りです。まずは完成品とレポジトリのURLをどうぞ。

サイト：https://chilvary-beta.vercel.app

GitHub：https://github.com/yokonao/chilvary-beta

作ったきっかけ

next.jsの公式チュートリアル(URLは以下)をやったら、構築の容易さとSPAのページ遷移の速さに感動したので。これで自分のブログ作ったら超便利じゃない？と思いました。単純なページ公開だけならバックエンドなしでも可能です。
https://nextjs.org/learn/basics/create-nextjs-app?utm_source=next-site&utm_medium=homepage-cta&utm_campaign=next-website

アーキテクチャ

アーキテクチャっていうのは大げさすぎるかもしれません。

ローカルPCで書いたMarkdownファイルを作成
MarkdownファイルをAWS S3にアップロード
S3のデータを引っ張ってきて、静的サイトとしてビルド

Next.jsとは全く関係ありませんが、Markdownファイルのバージョン管理とアップロードは完全自動化しています。作業終了後Alfredをちょっと立ち上げてAppleScriptを起動すればアップロードが完了するようにしました。（AppleScriptでgit pushしてgithub actionsでS3にアップロード）。この話はまた別でしたい。

メリット

SPAなのでページ遷移はほぼ０秒
超優秀なMarkdownエディタTyporaの力を借りることができる

参考：https://qiita.com/4_mio_11/items/223326c3289f6b2c2a07

実際の記事にはどんなこと書いてんの？

クエスチョンバンク(QB)を解きながら、疑問に思った点を調べてMarkdownファイルにまとめる。国試の勉強は長期戦なので、１年後の自分に向けて書いてます。

スタイルに関しては、Typoraのテーマで使用されているcssファイルとBulmaを併用してます。記事をローカルで作成した時とほぼ同じ見た目で公開しつつ、ヘッダーなどを作る際はBulmaのコンポーネントを利用できるになっています。

チュートリアルから進化している点

S3のディレクトリ構成が完成品のブログにそのまま反映されています。説明が難しいですがサイトを一度巡回していただければ、意図が伝わるはず...

本当に手元で作成したフォルダがそのままwebサイトになるイメージです。

Next.jsのすごいところ

このwebサイト、markdownファイルの中身をNext.jsに渡してあげれば成立するので以下のような拡張もできると思います。

データの置き場所をS3からデータベースにする
Markdown形式で記事をアップロードできるwebアプリを作成してS3を介してつなぐ

メディアサイトのようなものを作成しようとすると、認証機能など難しい点も出てくるでしょう。しかし、ローカルで作成した文書をSPAとして公開できるサイトをこれだけ簡単に自分で１から作れてしまうのは、Next.js様様かな、と感じます。もちろんGitHub Pagesなどもっと楽な選択肢もありますが、SPAや自由にカスタマイズできるというメリットは十分あると思います。

個人的には自分で見返す際もページ遷移に時間をとられないのでストレスフリーで気持ちいいです。普段やる気にならない勉強も記事作成という遊び感覚でできるようになりましたし。

今後

現在は、ビルド時に全てのページを静的に作成しているので、記事を追加・変更する際は再ビルドが必要になります。

しかし最近、Next.jsは静的なwebサイトに動的なページ更新機能を搭載できるようになりました。Incremental Static Regenerationというやつです。この機能を使いたかったのですが、現在はバグが存在するようなので実現できませんでした。

Next.jsのレポジトリではこのバグに関するissueに最優先事項のラベルがつけられていたので、修正がきたら導入したいと思っています。これさえ導入できれば、Markdownファイルの保存から公開までがほぼ自動化できる...

補足

Incremental Static Regenerationについては以下のサイトの説明が超わかりやすいです。（英語ですけど...）

件のバグのissue