Next.js中如何在getServerSideProps内获取路由参数

我们需要实现Next.js通过动态路由slug中的ID查询Supabase数据表，访问路径如localhost:3000/book/1时，页面展示对应ID的书籍信息。

• 替换getServerSideProps中硬编码的ID，改为从context.query中读取路由传递的ID参数
• 移除不必要的JSON.stringify转换，直接传递JS对象到页面组件
• 增加ID合法性校验、页面加载状态、404页面返回逻辑，优化异常场景处理

1. 动态路由页面 pages/book/[id].js #

import { useRouter } from 'next/router'
import { getBook } from '@/utils/supabase-client';

export default function Book({ book }) {
  const router = useRouter()
  // 处理路由未就绪的加载状态
  if (router.isFallback) {
    return <div>加载中...</div>
  }

  return <div>
    <p>书籍ID: {book.id}</p>
    <h1>书籍名称: {book.name}</h1>
  </div>
}

export async function getServerSideProps(context) {
  // 从路由参数中获取ID
  const { id } = context.query
  const bookList = await getBook(id);
  // Supabase查询返回的是数组，取第一个元素即为目标书籍
  const book = bookList[0] || {}

  // 无匹配数据时返回404
  if (!book.id) {
    return {
      notFound: true
    }
  }

  return {
    props: {
      book
    }
  };
}

2. Supabase工具文件 utils/supabase-client.js #

// 需先导入Supabase客户端并完成初始化
import { createClient } from '@supabase/supabase-js'

const supabaseUrl = '替换为你的Supabase项目URL'
const supabaseAnonKey = '替换为你的Supabase项目公开anon密钥'
const supabase = createClient(supabaseUrl, supabaseAnonKey)

export const getBook = async (id) => {
  const bookId = parseInt(id);
  // 校验ID合法性，避免非法参数查询
  if (isNaN(bookId)) {
    return []
  }
  
  const { data, error } = await supabase
    .from('books')
    .select('id, name')
    .eq('id', bookId)

  if (error) {
    console.log(error.message);
    throw error;
  }

  return data || [];
};

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