背景

以前ブログサイトを作ったときは、Markdownで記事を記述しデプロイをして表示するという方法をとっていました。しかしデプロイを行ったりMarkdownファイルで執筆したりするのが面倒で、放置状態となってしまいました。

（サイトマップなどの管理も手動だったのでこういった手間も原因に😂）

そこで今回はNotionで記事を書くと自動で反映される仕組みでブログを再構築してみました。

普段からNotionを活用しているので、これで執筆がだいぶ楽になるはず、、

また最新のNext.js 15やReact 19などキャッチアップしきれていなかった技術も試してみたかったのでいい機会になりました。

使用技術

• React v19
• Next.js v15
• Tailwind CSS v4
• shadcn/ui
• Notion API
• Conform
• Vercel

技術選定をする際、2025年3月時点でいけてそうなものをピックアップしたつもりです。

※フロントの技術の進展が早くて更新日が新しくても古い内容ものとかが混ざってて、こまめにキャッチアップしていかないと大変だと改めて実感しました、、

今回使用した範囲で、簡単に内容を説明しておきます。

React v19・Next.js v15

React v19は昨年末に正式リリースされたものになります。

新しいhooksのuseActionStateとuseFormStatus はServer Actionsを利用していくこれからの開発においては、頻繁に利用するものになるかと思います。

今回は使用していませんが、useOptimisticも使用する機会はすぐにやってきそうです。

Next.jsはv15に限ったことではありませんが、キャッシュの扱いやレンダリング方式の制御、またv14からのServer Actionsの登場によりコンポーネントやディレクトリ設計が重要になると思いました。

フロントとサーバサイドが絡み合うので、適当に設計してしまうとカオスになるし、気を付けておかないとセキュリティ的にも漏洩に繋がる。

今回ディレクトリ設計はbulletproof-reactをベースとしたContainer/Presentationalパターンを使用し、Action層とService層とRepository層を活用したアーキテクチャーにしました。

小規模案件ではオーバーかもしれませんが、拡張性や保守性、複数人での開発を視野に入れても整理しやすかったのでおすすめです。

※ちなみに以前はAtomic Designでの設計をよく行っていました。

Tailwind CSS・shadcn/ui

Tailwind CSSはNext.jsがデフォルトで導入でき、ビルド時なども相性が良さそうなのでこちらを採用。

ただTailwind CSSはヘッドレスUIで機能の提供が中心になるため、UIは自分で作り込む必要があります。

今回は独自のUIを作り込む必要もなかったので、Radix UIとTailwind CSSベースに開発されたshadcn/uiを導入しました。

shadcn/uiはnpm経由で必要なコンポーネントをインストールして使うため、バンドルサイズが軽量に抑えられるメリットもあります。

その代わりインストールを手間に感じる人はいそうです。

あとコンポーネントのアップデートなどは少しめんどくさそうかも。

この辺り移り変わりも激しいので、特にこだわりを持たずに今後も柔軟に対応していくことになると思う。

※ちなみに以前はChakra UIをよく用いていました。

Notion API

ブログの記事を管理するデータベースとしてNotionを使用しました。

ISRでfetchすることで、ビルドしなくても一定間隔で記事の投稿や更新をNotionから行うことが可能です。

※画像表示はNotion側で発行される期限付きURLが1時間なので注意

Conform

Conformとはフォーム関連のライブラリで、Server Actionsを完全サポートしておりプログレッシブ・エンハンスメントにも対応しています。

近年のServer Actionsの登場でフロントエンドとバックエンドの境界を曖昧になっており、現状のReact Hook Formは検証段階の側面がありそうなのでConformを採用しました。

フォームはWebシステムの開発においてほぼ必須の機能になるが、堅実なものを作るとなる設計や掛け合わせる技術も難しい。

今回はバリデーションライブラリのZodやReact 19で登場したuseActionStateなどのhooksと組み合わせることで実現しました。

ただshadcn/uiのフォーム周りはReact Hook Formに依存しているのでここは置き換える必要があります。

ですので、Server Actionsを利用しないのであればReact Hook Formを採用のがいいかもです。

Vercel

VercelはNext.jsのホスティングにおいて最もメジャーなものになると思います。

ISRなどVercelを使用しないと容易に使えなかったりする機能があるので今回は迷わずこれを採用。

実装したこと

• ブログ機能
• お問い合わせ機能
• ダークモード対応
• framer-motionによる簡単なアニメーション

ブログ機能

Notionと連携し、基本的な検索機能やブログ詳細の目次やスクロールに合わせた動きを実装しました。

お問い合わせ機能

今回はnodemailerとGmailのサーバを利用して作成しました。

しかし新規で無料のGmailのサーバはどうやら利用できないっぽいです。

※私は以前登録したものがあったのでそちらを利用しています。

今1から作るならresendってやつが良さそうな気がしました。

おまけ

フロントエンドは進展が早くて、1年前に記述された記事でも古くなってることもしばしばありました。

こまめにキャッチアップして情報をアップデートしていかないと、把握するのが大変だなと改めて思いました。

特にApp RouterやServer Components・Server Actionsによって、従来とは全く異なる設計思想が必要になっていると感じます。

また調べる中で今回は利用していませんが、Prisma（ORMライブラリ）を使用した開発も増えているのかなという印象を受けました。

また機会があれば積極的に導入してみたい。