【超初心者】初めてのNext.js～プロジェクト作成やディレクトリ構造について～

はじめに

普段はPHPを触っているWEBエンジニアです。
初めてNext.jsに触れる機会があり、基礎の基礎を学んだため、忘れないように書いておきます。

環境

Windows11
Node.jsインスト済み

新規プロジェクト作成

下記コマンドを実行すると、カレントディレクトリに新規プロジェクトが作成されます！✨
※@latestで最新バージョンを指定しています

npx create-next-app@latest プロジェクト名

色々質問されますが、App RouterのみYesを選択した前提で話を進めていきます！

※App Routerとは：Next.js13から利用可能なルーティングシステム。ディレクトリ構造がそのままルーティング構成となる。

起動コマンド

npm run dev

プロジェクト構成

プロジェクト名/
├── .next/
├── app/
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── node_modules/
├── public/
│   ├── favicon.ico
│   └── vercel.svg
├── .gitignore
├── next.config.js   
├── package-lock.json
├── package.json
├── README.md
└── tsconfig.json

各ディレクトリ・ファイルについて

• app/
  メインの開発場所。ページの画面やレイアウト、スタイルなどを作っていく。
  App Routerのルート。

  • layout.tsx：アプリ全体のレイアウト
  • page.tsx ：トップページ
  • global.css：全体に適用されるcss
    ※必要に応じて、ページごとのスタイルを分離したい場合は page.module.css を作成する

• public/
  画像やアイコンなど、ブラウザから直接アクセスできる静的ファイルを入れる場所

• node_modules/
  npmでインストールしたパッケージが入っている

• package.json
  使用しているパッケージや、実行可能なスクリプト（例：npm run dev）などが書かれている

終わりに

今後追記していこうと思います！
間違っていることがあれば優しく教えていただけると嬉しいです！😊