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

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