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

はじめに

　Next.jsの学習を振り返ると、全体像を飲み込むまでやや時間がかかった印象です。

　特に、Next.js独自のルール（フォルダ構造・ルーティング、サーバーコンポーネント・クライアントコンポーネント）を理解するのには苦戦しました。

　今回は、私なりのNext.jsに対する解釈と行き詰まった点について共有します。

１　Next.jsについて

２　Metadataでは"use client"を使用しない

３　react-hook-formパッケージが必要

１　Next.jsについて

　Next.jsとは、Reactを使って本格的なWebサイト・Webアプリを作るためのフレームワークで、

Netflix・Hulu・Spotify・TikTok ・Nikeなど大手を筆頭に数多くの企業で使用されています。

ではなぜここまで人気なのか。それは、

JavaScript → React → Typescript → Next.js

の構図にあるからだと思います。

Next.jsは単なる「Reactを少し便利にしたもの」ではなく、

・SEO対策

・サーバーサイド処理

・ページ高速表示

・ページ、URLの管理（ルーティング）

・APIの作成

・認証などWebアプリ機能

・大規模Webサービス

などまとめて使えるという大きな利点があります。

以上のことから、Next.jsを極める＝今後かなり戦える のではないかと思いました。

２　Metadataでは"use client"を使用しない

　８章課題の注意点に、「すべての .tsx コンポーネントの先頭に、”use client” の文字列を追加して、すべてのコンポーネントをクライアントサイドで実行するようにしてください。」とあったため、とりあえず実行したところ、layout.tsxでエラーが発生しました。

　そのエラー内容↓

Error: You are attempting to export "metadata" from a component marked with "use client"

　要約すると、Next.js (App Router) では、"use client" を指定したクライアントコンポーネントから metadata を export することはできないというもの

　つまり、メタデータの生成処理が「サーバー側でのみ実行・処理される設計」になっているため、”use client” は指定できないということです。その理由としては下記の通り。

１　ブラウザに届く前に<head> を完成させるため

２　クライアント用JavaScriptのバンドルサイズを削減するため

３　セキュリティ・サーバー情報の安全な利用

※詳細は長くなるため割愛します。

　Next.js は「SEOやパフォーマンスを最適化するための処理はサーバー側で行う」という明確な境界線を設けているからこそ"use client" の使い分けが重要になってくるのだと学びました。

３　react-hook-formパッケージが必要

　次に、react-hook-formパッケージがインストールされていなかったためエラーが発生しました。

　react-hook-formとは、Reactアプリケーションでフォームの状態管理やバリデーション（入力チェック）を簡単かつ効率的に行うためのライブラリです。

そのメリットは、

１　ハイパフォーマンス（再レンダリングの削減）

２　コードがシンプルで可読性が高い（直感的）

３　柔軟なバリデーション（入力チェック）

４　TypeScriptとの相性が抜群 （強力な型補完・エラーチェック）

などが挙げられます。

　react-hook-formパッケージでは、Reactでのフォーム構築時の面倒な「状態保持」と「エラー管理」を大幅に削減できるため、現在のReact / Next.js開発ではデファクトスタンダード（事実上の標準）として広く使われています。

　以上のことを理解しているだけでも、react-hook-formパッケージをインストールすることが重要であることがわかります。

　特に、ReactやTypeScript、Next.jsには最初からreact-hook-formパッケージが入っていないため注意が必要になります。

まとめ

　今回はNext.jsの基礎と学習の中で行き詰まった点について振り返りました。

　まだNext.jsの「序章」を学んだに過ぎませんが、エラーの解消や各概念の意図を調べる中で、単にコードを書くだけではなく「なぜこの設計になっているのか」を理解する面白さを感じました。

　今後は、実際に企業で使われているWebアプリのコードなども積極的に読んで分析していきたいです！