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というファイルを作成し、以下の内容を記述します:
コンポーネントには任意の名前を付けることができますが、defaultエクスポートとしてエクスポートする必要があります。
開発サーバーが起動していることを確認し、http://localhost:3000/posts/first-postにアクセスしてください。以下のようなページが表示されるはずです:
これがNext.jsで異なるページを作成する方法です。
pagesディレクトリの下にJSファイルを作成するだけで、ファイルへのパスがURLパスになります。
ある意味、これはHTMLやPHPファイルを使ってウェブサイトを構築するのと似ています。HTMLを記述する代わりに、JSXを記述しReactコンポーネントを使用します。
新しく追加したページへのリンクを追加して、ホームページからナビゲートできるようにしましょう。