Next 13 部署至Vercel遇动态路由预渲染错误求助

核心原因 #

执行npm run build时，Next.js会对动态路由页面进行静态预渲染（SSG），此时如果没有为所有可能的username生成对应的数据，或者查询的username在Supabase中不存在，就会导致profile返回null，直接访问profile.avatar_url就会触发Cannot read properties of null错误。本地开发模式下可能因为是SSR（每次请求动态查询），或者本地数据库存在测试数据，所以不会报错。

具体排查步骤 #

• 检查Supabase中是否存在预渲染时使用的username数据：build过程中Next.js会尝试获取动态路由的参数进行预渲染，如果你配置了generateStaticParams，要确保这些参数对应的username在Supabase中都有对应的profiles记录。
• 确认generateStaticParams的逻辑：如果你的页面使用了generateStaticParams，要保证它返回的所有username都是有效的，不存在的username会导致查询返回null。
• 检查查询逻辑的容错处理：代码中直接访问profile.avatar_url，没有判断profile是否为null，这是触发错误的直接原因。

修复方法 #

1. 添加空值判断：在使用profile的属性前，先检查profile是否存在，比如：

// 原错误写法
<img src={profile.avatar_url} alt="Avatar" />

// 修改后
{profile ? <img src={profile.avatar_url} alt="Avatar" /> : <div>用户不存在</div>}

2. 返回404页面处理不存在的用户：如果查询不到profile，可以直接触发404，在Next.js 13中使用notFound()函数：

import { notFound } from 'next/navigation';

async function getProfile(username) {
  const { data: profile, error } = await supabase
    .from('profiles')
    .select('*')
    .eq('username', username)
    .single();

  if (error || !profile) {
    notFound();
  }
  return profile;
}

3. 切换为动态渲染（SSR）：如果你的页面不需要静态预渲染，可以强制开启动态渲染，在页面组件顶部添加：

export const dynamic = 'force-dynamic';

这样build时不会预渲染该页面，而是每次请求时动态查询数据，避免预渲染时数据缺失的问题。

4. 确保generateStaticParams返回有效参数：如果必须使用SSG，要保证generateStaticParams返回的username都是Supabase中存在的，比如直接从数据库拉取有效列表：

export async function generateStaticParams() {
  const { data: profiles } = await supabase.from('profiles').select('username');
  return profiles.map(profile => ({
    username: profile.username
  }));
}

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