Next.js构建部署到Netlify后动态页面加载失败出现404求助

问题根源 #

Netlify作为静态托管平台，默认不会自动处理Next.js的客户端路由规则，尤其是动态路由；另外你代码里的路由判断存在错误，也可能加剧问题。

修复步骤 #

1. 修正__app.js中的路由判断错误 #

你的代码里直接将router对象和字符串'/'比较，这是错误的——router是useRouter()返回的对象，要判断当前路径应该用router.pathname：

export default function CustomApp({ Component, pageProps }) {
  const router = useRouter()
  useEffect(() => {
    initGA();
    logPageView();
    Router.events.on('routeChangeComplete', logPageView);
  }, []);

  // 修正路径判断逻辑
  if(router.pathname === '/') {
    return <Component {...pageProps} />;
  } else {
    return (
      <MantineProvider withGlobalStyles withNormalizeCSS>
        <NotificationsProvider>
          <Component {...pageProps} />
        </NotificationsProvider>
      </MantineProvider>
    )
  }
}

2. 添加Netlify重定向规则 #

在项目根目录的public文件夹下创建_redirects文件（没有public就新建），添加以下内容：

/*    /index.html   200

这个规则会让Netlify将所有请求都转发到index.html，由Next.js的客户端路由系统来处理动态路由。

3. 确认Next.js构建配置（可选） #

如果你是用静态导出模式（执行next export），需要确保动态路由页面[calendar].jsx配置了getStaticPaths和getStaticProps，或者在next.config.js中配置exportPathMap来预生成路由：

// next.config.js示例（如果用静态导出）
const nextConfiguration = {
  target: 'serverless',
  exportPathMap: async function () {
    return {
      '/': { page: '/' },
      // 如果有已知的calendar参数值，可以在这里预生成
      '/calendar/2024': { page: '/[calendar]', query: { calendar: '2024' } }
    }
  }
};

如果是用SSR/ISR模式，部署时选择Netlify的Next.js框架选项，平台会自动配置运行时环境。

完成以上步骤后重新构建部署到Netlify，动态路由/calendar/xxx应该就能正常访问了。

内容的提问来源于stack exchange，提问作者like who