如何在 NextJS 中为页面设置自定义目录？（不是 src 或 root ）

在 Next.js 中，默认情况下，所有页面都放在项目根目录下的 pages 文件夹中。但如果你想要自定义页面的目录结构，比如将页面组织在不同的目录下，你可以通过一些简单的配置进行修改。

步骤一：修改 next.config.js

首先，你需要在项目的根目录中找到或创建一个 next.config.js 文件。这个文件是 Next.js 的中心配置文件，允许你控制 Next.js 的许多高级配置选项。

步骤二：使用 dir 选项

在 next.config.js 文件中，你可以使用 dir 选项来指定一个自定义的目录路径。这个路径将被用来替代默认的项目根目录。例如，如果你想将所有的页面文件放在根目录下的 custom 文件夹中，你可以这样配置：

javascript
// next.config.js
module.exports = {
  dir: './custom',
}

步骤三：组织你的页面文件

现在，你可以在 custom 文件夹中创建一个 pages 目录，并像平常一样在这个目录下组织你的页面文件。例如：

shell
project-root/
  |- custom/
     |- pages/
        |- index.js
        |- about.js

示例代码

假设你有一个关于页面 about.js：

javascript
// /custom/pages/about.js
import React from 'react';

const About = () => {
  return <div>About Us</div>;
};

export default About;

现在，无论你的页面是在 custom/pages 还是其他任何你指定的目录下，Next.js 都能正确识别和路由这些页面。

注意事项

• dir 配置只改变了 Next.js 在查找 JavaScript 和 Markdown 文件时的基础目录，其他的配置和文件组织方式不受影响。
• 确保在进行这种改动后重新启动你的开发服务器，以使配置生效。

通过这种方式，你可以灵活地设置和组织你的 Next.js 项目结构，以适应不同的开发需求和偏好。