初めてサイトを作ったので共有する

Last updated at 2025-04-16Posted at 2025-04-16

経緯

大学にまめちしきなどの情報を取りまとめて、発信している個人のツイッターがある。
その人に頼まれて、豆知識をまとめる形でサイト制作を依頼された。

１００％Next.jsで作成
VPSにホスティング（今思えばVercelでも良かったかも）
Supabaseをデータベースとして採用。
　（Team機能などで部活全体で管理がしやすい。）

コンポーネント開発を基本とする。再利用できるものが多かった。
https://hamubasu.com

AppRouterを採用しました。
PagesRouterの問題の一つであるバケツリレー（Props Drilling）が起きやすそうな構造。
(実際は、page.tsxでデータフェッチしてそれをpropsでArticleListのコンポーネントに渡していてバケツリレーしてしまった)

サーバー側での処理（データフェッチ等）がメインだったので、ＲＳＣの思想とも合致する。

App RouterではServer Componentsでのデータフェッチが利用可能なので、
できるだけ末端のコンポーネントへデータフェッチをコロケーションすることを推奨しています

とあるのでpage.tsxでするのはあまりよろしくないと思う。

RouteHandlerをサーバーサイドで使ってしまっている。

機能追加として、検索機能をつけたい。（フォームからサーバーに送って部分レンダリングする形にするつもり）

AIを使ったので、全体の規模が大きくなるにつれてど最適じゃない答えがあった気がする。

参考資料のキャッシュの部分が難しかった。