Next JS中页面与动态路由文件夹同名可行吗？导航异常求助

云原生阿岚

2026-7-26

Next.js页面与动态路由文件夹同名的问题解答

Next.js允许页面文件和动态路由文件夹同名，但你的写法会触发路由优先级冲突，导致返回/movies时页面空白。

问题原因

Next.js的客户端路由缓存机制会在访问/movies/123后，将/movies识别为动态路由的父路径，返回时错误地尝试匹配movies/[id].js的逻辑，但此时没有传入ID参数，最终导致页面无法渲染。

解决方案

最稳妥且符合官方规范的方式是调整路由文件结构：

将单独的movies.js重命名为movies/index.js，保留movies/[id].js的动态路由文件
调整后，路由规则会明确：
- /movies 匹配 movies/index.js
- /movies/123 匹配 movies/[id].js

如果不想调整结构，也可以在动态路由文件中处理边界情况（不推荐，不如结构调整直观）：
在movies/[id].js中添加参数校验并重定向：

export async function getServerSideProps(context) {
  const { id } = context.params;
  // 若没有ID参数，重定向到/movies
  if (!id) {
    return {
      redirect: {
        destination: '/movies',
        permanent: false,
      },
    };
  }
  // 正常的动态页面数据获取逻辑
  return { props: { id } };
}