Next.js 13 TypeError问题：跟随Supabase教程取数失败求助

问题场景 #

通过egghead教程学习Next.js开发，卡在第4课从Supabase数据库读取数据环节。怀疑是Next.js 13版本变更导致问题，已将Home改为箭头函数组件，但仍无法正常运行。

现有代码 #

import { supabase } from '../utils/supabase'

const Home = ({lessons}) => {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center py-2">
      {lessons.map( lesson => (
        <p key={lesson.id}>{lesson.title}</p>
      ))}
    </div>
  )
}

export default Home;

export const getStaticProps = async () => {
  const { data: lessons } = await supabase.from('lesson').select('*')

  return { props: { lessons } }
}

报错信息 #

浏览器报错：

Error: Failed to fetch update manifest Internal Server Error at http://localhost:3000/_next/static/chunks/webpack.js?ts=1668894571923:1188:37

终端报错：

TypeError: Cannot read properties of null (reading 'length') at eval (webpack-internal:///./node_modules/next/dist/client/dev/error-overlay/hot-dev-client.js:262:55)

适配Next.js 13的修改步骤 #

1. 处理Supabase查询空数据的情况 #

Supabase查询返回的data可能为null（比如表无数据、权限配置错误），直接调用map会引发报错。需给lessons设置默认空数组：

修改getStaticProps：

export const getStaticProps = async () => {
  // 给data设置默认空数组，避免返回null
  const { data: lessons = [] } = await supabase.from('lesson').select('*')
  return { props: { lessons } }
}

或在组件中添加可选链判断：

{lessons?.map( lesson => (
  <p key={lesson.id}>{lesson.title}</p>
))}

2. 区分Pages Router与App Router写法 #

Next.js 13默认启用App Router（app/目录），原教程的getStaticProps是Pages Router（pages/目录）的写法，两者不兼容：

若使用App Router（推荐）：

将组件移至app/page.js，直接在组件内编写异步查询逻辑（App Router默认组件为Server Component，支持顶层await）：

import { supabase } from '../utils/supabase'

// 注意：App Router的页面组件需为async函数
export default async function Home() {
  const { data: lessons = [] } = await supabase.from('lesson').select('*')
  return (
    <div className="flex min-h-screen flex-col items-center justify-center py-2">
      {lessons.map(lesson => (
        <p key={lesson.id}>{lesson.title}</p>
      ))}
    </div>
  )
}

若坚持使用Pages Router：

确保组件在pages/目录下，Next.js 13仍兼容Pages Router，但需检查项目配置是否未禁用Pages Router。

3. 修复热更新报错 #

终端的Cannot read properties of null (reading 'length')是开发环境热更新缓存问题，可通过以下步骤解决：

• 删除项目根目录下的.next文件夹
• 删除node_modules/.cache目录
• 重启Next.js开发服务器
• 检查utils/supabase.js的初始化配置是否正确（确认Supabase URL、匿名密钥已在环境变量中配置）

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