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

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

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

最初からデータベースを用意するのではなく、まずは TypeScript のファイルにデータをベタ書きして始めるようにしています。たとえばプロフィールや作品一覧は、こんな具合です。

// src/data/profile.ts
export const profile = {
  name: 'HIDEAKI ENDO',
  title: 'Builder / AI Developer',
  skills: ['Claude Code', 'Python', 'Vercel', 'Supabase'],
}

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

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

ページはできるだけ静的に生成する方針にしています。表示が速く、ホスティングも安く済み、個人サイトとは相性が良いからです。ブログのように「URLの一覧があらかじめ決まっている」ページは、generateStaticParams で全部のページをビルド時に作ってしまいます。

export function generateStaticParams() {
  return getAllPosts().map((p) => ({ slug: p.slug }))
}

こうしておくと、各記事はただの静的HTMLとして配信されるので速く、サーバー側の処理もいりません。動的な処理が本当に必要になったところだけ、後から足していきます。

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

色・余白・角丸といった基本のスタイルを、CSS変数などで先にまとめて決めておきます。

:root {
  --brand-blue: #2563eb;
  --fg: #1a1a1a;
  --border: #e5e7eb;
}

あとから「やっぱり全体の色を変えたい」となっても、ここを一箇所いじれば済みます。各コンポーネントに色を直書きしてしまうと、後から全体を揃え直すのが地獄になるので、これは早めに決めておくほど効きます。ダークモード対応も、変数の値を切り替えるだけで済むようになります。

迷ったら「小さく」

App Router は機能が豊富で、あれもこれもと手を広げたくなります。でも個人開発では、まず小さく作って、必要になったら足すくらいがちょうどいい。新しい機能を試したくなったときも、いきなり全面導入せず、1ページだけで試してから広げるようにしています。そう割り切ってから、開発が楽になりました。