Page Routerをつかう方法
- pagesディレクトリ以下のファイルは自動的に使える
- index.jsがディレクトリのルート
- /pages/index.js は'/'によってアクセスできる
App Routerを使う方法
- page.jsxファイルをNext.jsアプリケーションの/app配下で作成すると、page.jsxファイルの存在する該当ルートが使えるようになる
- /app/page.tsxは'/'に該当
- ルートごとのレイアウトをlayout.jsxによって決定できる
- 以下のような形式なので、a/bというディレクトリ構成で、a, bそれぞれにlayout.jsxを作成すると、レイアウトが二重にかかることになる
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<div className="bg-red-300">{children}</div>
);
}