javascript - 如何在 Next.js 中访问 getServerSideProps 中的路由参数？

Question

我想使用 slug 中的 ID 查询我的 Supabase 表，例如localhost:3000/book/1然后在 Next.js 的页面上显示有关该书的信息。

桌子

书/[id].js

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

export default function Book({bookJson}) {
  const router = useRouter()
  const { id } = router.query
  
  return <div>
    <p>Book: {id}</p>
    <h1>{bookJson}</h1>
  </div>
}

export async function getServerSideProps(query) {
  const id = 1 // Get ID from slug
  const book = await getBook(id);
  const bookJson = JSON.stringify(book)

  return {
    props: {
      bookJson
    }
  };
}

实用程序/supabase-client.js

export const getBook = async (id) => {
  const bookString = id
  let bookId = parseInt(bookString);
  
  const { data, error } = await supabase
    .from('books')
    .select('id, name')
    .eq('id', bookId)

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

  return data || [];
};

Answer 1

如getServerSideProps文档getServerSideProps中所述，您可以使用该字段通过 的上下文访问路由参数params。

params：如果此页面使用动态路由，params则包含路由参数。如果页面名称是[id].js，那么params会是什么样子{ id: ... }。要了解更多信息，请查看动态路由文档。

export async function getServerSideProps(context) {
    const id = context.params.id // Get ID from slug `/book/1`
    
    // Rest of `getServerSideProps` code
}