用 Next.js 和 Supabase 进行“全栈”开发的入门

import { createClient } from '@supabase/supabase-js'
 
// 使用你的 Supabase URL 和 ACCESS_KEY
const supabase = createClient('你的SupabaseURL', '你的ACCESS_KEY')
 
// 在 Next.js 的 getServerSideProps 中使用 Supabase
export async function getServerSideProps(context) {
  try {
    const { data, error } = await supabase
      .from('你的表名')
      .select('*')
 
    if (error) {
      throw error
    }
 
    return {
      props: {
        data: data || [] // 如果没有数据，返回空数组
      }
    }
  } catch (error) {
    return {
      props: {
        error: error.message
      }
    }
  }
}
 
// 在 Next.js 页面中使用获取的数据
export default function Home({ data, error }) {
  if (error) {
    return <div>Error: {error}</div>
  }
 
  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li> // 假设你的表有 id 和 name 字段
      ))}
    </ul>
  )
}

这个代码示例展示了如何在 Next.js 的服务器端获取 Supabase 数据库中的数据，并将其作为 props 传递到页面组件中。同时，展示了错误处理和条件渲染的实践。