今回は少し寄り道して、作者がこのEnginemixをどう組み立てたのか、二人で中を覗いてみよう。実際に動いているサイトなら、技術同士のつながりも見えやすい。

自分たちがいる場所の裏側を見るんですね。画面はNext.jsらしいですけど、データベースもNext.jsから直接操作しているんですか？

公開画面とデータ操作は役割を分けている。画面はNext.jsで静的HTMLとして生成し、APIはCloudflare Worker、データはCloudflare D1に置く構成だ。 

Browser
  ├─ Static HTML / CSS / JavaScript
  │    └─ generated by Next.js
  └─ /graphql
       └─ Cloudflare Worker
            └─ GraphQL Yoga
                 └─ Drizzle ORM
                      └─ Cloudflare D1

ひとつのサイトに見えても、表示とAPIは別の仕組みなんですね。

そう。ただし利用者から見えるURLは同じだ。Workerは /graphql ならAPIとして処理し、それ以外なら静的ファイルを返す。境界は内部に隠れている。

GraphQLのスキーマはPothos、データベース操作はDrizzle ORMで型を保ちながら記述している。フロントエンドでは生成済みのGraphQL型を使うので、クエリ結果の形もTypeScriptで確認できる。

全部をNext.jsのサーバー機能で作らなかったのは、なぜですか？

このサイトは output: 'export' を使い、公開部分を静的ファイルにできるからだ。配信は単純で高速になる一方、静的ファイルだけではDBを更新できない。その不足をWorkerが担当する。

大事なのは、採用技術の数ではなく役割の境界だ。「誰がHTMLを作るか」「誰がデータを変更するか」「どこで認証するか」を追うと、アーキテクチャを読み解きやすいよ。