NextJS 13.3.4中app目录与layout文件位置及修改无效求助

核心原因 #

你用npx create-next-app@latest创建的13.3.4版本项目，默认启用的是Pages Router（基于pages目录的传统路由模式），而教程里提到的app目录属于App Router——这个功能在NextJS 13.3.x版本中还处于实验性阶段，默认并未开启，所以你看不到自动生成的app目录，手动添加后也不会生效。

解决步骤 #

1. 开启App Router实验配置 #

打开项目根目录的next.config.js，添加experimental.appDir: true配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 保留原有配置，新增以下内容
  experimental: {
    appDir: true,
  },
}

module.exports = nextConfig

2. 重启开发服务器 #

修改配置后，必须停止当前运行的npm run dev命令，重新执行启动命令，新配置才会生效。

3. 验证效果 #

重启后访问localhost:3000，页面会自动加载app/page.tsx的内容（需确保手动创建的app目录下存在layout.tsx和page.tsx文件）。

额外说明 #

• 若不想使用实验性的App Router，可选择基于pages目录的Pages Router教程学习，该模式目前依然稳定且被广泛使用。
• 若想直接使用正式版App Router，可将NextJS版本升级到13.4及以上，此版本后App Router已正式转正，创建项目时默认会生成app目录，无需额外配置。

内容的提问来源于stack exchange，提问作者Isaac Ikusika