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

React単体ではフロントエンドだけ？

８章の冒頭にこんな一文がありました。
「Next.jsではフロントエンドのみならず、バックエンドの開発も一緒にできます。」
それを読んで、React単体でできるのってフロントエンドだけだったんだと気づきました。

🌳React単体でできること

Reactはフロントエンド（ユーザーが直接触れる部分）を構築するためのライブラリ。ユーザーのブラウザ上で画面を描画したり、操作に応じて表示を変えたりできる。

React単体では：

• 画面の構築：UIをコンポーネント単位で組み立てる

• 状態の管理：useStateやuseEffectなどで状態を管理

• ルーティングは別ライブラリが必要：React Routerを組み合わせて使う

つまり、見た目や操作感を作るのが得意だけど、Webアプリ全体を構築するには他の仕組みが必要。

Next.jsとは？

そして今回８章で登場したのがNext.js。
Reactをベースにしながら、サーバーサイドの処理などをできるようにしたフレームワーク。つまり、フロントエンドとバックエンドの両方を完結できてしまう。

Next.jsでは：

• ページごとのルーティングが自動

• App Routerでページ構成が直感的に

🌳App Routerについて

Next.jsには2つのルーティング方法があり、今回使っているのは App Router（新世代のルーター）。 これは、フォルダとファイルの構造＝ページの構造になるという特徴がある。

🌳リンクの設定方法

Next.jsのApp Routerが「ファイルの場所＝URL」になる仕組みを使っている。
以下のように、/posts/1にアクセスすると、app/posts/[id]/page.tsxが表示される。

🌳今回の課題のページ構成

🌳page.tsxの名称について

App Routerでは、page.tsx がそのフォルダのページとして認識されるというルールがある。 だから、ファイル名は page.tsx にする必要がある。

🌳useParamsが使えない

React Routerで使っていた useParams() は、Next.js（App Router）ではそのまま使えない。 Next.jsでは、next/navigation からインポートして使う。

🌳その他のポイント

• src/app/ 配下のフォルダはページとして認識される

• ページじゃないもの（部品）は _components のようにアンダーバーから始めるのが慣例

• クライアントサイドで動くコンポーネントには、ファイルの先頭に "use client" を書く必要がある

おわりに

いつも課題合格後に振り返りを書こうとしても、そのまま書かずに終わってしまいました😓
なので今回は、課題を進めながら学びをメモとしてブログの下書きに記入し、合格後に整理して公開するやり方に変えてみました！
どうやらこのやり方が自分には合っているみたいです。この調子で学びを少しずつでも深めていけたらいいなと思っています！

今回、初めて章の振り返りを投稿してみて、毎回きちんと振り返っている方って本当にすごいなと感じました。
「早く次の課題に進まなあかん」と焦っていた自分に、少し...いや結構余裕がなかったのかもしれません。今は退職届を出して有給休暇消化中で気持ち的に余裕があるのかもしれません。（このあたりのことは、また後日ブログに書こうと思っています）

あと、8章をやりながら改めて思ったのは、
「知らないことを知れるって、やっぱり楽しいな〜」ってことでした。
６章ではReact単体で簡易的なブログサイトを作成し難しさの中にある楽しさと基礎の大切さを理解し、
７章ではTypeScriptに置き換え型をつけエラーを未然に防げることに感動し、
そして今回の８章ではNext.js(TypeScript使用) に置き換えることで、また新たな発見や気づきがありました！
そんな気持ちで課題に取り組めたのが、何よりの収穫でした！

引き続き、９章からも頑張っていきます🔥🔥🔥