🔥

【Web Library】Nextjs13で覚える便利なライブラリ【#２app Directory】

2023/02/24に公開

【#２app Directory】

今回は「app」ディレクトリの中身を簡単に解説します。

これまで「pages」フォルダに作成していた
ページを表示するためのファイルは、
「app」ディレクトリ内に作成します。

APIルートにつきましては、これまで通り、
一番上の階層に「pages」フォルダを作成してその中に「api」のフォルダを作成します。

appフォルダ直下の「page.tsx」がこれまでの「index.tsx」の代わりになります。

また、appフォルダ直下の「layout.tsx」は「RootLayout」を定義していて、
こちらが「_app.tsx」の代わりになります。

appフォルダ内に新しくフォルダを作成すると、
ルートの作成ができるようになります。

これまではフォルダ内のファイルを「index.tsx」で作成していたのですが、
「page.tsx」で作成する必要があります。

ダイナミックルートにつきましても、
フォルダに「[params]」のように設定して、
フォルダ内のファイル名は「page.tsx」である必要があります。