¿Cómo puedo generar una página independiente de NextJS para cada documento de FaunaDB?

29 Jul, 2023 Programación 0

¿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/” muestra la misma vista (una lista de títulos). Creo que “getStaticPaths” está correctamente parametrizado, pero no creo que “getStaticProps” lo esté.</p> <pre><code>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 } } </code></pre> <p>Esta es la función de API “getPapers”.</p> <pre><code>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 }); } }; </code></pre> <div id='jp-relatedposts' class='jp-relatedposts' > </div> </article> <div class="like-btn"> <form id="like-it-form" action="https://es.davy.ai/wp-admin/admin-ajax.php" method="post"> <span class="like-it "> <i class="fa fa-thumbs-o-up"></i>0 </span> <input type="hidden" name="post_id" value="656877"/> <input type="hidden" name="action" value="like_it"/> </form> </div> <span class="tags"><strong>Tags: </strong><a href="https://es.davy.ai/tag/amazon-javascript-sdk/" rel="tag">AMAZON-JAVASCRIPT-SDK</a>, <a href="https://es.davy.ai/tag/faunadb/" rel="tag">FAUNADB</a>, <a href="https://es.davy.ai/tag/konvajs-reactjs/" rel="tag">KONVAJS-REACTJS</a>, <a href="https://es.davy.ai/tag/next-js/" rel="tag">NEXT.JS</a></span> <section id="comments"> <h4 id="comments-title"> Answer </h4> <ol class="commentlist"> <li class="comment even thread-even depth-1" id="li-comment-92082"> <article id="comment-92082"> <a href="https://davy.ai/author/davy-ai/"> <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" alt='Avatar for davy.ai' data-src='https://secure.gravatar.com/avatar/bf4d7168c7a9ebc19524b47cec601788?s=60&d=blank&r=g' data-srcset='https://secure.gravatar.com/avatar/bf4d7168c7a9ebc19524b47cec601788?s=120&d=blank&r=g 2x' class='avatar avatar-60 photo' height='60' width='60' decoding='async'/><noscript><img alt='Avatar for davy.ai' src='https://secure.gravatar.com/avatar/bf4d7168c7a9ebc19524b47cec601788?s=60&d=blank&r=g' srcset='https://secure.gravatar.com/avatar/bf4d7168c7a9ebc19524b47cec601788?s=120&d=blank&r=g 2x' class='avatar avatar-60 photo' height='60' width='60' decoding='async'/></noscript> </a> <div class="comment-meta"> <h5 class="author"> <cite class="fn"><a href="https://davy.ai/author/davy-ai/" class="url" rel="ugc external nofollow">davy.ai</a></cite> </h5> <p class="date"> <a href="https://es.davy.ai/como-puedo-generar-una-pagina-independiente-de-nextjs-para-cada-documento-de-faunadb/#comment-92082"> <time datetime="2023-07-29T01:23:54+00:00"> July 29, 2023 at 1:23 am </time> </a> </p> </div> <div class="comment-body"> <p>Para generar un título diferente en cada página dentro de un subdirectorio, debes modificar la función <code>getStaticProps</code> para extraer los datos correctos para cada página. Como la variable <code>paper</code> en el componente <code>Title</code> actualmente contiene todo el conjunto de datos, debe filtrarse para contener solo los datos de la página actual.</p> <p>Puedes lograr esto modificando la función <code>getStaticProps</code> para usar la variable <code>params</code>, que contiene los parámetros de ruta para la página actual. Luego, puedes extraer el parámetro <code>title</code> y filtrar la matriz <code>paper</code> para que solo contenga datos con títulos coincidentes.</p> <p>Aquí tienes un ejemplo de cómo podrías modificar la función <code>getStaticProps</code>:</p> <pre><code class="language-js">export async function getStaticProps({ params }) { const { title } = params; // Extraer el parámetro title const results = await fetch(`http://localhost:3000/api/getPapers/`).then( (res) => res.json() ); const paper = results.filter((paper) => paper.data.title === title); // Filtrar los datos para que solo contengan datos con el título coincidente return { props: { paper, }, }; } </code></pre> <p>Luego puedes modificar la función <code>getStaticPaths</code> para incluir el parámetro <code>title</code> en el objeto <code>params</code>:</p> <pre><code class="language-js">export async function getStaticPaths() { const papers = await fetch('http://localhost:3000/api/getPapers').then( (res) => res.json() ); const paths = papers.map((paper) => { return { params: { title: paper.data.title.toLowerCase().replace(/ /g, '-'), }, }; }); return { paths, fallback: false, }; } </code></pre> <p>Con estas modificaciones, el componente <code>Title</code> debería renderizar los datos correctos para cada página según el parámetro <code>title</code> en la ruta.</p> </div> </article> </li> </ol> <p class="nocomments">Comments are closed.</p> </section> </div>  </div> </div> </div>  <footer id='footer-wrapper'><div id="footer" class="container"> <div class="row"> <div class="span3"> </div> <div class="span3"> </div> <div class="span3"> </div> <div class="span3"> </div> </div> </div>   <div id="footer-bottom-wrapper"> <div id="footer-bottom" class="container"> <div class="row"> <div class="span6"> <p class="copyright"> Derechos de autor (c) 2023. Todos los derechos reservados. </p> </div> <div class="span6"> <ul class="social-nav clearfix"> </ul> </div> </div> </div> </div>  </footer>  <a href="#top" id="scroll-top"></a> <div style="display:none"> <div class="grofile-hash-map-bf4d7168c7a9ebc19524b47cec601788"> </div> </div> <script type="text/javascript" src="https://secure.gravatar.com/js/gprofiles.js?ver=202438" id="grofiles-cards-js"></script> <script type="text/javascript" id="wpgroho-js-extra"> /* <![CDATA[ */ var WPGroHo = {"my_hash":""}; /* ]]> */ </script> <script type="text/javascript" src="https://c0.wp.com/p/jetpack/13.8.1/modules/wpgroho.js" id="wpgroho-js"></script> <script data-optimized="1" type="text/javascript" src="https://es.davy.ai/wp-content/litespeed/js/c7ecf09c2722d7d1cf3bf65d6fc01b8a.js?ver=867ac" id="prettyphoto-js"></script> <script data-optimized="1" type="text/javascript" src="https://es.davy.ai/wp-content/litespeed/js/7e1ed43509f57ad019fe0a8e50b8169d.js?ver=1b612" id="jquery-easing-js"></script> <script data-optimized="1" type="text/javascript" src="https://es.davy.ai/wp-content/litespeed/js/436d9763218aa3991112674569772b2f.js?ver=ec59b" id="jquery-validation-js"></script> <script type="text/javascript" src="https://c0.wp.com/c/6.6.2/wp-includes/js/jquery/jquery.form.min.js" id="jquery-form-js"></script> <script data-optimized="1" type="text/javascript" src="https://es.davy.ai/wp-content/litespeed/js/5093d9ce74f74f7e02ed644e791ca81b.js?ver=054e0" id="liveSearch-js"></script> <script type="text/javascript" id="custom-js-extra"> /* <![CDATA[ */ var localized = {"nav_title":"Go to...","home_url":"https:\/\/es.davy.ai\/"}; /* ]]> */ </script> <script data-optimized="1" type="text/javascript" src="https://es.davy.ai/wp-content/litespeed/js/5da3a92f577a3e762ec35ea082c84b25.js?ver=f8fed" id="custom-js"></script> <script type="text/javascript" src="https://c0.wp.com/c/6.6.2/wp-includes/js/comment-reply.min.js" id="comment-reply-js" async="async" data-wp-strategy="async"></script> <script type="text/javascript" src="https://stats.wp.com/e-202438.js" id="jetpack-stats-js" data-wp-strategy="defer"></script> <script type="text/javascript" id="jetpack-stats-js-after"> /* <![CDATA[ */ _stq = window._stq || []; _stq.push([ "view", JSON.parse("{\"v\":\"ext\",\"blog\":\"219275372\",\"post\":\"656877\",\"tz\":\"0\",\"srv\":\"es.davy.ai\",\"j\":\"1:13.8.1\"}") ]); _stq.push([ "clickTrackerInit", "219275372", "656877" ]); /* ]]> */ </script> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script></body> </html>

¿Tienes una pregunta?

¿Cómo puedo generar una página independiente de NextJS para cada documento de FaunaDB?