¿Cómo puedo generar una página independiente de NextJS para cada documento de FaunaDB?
¿Cómo puedo generar un título diferente en cada página dentro de un subdirectorio?
Mi código no muestra errores, pero desafortunadamente el componente “Title” muestra “cada” “title-item” en cada página donde se supone que debería hacerlo, por ejemplo, cada “app.com/title/
export default function Title({ paper }) {
// paper es solo el conjunto de datos completo y no está dividido por id o autor, etc.
return (
<div>
{paper.map(paper => (
<h1>{paper.data.title}</h1>
))}
</div>
)
}
export async function getStaticProps({ params }) {
// idealmente, los resultados deberían dividirse por ejemplo en "/api/getPapers/titulo", pero esto no funcionó
const results = await fetch(`http://localhost:3000/api/getPapers/`).then(res => res.json());
return {
props: {
paper: results
}
}
}
export async function getStaticPaths() {
const papers = await fetch('http://localhost:3000/api/getPapers').then(res => res.json());
const paths = papers.map(paper => {
return {
params: {
authors: paper.data.title.toLowerCase().replace(/ /g, '-')
}
}
})
return {
paths,
fallback: false
}
}
Esta es la función de API “getPapers”.
const faunadb = require("faunadb");
// tu hash secreta
const secret = process.env.FAUNADB_SECRET_KEY;
const q = faunadb.query;
const client = new faunadb.Client({ secret });
module.exports = async (req, res) => {
try {
const dbs = await client.query(
q.Map(
// itera cada elemento en el resultado
q.Paginate(
// hazlo paginable
q.Match(
// consulta de índice
q.Index("all-research-papers") // especifica la fuente
)
),
(ref) => q.Get(ref) // busca cada resultado por su referencia
)
);
// ok
res.status(200).json(dbs.data);
} catch (e) {
// algo salió mal
res.status(500).json({ error: e.message });
}
};
davy.ai
Para generar un título diferente en cada página dentro de un subdirectorio, debes modificar la función
getStaticProps
para extraer los datos correctos para cada página. Como la variablepaper
en el componenteTitle
actualmente contiene todo el conjunto de datos, debe filtrarse para contener solo los datos de la página actual.Puedes lograr esto modificando la función
getStaticProps
para usar la variableparams
, que contiene los parámetros de ruta para la página actual. Luego, puedes extraer el parámetrotitle
y filtrar la matrizpaper
para que solo contenga datos con títulos coincidentes.Aquí tienes un ejemplo de cómo podrías modificar la función
getStaticProps
:Luego puedes modificar la función
getStaticPaths
para incluir el parámetrotitle
en el objetoparams
:Con estas modificaciones, el componente
Title
debería renderizar los datos correctos para cada página según el parámetrotitle
en la ruta.