Next.jsで()付きのディレクトリの扱い

バージョン

    "next": "13.5.6",
    "react": "^18",
    "react-dom": "^18",

概要

Next.jsでルーティングを行う時にディレクトリ内にpage.tsxを作成するとルーティングが可能になる。例えば、下記のようにディレクトリ内に作成すると[http://localhost:3000/](http://localhost:3000/contact)pagesとなる。

pages
  →page.tsx

課題

仮にpagesディレクトリにtaskディクトリとcontactディレクトリを作成して、それぞれの配下にpage.tsxを作成する。それぞれのルーティングはhttp://localhost:3000/pages/taskとhttp://localhost:3000/pages/contactになる。このパス中のpagesの記述をなくしたい。

解決策

pagesディレクトリを(pages)に書き換えることで、それぞれのルーティングはhttp://localhost:3000/taskとhttp://localhost:3000/contactとなる。