ルート

pages/以下に置いたファイルは規則によって自動的にルーティング設定されます。例えば、

  • pages/index.js/
  • pages/products/index.js/products
  • pages/products/related.jsは/products/related`

のような感じです。見ての通りファイル構造そのままでルート設定されます。またindex.*な時はディレクトリ名がそのファイルのルートになります。

クエリ付きツート

[ ]で囲んだファイル名・ディレクトリ名(例えばpages/products/[productId].js)にすると、対象のファイルは動的に内容を切り替えられるようになります。その仕組はpages/からの絶対パスの中で[ ]で囲まれた部分はすべてgetInitialPropsqueryプロパティに格納されて来るからです。

例えばpages/products/[productId]/[productColor].jsのようなページの場合、

{
  productId: 123,
  productColor: 'orange'
}

のようなクエリオブジェクトを動的に取得できるので、これを使って結果ページを切り替えることができます。