はじめに

普段は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）などが書かれている

終わりに

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