Open1
【React/Next.js】ハンズオン学習開始前の注意事項
no215某かの教材を使って学習を始める前に
React と Next.js のキャッチアップのきっかけとして【しまぶーのIT大学】さんのYouTube chを視聴させていただきました。
Next.js のバージョン更新に伴ってコンテンツ内の仕様と若干齟齬があります。
App Router の登場により、ディレクトリ構造などに違いが生じるため教材コンテンツに沿ってハンズオン形式で進める場合はセットアップ（環境構築）時に少し注意を払う必要があります。
⚠️プロジェクト作成時の注意点⚠️
ターミナル
npx create-next-app@latest
# or
yarn create-next-app
動画内では省略されてますが、上記のコマンドを実行することでCLI上で以下の設定が表示されます。
ターミナル
✔ What is your project named? … プロジェクト名の命名入力
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
6つ目／7項目中 の App Router の設定を No にすることで動画内のディレクトリ構造と同じになります。
この動画に限らず、ハンズオン形式の教材でApp Routerに対応していない場合は上記を考慮するととっかかりやすくなると思いました。
以下の記事が参考になりました。