ページを追加してみる

はじめに

今回はNext.jsのApp Router構成で新しいページを追加する方法を解説します。

appディレクトリにフォルダを追加する

appディレクトリの中に新しいフォルダ（例：about）を作成し、その中にpage.tsxファイルを追加します。

1my-next-app/
2└── app/
3├── page.tsx
4└── about/
5	└── page.tsx

about/page.tsx の中身

about/page.tsxに以下のようにReactコンポーネントを記述します。

1export default function AboutPage() {{
2	return (
3		<div>
4			<h1>Aboutページ</h1>
5			<p>これはApp Routerを使ったAboutページです。</p>
6		</div>
7		);
8	}}

確認方法

Next.jsの開発サーバーを起動した状態で、http://localhost:3000/about にアクセスすると、作成したページが表示されます。

まとめ

• appフォルダの中にフォルダを作り、page.tsxを入れるとそのパスが自動でルーティングされる。
• App Routerはフォルダとファイルの構成がそのままURLに反映される。