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

• pages/index.jsは/

• pages/products/index.jsは/products

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

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

クエリ付きツート

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

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

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