Next.js（App Router）で個人サイトを作るとき、最初に決めたこと

このサイトをはじめ、最近のプロジェクトは Next.js の App Router で作っています。フレームワークは便利な反面、最初に方針を決めておかないと迷子になりがちです。自分が先に決めておいたことを書き残しておきます。

1. データはまず「ベタ書き」から始める

最初からデータベースを用意するのではなく、まずは TypeScript のファイルにデータをベタ書きして始めるようにしています。

個人開発では、作りながら「本当に必要な形」が見えてくることが多いです。最初に作り込みすぎず、動くものを早く出して、あとから育てるほうが結果的に早い、というのが経験則です。

2. 表示は静的生成を基本にする

ページはできるだけ静的に生成する方針にしています。表示が速く、ホスティングも安く済み、個人サイトとは相性が良いからです。動的な処理が本当に必要になったところだけ、後から足していきます。

3. 見た目の「トークン」を先に決める

色・余白・角丸といった基本のスタイルを、CSS変数などで先にまとめて決めておきます。あとから「やっぱり全体の色を変えたい」となっても、一箇所いじれば済むようにしておくと、デザインの調整がぐっと楽になります。

迷ったら「小さく」

App Router は機能が豊富で、あれもこれもと手を広げたくなります。でも個人開発では、まず小さく作って、必要になったら足すくらいがちょうどいい。そう割り切ってから、開発が楽になりました。