Next.js のページ

Next.js では、ページとは pages ディレクトリ 内のファイルからエクスポートされた React Component です。

ページは、その**ファイル名**に基づいてルートに関連付けられます。たとえば、開発環境では

• pages/index.js は / ルートに関連付けられます。
• pages/posts/first-post.js は /posts/first-post ルートに関連付けられます。

pages/index.js ファイルはすでに存在するため、動作を確認するために pages/posts/first-post.js を作成しましょう。

新しいページを作成

pages ディレクトリの下に posts ディレクトリを作成します。

posts ディレクトリ内に first-post.js という名前のファイルを作成し、以下の内容を記述します。

export default function FirstPost() {
  return <h1>First Post</h1>;
}

コンポーネント名は任意ですが、`default` エクスポートとしてエクスポートする必要があります。

開発サーバーが実行されていることを確認し、https://:3000/posts/first-post にアクセスしてください。ページが表示されるはずです。

このようにして、Next.js でさまざまなページを作成できます。

pages ディレクトリ に JS ファイルを作成するだけで、そのファイルのパスが URL パスになります。

ある意味、これは HTML や PHP ファイルを使ってウェブサイトを構築することに似ています。HTML を書く代わりに JSX を書き、React Components を使用します。

新しく追加したページへのリンクを追加して、ホームページから移動できるようにしましょう。