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エクスポートとしてエクスポートする必要があります。

開発サーバーが起動していることを確認し、http://localhost:3000/posts/first-postにアクセスしてください。以下のようなページが表示されるはずです:

これがNext.jsで異なるページを作成する方法です。

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

ある意味、これはHTMLやPHPファイルを使ってウェブサイトを構築するのと似ています。HTMLを記述する代わりに、JSXを記述しReactコンポーネントを使用します。

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