Next.js App Router中Supabase结合动态路由的SSR实现疑问

1. 服务端渲染（SSR）场景下传递URL中的ID，采用app/books/[id]/page.tsx的路由结构是否正确？ #

完全正确。App Router中动态路由的标准写法就是用方括号[]包裹参数名，这个结构可以匹配/books/123、/books/abc这类带ID的URL，且Server Component默认采用SSR渲染，完全契合你的需求。

2. 如何从URL中获取ID并在Server Component中使用？ #

App Router已废弃getServerSideProps，动态路由参数会直接通过params属性传递给Server Component的Page组件，直接解构即可获取：

修改后的完整代码示例：

export default async function Page({
  params,
}: {
  params: { id: string };
}) {
  // 从动态路由参数中获取图书ID
  const bookId = params.id;
  console.log(bookId);

  const supabase = createClient();
  // 使用动态ID查询Supabase
  const { data, error } = await supabase
    .from("book")
    .select()
    .eq("id", bookId);

  // 错误处理示例
  if (error) {
    return <div>获取图书数据失败：{error.message}</div>;
  }

  return (
    <>
      <div className="bg-black md:p-5 md:flex">
        <div className="aspect-w-16 aspect-h-9 w-full md:w-8/12">
          <Youtube />
        </div>
        <div className="w-full md:w-4/12 p-5">
          {data?.length ? (
            <div>图书标题：{data[0].title}</div>
          ) : (
            <div>未找到对应图书</div>
          )}
        </div>
      </div>
    </>
  );
}

3. 如何在此处使用Supabase数据库的类型定义？ #

通过Supabase CLI生成数据库的类型定义文件，再在组件中导入使用，步骤如下：

1. 安装Supabase CLI并完成登录
2. 运行命令生成类型文件（路径可自定义）：

supabase gen types typescript --project-id <你的Supabase项目ID> --schema public > types/supabase.ts

3. 在组件中导入类型并绑定到Supabase客户端：

修改后的代码片段：

// 导入生成的数据库类型
import type { Database } from '@/types/supabase';

// 给Supabase客户端指定类型
const supabase = createClient<Database>();

// 查询时自动获得类型提示
const { data, error } = await supabase
  .from("book")
  .select()
  .eq("id", bookId);

// 给查询结果指定精准类型，获得更友好的IDE提示
const books = data as Database['public']['Tables']['book']['Row'][];

这样就能在编写代码时获得完整的类型提示，避免字段拼写错误，明确数据结构。

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