如何使用react.js在next.js中包含多个部分时如何写页面名称

Question

文件结构就是这样

-pages
   - index.js
   - about.js

哪个URL是localhost:3000和localhsot:3000/about，但是虽然我有类似的内容project-single，但我还是尝试在project-single.js页面和这样的结构

class ProjectSingle extends React.Component {
  render() {
    return <div>Hi There</div>;
  }
}

export default ProjectSingle 

但是当我尝试使用该网址localhost:3000/project-single时，它显示了404错误。

我该怎么做？