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

Question

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

Table

book/[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
    }
  };
}

utils/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 documentation 中所述，您可以使用 params 字段通过 getServerSideProps 的上下文访问路由参数。

params: If this page uses a dynamic route, params contains the route parameters. If the page name is [id].js, then params will look like { id: ... }.

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

或者，您也可以使用 query 字段来访问路由参数。区别在于 query 还将包含在 URL.

中传递的任何查询参数

export async function getServerSideProps(context) {
    const id = context.query.id // Get ID from slug `/book/1`
    // If routing to `/book/1?name=some-book`
    console.log(context.query) // Outputs: `{ id: '1', name: 'some-book' }`

    // ...
}

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

How to access route parameter inside getServerSideProps in Next.js?

javascript

next.js

supabase