请问下nextjs项目，pages目录下结构，各个文件的功能是什么呢？

Question

请问下nextjs项目，pages目录下结构，各个文件的功能是什么呢？

.pages/
├── _app.tsx
├── _document.tsx
├── api
│   └── hello.ts
├── index.tsx
└── main
    └── index.tsx

Answer 1

简单来说:

• components文件夹: 这里是专门放置自己写的组件的，这里的组件不包括页面，指公用的或者有专门用途的组件。
• node_modules文件夹：Next项目的所有依赖包都在这里，一般我们不会修改和编辑这里的内容。
• pages文件夹：这里是放置页面的，这里边的内容会自动生成路由，并在服务器端渲染，渲染好后进行数据同步。
• static文件夹： 这个是静态文件夹，比如项目需要的图片、图标和静态资源都可以放到这里。
• .gitignore文件： 这个主要是控制git提交和上传文件的，简称就是忽略提交。
• package.json文件：定义了项目所需要的文件和项目的配置信息（名称、版本和许可证），最主要的是使用npm install 就可以下载项目所需要的所有包。

在 Next.js 中，一个 page（页面） 就是一个从 .js、jsx、.ts 或 .tsx 文件导出（export）的 React 组件 ，这些文件存放在 pages 目录下。每个 page（页面）都使用其文件名作为路由（route）。

如果你创建了一个命名为 pages/about.js 的文件并导出（export）一个如下所示的 React 组件，则可以通过 /about 路径进行访问。

详细解析参看

https://juejin.cn/post/7221206168423940153