【8章】Next.js基礎学習＋課題の振り返り

はじめに

Chapter 8 では、これまで React Router で組んでいたブログサイトを Next.js(App Router)へ移行しました。今回は、「移行で何が変わったのか」「フレームワークを使う利点はどこにあるのか」を整理します。

この記事の対象

• React Router から App Router への移行を控えている人

• Next.js を使う意味がまだピンと来ていない人

結論

Next.js(App Router)の最大の利点は、ディレクトリ構成がそのままルーティングになるため、アプリ全体の階層構造が視覚的に理解しやすいことだと感じました。ルーティング設定をコードで書く必要がなくなる分、「どの階層にどのページが必要か」という設計そのものに集中できます。

移行で対応した主な変更点

1. ルーティングの考え方が変わる

React Router ではルーティングをコンポーネント内に記述していましたが、App Router では 「app 配下のフォルダ構成がそのまま URL になります(各フォルダに page.tsx を置くことでページとして認識されます)」。

そのため移行作業では、まず「どの階層にどのページが必要なのか」を洗い出すところから始めました。逆に言えば、ここさえ整理できればルーティングの実装はほぼ終わりです。

2. Link の書き方: to → href

React Router の <Link to="/posts"> は、Next.js では <Link href="/posts"> になります。

小さな違いですが、移行時は機械的に置き換えるだけでは済まず、「どのファイルのどこが編集箇所になるのか」を一つずつ確認しながら進める必要がありました。

3. img → Image と next.config.ts の設定

画像は <img> タグから Next.js の <Image> コンポーネントに置き換えます。ここで注意が必要なのが、外部URLの画像を使う場合は next.config.ts に事前に登録しないとエラーになる点です。

移行して感じたフレームワークの利点

移行前は「わざわざ Next.js にする意味はあるのか」と思う部分もありましたが、実際に触ってみると、階層ごとにページが整理される構成は想像以上に分かりやすいものでした。ファイルの置き場所を見れば URL とページの対応が分かるので、コードを追う負担が減ります。

一方で、無駄なく・だぶりなくコードを書くには、自分の理解度がまだ足りないとも感じました。そういうコードが書けるようになれば、保守性が高まるだけでなく、レビューする人への配慮にもつながるはずです。ここは今後の課題です。

まとめ

• App Router はディレクトリ構成 = ルーティングなので、階層構造が理解しやすい

• 移行時は Link の to → href、img → Image(+ next.config.ts の設定)など、編集箇所の把握が必要

• 無駄なく・だぶりないコードを書くことは、保守性とレビュー者への配慮の両方につながる