¿Cómo puedo generar un título diferente en cada página dentro de un subdirectorio?
Mi código no arroja errores, pero desafortunadamente el componente Title muestra cada title-item en cada página que se supone que debe hacerlo, por ejemplo, cada app.com/title/<title> muestra la misma vista (una lista de títulos). Creo que getStaticPaths está correctamente parametrizado, pero no creo que getStaticProps lo esté.
export default function Title({ paper }) { // paper is just the entire dataset, and isn't split by id or author etc. return ( <div> {paper.map(paper => ( <h1>{paper.data.title}</h1> ))} </div> ) } export async function getStaticProps({ params }) { // ideally, results should be split down to eg `/api/getPapers/title`, but this didn't work 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 API de getPapers .
const faunadb = require("faunadb"); // your secret hash 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( // iterate each item in result q.Paginate( // make paginatable q.Match( // query index q.Index("all_research_papers") // specify source ) ), (ref) => q.Get(ref) // lookup each result by its reference ) ); // ok res.status(200).json(dbs.data); } catch (e) { // something went wrong res.status(500).json({ error: e.message }); } };Mis intentos de representar una página separada para cada documento carecían de una llamada API dinámica . Simplemente esperaba generar páginas dinámicas con una sola llamada API (documento por lotes).
Aquí hay una ruta de API dinámica típica llamada [index.js] :
const faunadb = require('faunadb') // your secret hash const secret = process.env.FAUNADB_SECRET_KEY const q = faunadb.query const client = new faunadb.Client({ secret }) export default async (req, res) => { const { query: { index }, } = req; try { const papers = await client.query( q.Get(q.Ref(q.Collection('<name of the collection>'), index)) ); res.status(200).json(papers.data); } catch (e) { res.status(500).json({ error: e.message }); } }; Una vez que sus datos se recuperan dinámicamente, puede configurar una ruta de página dinámica, por ejemplo, [id].js , que obtiene los datos usando useSWR .
const { data, error } = useSWR(`/api/getPapers/${id}`, fetcher);Esta es una función de búsqueda de ejemplo:
const fetcher = (url) => fetch(url).then((r) => r.json()); En mi caso, podría recuperar cualquier campo dado usando la llamada {data.<field>} .
Estás regresando authors en tu objeto Path. Deberá asegurarse de que el archivo de su página se nombre con los authors incluidos. Por ejemplo:
app_directory |- pages |- home.js |- title |- [authors].js Quizás donde dice authors en su objeto params , quiere decir title . En cuyo caso, cambie el nombre del objeto params y el nombre de archivo de la página.
const paths = papers.map(paper => { return { params: { title: paper.data.title.toLowerCase().replace(/ /g, '-') } } }) app_directory |- pages |- home.js |- title |- [title].js Aquí están los documentos para getStaticPaths() . https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation
EDITAR:
Dado que su función API devuelve la página de su consulta, la forma del resultado probablemente será
{ before: [/* before cursor */], after: [/* after cursor */], data: [ { /* paper Document */ }, { /* paper Document */ }, { /* paper Document */ }, ] } En cuyo caso, su código deberá mapearse sobre papers.data , no en papers en sí.
const paths = papers.data // select the data .map(paper => { return { params: { title: paper.data.title.toLowerCase().replace(/ /g, '-') } } })