【第4回】スマホでホームページを作る 〜Next.js 開発編〜
いよいよ作る
環境構築の話が続きましたが、今回からやっと「作る」話です。
今回のゴールは、スマホの中でNext.jsのプロジェクトを立ち上げて、ブラウザで確認するところまで。ここまで行けば、あとは中身を作り込むだけです。
Next.jsって何?
Next.jsは、ReactというライブラリをベースにしたホームページやWebアプリを作るためのフレームワークです。
「じゃあReactでよくない?」と思うかもしれませんが、Reactだけだとページの切り替えとか、画像の最適化とか、細かいところを自分で全部書かないといけない。Next.jsはそういう面倒ごとを最初から全部用意してくれてる、全部入りセットみたいなものです。
個人のホームページでも、仕事で使うサイトでも、とりあえずコレ選んどけば外さない。そういう立ち位置です。
プロジェクトを作る
Claude Codeを起動した状態で、こう話しかけます。
Next.js 15のプロジェクトをmyhpという名前で作って。
TypeScriptとTailwind CSSも入れて。
すると自分で必要なコマンドを組み立てて実行してくれます。裏側で動いてるのはだいたいこんなやつ。
npx create-next-app@latest myhp --typescript --tailwind --app
5〜10分くらい待つとセットアップ完了。myhpフォルダが出来上がります。
動かしてみる
フォルダに入って、開発用サーバーを起動。
cd myhp
npm run dev
しばらくすると、こんな表示が出ます。
Local: http://localhost:3000
このURLをスマホのブラウザにそのまま打ち込む。Chrome でも Brave でも、何でもいい。開くと「Welcome to Next.js」みたいなページが表示されます。
スマホの中でサーバーが動いて、同じスマホのブラウザでそれを見ている、という状態です。ちょっと不思議な気持ちになります。
中身を書き換えてみる
Claudeにこう頼みます。
app/page.tsx のトップページを、
「ようこそ」という見出しと自己紹介の文章だけのシンプルな形に書き換えて。
Claudeがファイルを書き換えてくれたら、ブラウザをリロードせずに見てみる。Next.jsは変更を自動で反映してくれるので、保存した瞬間に画面も変わります。この体験、慣れると戻れません。
Tailwind CSS v4 のちょっとした注意
最近のNext.jsに入るTailwindはv4系。v3までと設定方法が結構変わっています。
一番違うのは、tailwind.config.js を書かなくてよくなったこと。代わりに globals.css の中に @theme というブロックで色やフォントを定義します。
ネットの古い記事だとv3前提の手順がほとんどなので、「設定ファイルがない!」と焦らないこと。v4ではそれが正解です。
スマホで開発するときのコツ
- 画面の狭さ対策: Termuxのフォントサイズは小さめにする(2本指ピンチで変えられる)
- キーボード: 物理キーボードが繋がるなら劇的に楽になる。Bluetoothキーボード1個あると世界が変わる
- ファイル編集はClaudeに任せる: 自分で
viとか開いて編集するより、Claudeに指示した方が圧倒的に速い - 画面分割: Xperiaなら画面分割でターミナルとブラウザを同時表示できる。確認がめちゃくちゃ楽
つまずきポイント
- localhostが開かない:
npm run devがちゃんと起動してるか確認。エラーメッセージは全部Claudeに読ませると早い - port 3000 is in use: 他のプロセスが使ってる可能性。
npm run dev -- -p 3001で別ポートに逃がす - 動作が重い: 正常です。スマホのCPUでビルドしてるので、ある程度は仕方ない
次回予告
次回はついに最終回、作ったホームページをインターネットに公開します。GitHubにプッシュして、Vercelでデプロイするところまで。スマホ1台で開発からデプロイまでの旅、ゴールが見えてきました。
続く。