0
223
Vistas¿Cómo acceder al parámetro de ruta dentro de getServerSideProps en Next.js?
Quiero consultar mi tabla Supabase usando la ID en el slug, por ejemplo, localhost:3000/book/1 luego mostrar información sobre ese libro en la página en Next.js.
Mesa
libro/[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 || []; };1 Respuestas
Responde la pregunta0
Como se describe en la documentación de getServerSideProps , puede acceder a los parámetros de la ruta a través del contexto de getServerSideProps , usando el campo params .
params: si esta página usa una ruta dinámica ,paramscontiene los parámetros de la ruta. Si el nombre de la página es[id].js, entonces losparamsse verán como{ id: ... }.
export async function getServerSideProps(context) { const id = context.params.id // Get ID from slug `/book/1` // Rest of `getServerSideProps` code } Alternativamente, también puede usar el campo de query para acceder a los parámetros de la ruta. La diferencia es que la query también contendrá cualquier parámetro de consulta pasado en la 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' }` // ... }