takashi /webアプリ７期
【８章】Next.js基礎学習＋課題の振り返り
2026年09月02日
takashi /webアプリ７期
2026年09月02日
はじめまして。 Web７期生で入会しましたtakashiです。 現在公務員として働く１児の父（31歳）です。 育児をきっかけに自分を見つめ直し、『働く環境を変えたい！！』と強く思うようになりました。 そんな時ぶべさんのYouTubeチャンネルに出会い、吸い寄せられるように入会しました。 「未経験からのIT業界転職は難しい」と言われていますが、そんな常識ぶっ壊したいという熱い思いがありますし、Shift Bなら必ず成し遂げられると信じてます。 仕事を続けながら（11月くらいまでは忙しい）なので本格的にできるのは12月以降となりますが、来年４月の転職を目標にモチベーションMAXで頑張っていきます!! 〜自己紹介〜 【経歴】 >肥後の国出身 肥前の国在住 >東海大学政治経済学部→某住宅メーカー営業→公務員※全国転勤 【趣味】 >ランニング・筋トレ >ファッション 【人生の目標】 >妻と起業 【一言】 「憧れるのはやめましょう」 まずは目の前の課題に全力で取り組んでいきます!! 先生方（皆様）、何卒よろしくお願いします‼︎
見出しはありません
要約を生成中...
Next.jsの学習を振り返ると、全体像を飲み込むまでやや時間がかかった印象です。
特に、Next.js独自のルール（フォルダ構造・ルーティング、サーバーコンポーネント・クライアントコンポーネント）を理解するのには苦戦しました。
今回は、私なりのNext.jsに対する解釈と行き詰まった点について共有します。
１ Next.jsについて
２ Metadataでは"use client"を使用しない
３ react-hook-formパッケージが必要
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を極める＝今後かなり戦える のではないかと思いました。
８章課題の注意点に、「すべての .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アプリケーションでフォームの状態管理やバリデーション（入力チェック）を簡単かつ効率的に行うためのライブラリです。
そのメリットは、
１ ハイパフォーマンス（再レンダリングの削減）
２ コードがシンプルで可読性が高い（直感的）
３ 柔軟なバリデーション（入力チェック）
４ TypeScriptとの相性が抜群 （強力な型補完・エラーチェック）
などが挙げられます。
react-hook-formパッケージでは、Reactでのフォーム構築時の面倒な「状態保持」と「エラー管理」を大幅に削減できるため、現在のReact / Next.js開発ではデファクトスタンダード（事実上の標準）として広く使われています。
以上のことを理解しているだけでも、react-hook-formパッケージをインストールすることが重要であることがわかります。
特に、ReactやTypeScript、Next.jsには最初からreact-hook-formパッケージが入っていないため注意が必要になります。
今回はNext.jsの基礎と学習の中で行き詰まった点について振り返りました。
まだNext.jsの「序章」を学んだに過ぎませんが、エラーの解消や各概念の意図を調べる中で、単にコードを書くだけではなく「なぜこの設計になっているのか」を理解する面白さを感じました。
今後は、実際に企業で使われているWebアプリのコードなども積極的に読んで分析していきたいです！
要約
コメント
まだコメントはありません。
