Open2023/09/12にコメント追加2

next.jsの学習

next.jsでPJを作成

PJ作成コマンド
npx create-next-app@latest

ディレクトリ構成

全部yesの場合のディレクトリ構成

.
├── components
├── node_modules
├── public
└── src

・今までのpage-routerではsrc直下にpagesディレクトリが生成されていたが、
app-routerを導入している場合、src直下にappディレクトリが生成される

・router機能を利用する場合、app直下にrouteのpassと紐づくディレクトリ(例：home)を作成し、page.tsxファイルを追加する。
（page.tsxは従来のpage-routerにおけるindex.tsxと同じ役割）

.
└── app
    ├── favicon.ico
    ├── globals.css
    ├── home
    │   └── page.tsx
    ├── layout.tsx
    └── page.tsx

・_ から始まる名前のディレクトリを、ルーティング制御から除外してくれる。

そのようなコードの置き場として、ルーティング対象外になる _something/ のようなディレクトリを利用することができます。
app/_utils/dete-time-format.ts
日付フォーマットの関数を export
app/_components/Button.ts
汎用ボタンコンポーネント
引用元
https://zenn.dev/yumemi_inc/articles/next-13-app-overview

コンポーネント追加後のディレクトリ構成

.
└── app
    ├── _components
    │   └── registerButton.ts
    ├── favicon.ico
    ├── globals.css
    ├── home
    │   └── page.tsx
    ├── layout.tsx
    └── page.tsx

サーバー起動

サーバー起動
npm run dev

ルーティングの確認
http://localhost:3000/home

参考

app-router、ディレクトリ構成の解説

nextを使ったPJの立ち上げ

スジ彫りのマサ

整理中

ディレクトリ構成案(コンポーネントの構成について)

.
└── app
    ├── _components // システム共通のものはapp配下に
    │   └── registerButton.ts
    ├── favicon.ico
    ├── globals.css
    ├── home
    │   ├── _components // ページやルートで共通のものはroute配下に
    │   │   └── homeInputForm.ts
    │   └── page.tsx
    ├── layout.tsx
    └── page.tsx

参考
layoutの使い方。app-routerにおけるファイル規則

layoutのpageごとの切り替え

use clientて何？

components内のpropsの書き方

onclickなどでイベント毎に要素に引数を渡したい場合

react hooksの理解