Next.jsのページ

Next.jsでは、ページとはpagesディレクトリにあるファイルからエクスポートされたReactコンポーネントです。

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

• 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ファイルを使用してWebサイトを構築するのと似ています。HTMLを書く代わりに、JSXを書いてReactコンポーネントを使用します。

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