<div>Buen día a todos, me genera el mismo problema comentado anteriormente, la API funciona sin problema en el puerto 8000 en la URL :<br>    <a href="http://localhost:8000/api/books" rel="nofollow noreferrer noopener" target="_blank">http://localhost:8000/api/books</a><br><br>Pero al intentar listar lis libros del lado del cleinte genera un error interno <br><br>En la terminal genera el siguiente error:<br>----<br>error - TypeError: fetch failed<br>    at Object.fetch (node:internal/deps/undici/undici:11118:11)<br>    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)<br>    at async getStaticProps (<a>webpack-internal:///./pages/libros/index.js:13:17</a>)<br>    at async Object.renderToHTML (/var/www/html/dev/Books/front-end/node_modules/next/dist/server/render.js:384:20)<br>    at async doRender (/var/www/html/dev/Books/front-end/node_modules/next/dist/server/base-server.js:708:34)<br>    at async cacheEntry.responseCache.get.isManualRevalidate.isManualRevalidate (/var/www/html/dev/Books/front-end/node_modules/next/dist/server/base-server.js:813:28)<br>    at async /var/www/html/dev/Books/front-end/node_modules/next/dist/server/response-cache/index.js:80:36 {<br>  cause: Error: connect ECONNREFUSED ::1:8000<br>      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1300:16) {<br>    errno: -111,<br>    code: 'ECONNREFUSED',<br>    syscall: 'connect',<br>    address: '::1',<br>    port: 8000<br>  },<br>  page: '/libros'<br>}<br><br>---<br>Y en el Navegador. el siguiente error, ya no pude continuar con el ejercicio.<br> </div>

<h1>Server Error</h1>

<div><strong>TypeError: fetch failed</strong></div>

<div>This error happened while generating the page. Any console logs will be displayed in the terminal window.</div>

<div>Source</div>

<div><br>pages/libros/index.js (4:16) @ async getStaticProps<br><br></div>

<pre>  2 | export async function getStaticProps(){
  3 | 
<strong>&gt;</strong> 4 | const res = await fetch('<a href="http://localhost:8000/api/books" rel="nofollow noreferrer noopener" target="_blank">http://localhost:8000/api/books</a>')
    |            <strong>^</strong>
  5 | 
  6 | const data = await res.json()</pre>

<div>Buen día a todos, me genera el mismo problema comentado anteriormente, la API funciona sin problema en el puerto 8000 en la URL :<br>&nbsp; &nbsp; http://localhost:8000/api/books<br><br>Pero al intentar listar lis libros del lado del cleinte genera un error interno&nbsp;<br><br>En la terminal genera el siguiente error:<br>----<br>error - TypeError: fetch failed<br>&nbsp; &nbsp; at Object.fetch (node:internal/deps/undici/undici:11118:11)<br>&nbsp; &nbsp; at process.processTicksAndRejections (node:internal/process/task_queues:95:5)<br>&nbsp; &nbsp; at async getStaticProps (webpack-internal:///./pages/libros/index.js:13:17)<br>&nbsp; &nbsp; at async Object.renderToHTML (/var/www/html/dev/Books/front-end/node_modules/next/dist/server/render.js:384:20)<br>&nbsp; &nbsp; at async doRender (/var/www/html/dev/Books/front-end/node_modules/next/dist/server/base-server.js:708:34)<br>&nbsp; &nbsp; at async cacheEntry.responseCache.get.isManualRevalidate.isManualRevalidate (/var/www/html/dev/Books/front-end/node_modules/next/dist/server/base-server.js:813:28)<br>&nbsp; &nbsp; at async /var/www/html/dev/Books/front-end/node_modules/next/dist/server/response-cache/index.js:80:36 {<br>&nbsp; cause: Error: connect ECONNREFUSED ::1:8000<br>&nbsp; &nbsp; &nbsp; at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1300:16) {<br>&nbsp; &nbsp; errno: -111,<br>&nbsp; &nbsp; code: 'ECONNREFUSED',<br>&nbsp; &nbsp; syscall: 'connect',<br>&nbsp; &nbsp; address: '::1',<br>&nbsp; &nbsp; port: 8000<br>&nbsp; },<br>&nbsp; page: '/libros'<br>}<br><br>---<br>Y en el Navegador. el siguiente error, ya no pude continuar con el ejercicio.<br>&nbsp;</div><h1>Server Error</h1><div><strong>TypeError: fetch failed</strong></div><div>This error happened while generating the page. Any console logs will be displayed in the terminal window.</div><div>Source</div><div><br>pages/libros/index.js (4:16) @ async getStaticProps<br><br></div><pre>  2 | export async function getStaticProps(){
  3 | 
<strong>&gt;</strong> 4 | const res = await fetch('http://localhost:8000/api/books')
    |            <strong>^</strong>
  5 | 
  6 | const data = await res.json()</pre>

<div>Buen día, respondiendo a la pregunta presentada anteriormente debo decir que fue el mismo Jorge quien me ayuda a resolver este dilema, y aca presento la solución o al menos como yo lo pude solucionar:<br><br>Este problema ocurre por la versión de node js, se debe verificar en la terminal que la versión de node ejecutando<br><br></div>

<div> # node -v</div>

<div><br></div>

<div>Si es la versión 18 entonces es el problema, debe intentarse cambiando a la versión 16 de node que es la que utilizo en el entrenamiento.</div>

<div><br></div>

<div>Aunque yo lo instale de forma diferente, se recomienda utilizar <strong>nvm</strong> para manejar las versiones de N<strong>ode.js</strong></div>

<div><br>Para <strong>MAC</strong> <a href="https://github.com/nvm-sh/nvm" rel="nofollow noreferrer noopener" target="_blank">https://github.com/nvm-sh/nvm</a></div>

<div><br></div>

<div>Para <strong>WINDOWS</strong> <a href="https://github.com/coreybutler/nvm-windows" rel="nofollow noreferrer noopener" target="_blank">https://github.com/coreybutler/nvm-windows</a><br><br>En mi caso especifico con <strong>LINUX</strong> lo realizamos de la siguiente manera desde la terminal:<br><br>Previo al proceso vamos a desinstalar la versión que tengamos, como es mi caso la version 18.x<br><br></div>

<div> # sudo apt remove nodejs </div>

<div><br>Si deseamos desinstalar la versión de NodeJs instalada por NVM, primero verificamos la versión actual de NodeJs instalada con el comando que se proporciona a continuación:<br><br></div>

<div># nvm current </div>

<div><br>Luego, ejecutamos la sintaxis que se proporciona a continuación para desinstalar cualquier versión específica de NodeJs instalada usando NVM en el sistema:<br><br></div>

<div># nvm uninstall [version-number]</div>

<div><br>Estoy desinstalando la versión actual de NodeJs, así que primero necesito deshabilitar NVM:<br><br></div>

<div># nvm deactivate </div>

<div><br><br>Ahora ejecuta el comando:<br><br></div>

<div># nvm uninstall 12.1.0 </div>

<div><br>Aunque siempre hay mas de una forma de hacer el proceso de instalación y configuración, vamos a continuar con el uso de los repositorios o bien como lo he realizado yo, empleando <strong>nvm<br><br> Primera forma: Instalar node desde repositorios.<br><br></strong>1: actualizamos los paquetes previamente instalados en el sistema:<br><br></div>

<div># sudo apt update </div>

<div><br>2. Instalar Node.js 16.x desde el sistema previamente actualizado desde el repositorio necesario:<br><br></div>

<div># curl -sL <a href="https://deb.nodesource.com/setup_16.x" rel="nofollow noreferrer noopener" target="_blank">https://deb.nodesource.com/setup_16.x</a> | sudo bash -</div>

<div>3. una vez agregado el repositorio, procedemos a la instalación de la versión 16.x<br><br></div>

<div># sudo apt -y install nodejs</div>

<div>4. Verificacmos la version instalada:</div>

<div># nove -v v16.18.1 # npm -v 8.19.2</div>

<div><br><br><strong>Seguna forma de instalar node 16.x usando NVM<br><br></strong>1. Instalamos NVM. ejecutando el siguiente comando:</div>

<div># curl -o- <a href="https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh" rel="nofollow noreferrer noopener" target="_blank">https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh</a> | bash</div>

<div><br>2. Cerramos y reabrimos la terminal para iniciar usando nvm mediante los siguientes comandos, uscando la version disponible de Node.Js</div>

<div># nvm ls-remote</div>

<div>3. Instalamos la versión 16</div>

<div># nvm install v16</div>

<div>4. Verificamos la instalacion :</div>

<div># nvm list </div>

<div>Ahora podremos continuar con nuestro entrenamiento funciona ahora la visualización de los datos de la Bd en el puerto 8000 de la API de Laravel desde el cliente en el puerto 3000 con Next.Js ; atentos saludos.</div>

<div>Buen día, respondiendo a la pregunta presentada anteriormente debo decir que fue el mismo Jorge quien me ayuda a resolver este dilema, y aca presento la solución o al menos como yo lo pude solucionar:<br><br>Este problema ocurre por la versión de node js, se debe verificar en la terminal que la versión de node ejecutando<br><br></div><div>&nbsp;# node -v</div><div><br></div><div>Si es la versión 18 entonces es el problema, debe intentarse cambiando a la versión 16 de node que es la que utilizo en el entrenamiento.</div><div><br></div><div>Aunque yo lo instale de forma diferente, se recomienda utilizar <strong>nvm</strong> para manejar las versiones de N<strong>ode.js</strong></div><div><br>Para <strong>MAC</strong> <a href="https://github.com/nvm-sh/nvm">https://github.com/nvm-sh/nvm</a></div><div><br></div><div>Para <strong>WINDOWS</strong> <a href="https://github.com/coreybutler/nvm-windows">https://github.com/coreybutler/nvm-windows</a><br><br>En mi caso especifico con <strong>LINUX</strong> lo realizamos de la siguiente manera desde la terminal:<br><br>Previo al proceso vamos a desinstalar la versión que tengamos, como es mi caso la version 18.x<br><br></div><div>&nbsp;# sudo apt remove nodejs&nbsp;</div><div><br>Si deseamos desinstalar la versión de NodeJs instalada por NVM, primero verificamos la versión actual de NodeJs instalada con el comando que se proporciona a continuación:<br><br></div><div># nvm current&nbsp;</div><div><br>Luego, ejecutamos la sintaxis que se proporciona a continuación para desinstalar cualquier versión específica de NodeJs instalada usando NVM en el sistema:<br><br></div><div># nvm uninstall [version-number]</div><div><br>Estoy desinstalando la versión actual de NodeJs, así que primero necesito deshabilitar NVM:<br><br></div><div># nvm deactivate&nbsp;</div><div><br><br>Ahora ejecuta el comando:<br><br></div><div># nvm uninstall 12.1.0&nbsp;</div><div><br>Aunque siempre hay mas de una forma de hacer el proceso de instalación y configuración, vamos a continuar con el uso de los repositorios o bien como lo he realizado yo, empleando <strong>nvm<br><br>&nbsp;Primera forma: Instalar node desde repositorios.<br><br></strong>1: actualizamos los paquetes previamente instalados en el sistema:<br><br></div><div># sudo apt update&nbsp;</div><div><br>2. Instalar Node.js 16.x desde el sistema previamente actualizado desde el repositorio necesario:<br><br></div><div># curl -sL <a href="https://deb.nodesource.com/setup_16.x">https://deb.nodesource.com/setup_16.x</a> | sudo bash -</div><div>3. una vez agregado el repositorio, procedemos a la instalación de la versión 16.x<br><br></div><div># sudo apt -y install nodejs</div><div>4. Verificacmos la version instalada:</div><div># nove -v v16.18.1 # npm -v 8.19.2</div><div><br><br><strong>Seguna forma de instalar node 16.x usando NVM<br><br></strong>1. Instalamos NVM. ejecutando el siguiente comando:</div><div># curl -o- <a href="https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh">https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh</a> | bash</div><div><br>2. Cerramos y reabrimos la terminal para iniciar usando nvm mediante los siguientes comandos, uscando la version disponible de Node.Js</div><div># nvm ls-remote</div><div>3. Instalamos la versión 16</div><div># nvm install v16</div><div>4. Verificamos la instalacion :</div><div># nvm list&nbsp;</div><div>Ahora podremos continuar con nuestro entrenamiento funciona ahora la visualización de los datos de la Bd en el puerto 8000 de la API de Laravel desde el cliente en el puerto 3000 con Next.Js ; atentos saludos.</div>

Álvaro

<div>Hola a todos...<br>Alguien tiene el problema de realizar la consulta a la API mediante ...<br>const res =<em> await</em> fetch('<a href="http://localhost:8000/api/books" rel="nofollow noreferrer noopener" target="_blank">http://localhost:8000/api/books</a>')<br><span>﻿</span><div><div><span>Remove</span></div><div><span><span>Captura de pantalla 2022-11-05 a las 13.34.33.png</span><span>306.27 KB</span></span></div></div><span>﻿</span>Alguien puede indicarme que puede sucederme, sigo los pasos que indica Jorge...<br>Saludos<br>Álvaro</div>

<div>Hola a todos...<br><br>Alguien tiene el problema de realizar la consulta a la API mediante ...<br><br>const res =<em> await</em> fetch('http://localhost:8000/api/books')<br><span data-trix-cursor-target="left" data-trix-serialize="false">﻿</span><figure contenteditable="false" data-trix-attachment="{&quot;contentType&quot;:&quot;image/png&quot;,&quot;filename&quot;:&quot;Captura de pantalla 2022-11-05 a las 13.34.33.png&quot;,&quot;filesize&quot;:313617,&quot;height&quot;:888,&quot;width&quot;:2522}" data-trix-content-type="image/png" data-trix-id="63629" data-trix-attributes="{&quot;presentation&quot;:&quot;gallery&quot;}" data-trix-serialize="false" class="attachment attachment--preview attachment--png" data-trix-mutable="true"><img src="blob:https://aprendible.com/7df96fc5-65d5-4b20-aa7a-1debf5d57871" data-trix-mutable="true" data-trix-serialized-attributes="{}" width="2522" height="888" data-trix-store-key="imageElement/63629/blob:https://aprendible.com/7df96fc5-65d5-4b20-aa7a-1debf5d57871/2522/888"><figcaption class="attachment__caption attachment__caption--editing" data-trix-placeholder="Add a caption…"><textarea placeholder="Add a caption…" data-trix-mutable="true" class="attachment__caption-editor" style="height: 40px;"></textarea><textarea placeholder="Add a caption…" data-trix-mutable="true" class="attachment__caption-editor trix-autoresize-clone" tabindex="-1"></textarea></figcaption><figcaption class="attachment__caption" data-trix-placeholder="Add a caption…" style="display: none;"></figcaption><progress class="attachment__progress" value="0" max="100" data-trix-mutable="true" data-trix-store-key="progressElement/63629"></progress><div data-trix-mutable="true" class="attachment__toolbar"><div class="trix-button-row"><span class="trix-button-group trix-button-group--actions"><button title="Remove" data-trix-action="remove" class="trix-button trix-button--remove">Remove</button></span></div><div class="attachment__metadata-container"><span class="attachment__metadata"><span title="Captura de pantalla 2022-11-05 a las 13.34.33.png" class="attachment__name">Captura de pantalla 2022-11-05 a las 13.34.33.png</span><span class="attachment__size">306.27 KB</span></span></div></div></figure><span data-trix-cursor-target="right" data-trix-serialize="false">﻿</span>Alguien puede indicarme que puede sucederme, sigo los pasos que indica Jorge...<br><br>Saludos<br><br>Álvaro</div>

Entrenamiento Full-Stack con Laravel y NextJS