如何修改Next.js App Router的默认app文件夹名称？

要将默认的src/app目录改为src/nextapp，只需两步操作：

1. 修改Next.js配置文件 #

在项目根目录的next.config.js中添加appDir配置，指定新的App Router目录路径：

/** @type {import('next').NextConfig} */
const nextConfig = {
  appDir: 'src/nextapp'
}

module.exports = nextConfig

如果你的项目没有使用src目录，直接写appDir: 'nextapp'即可。

2. 调整文件夹结构 #

将原来的src/app文件夹重命名为src/nextapp，确保layout.tsx、page.tsx等核心文件都保留在新目录下。

验证配置 #

运行npm run dev启动开发服务器，检查页面是否正常渲染、路由是否能正常工作。如果出现报错，优先检查next.config.js中的路径是否与实际文件夹结构一致。

注意事项 #

• 确保你的Next.js版本在13.4及以上，appDir配置在该版本后才稳定支持
• 使用TypeScript的项目无需额外修改tsconfig.json，Next.js会自动识别新的App目录路径

内容的提问来源于stack exchange，提问作者Kasra Alizadeh