https://github.com/urian121/consumir-api-listar-publicaciones-y-ver-detalles-con-nextjs

Proyecto te enseña a consumir una API utilizando Next.js para listar publicaciones y mostrar los detalles de cada una. Implementa rutas dinámicas para navegar entre la lista de posts y sus detalles. Además, aprenderás a manejar el estado de los datos y optimizar la carga de información desde el servidor.
https://github.com/urian121/consumir-api-listar-publicaciones-y-ver-detalles-con-nextjs

api-con-next api-nextjs con nextjs nextjs14 nextjs15 post post-con-nextjs react reactjs

Last synced: 6 months ago
JSON representation

Proyecto te enseña a consumir una API utilizando Next.js para listar publicaciones y mostrar los detalles de cada una. Implementa rutas dinámicas para navegar entre la lista de posts y sus detalles. Además, aprenderás a manejar el estado de los datos y optimizar la carga de información desde el servidor.

• Host: GitHub
• URL: https://github.com/urian121/consumir-api-listar-publicaciones-y-ver-detalles-con-nextjs
• Owner: urian121
• Created: 2024-09-16T19:24:19.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2025-02-19T16:34:49.000Z (8 months ago)
• Last Synced: 2025-03-31T12:19:58.120Z (7 months ago)
• Topics: api-con-next, api-nextjs, con, nextjs, nextjs14, nextjs15, post, post-con-nextjs, react, reactjs
• Language: JavaScript
• Homepage:
• Size: 309 KB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Domina la forma de consumir API, listar publicaciones y ver detalles con Next.js

#### Descripción

Este proyecto te enseña a consumir una API utilizando Next.js para listar publicaciones y mostrar los detalles de cada una. Implementa rutas dinámicas para navegar entre la lista de posts y sus detalles. Además, aprenderás a manejar el estado de los datos y optimizar la carga de información desde el servidor.

#### Resultado final

![](https://raw.githubusercontent.com/urian121/imagenes-proyectos-github/master/api-rutas-post-con-nextjs.gif)

![](https://raw.githubusercontent.com/urian121/imagenes-proyectos-github/master/lista-posts-con-nextjs.png)

#### Detalles del Post y sus Comentarios

![](https://raw.githubusercontent.com/urian121/imagenes-proyectos-github/master/detalles-del-post-nextjs.png)

#### Características principales

- Consumo de API RESTful para obtener publicaciones.

- Listado de posts.

- Visualización detallada de cada publicación mediante rutas dinámicas.

- Optimización de la carga de datos desde el servidor.

- Manejo de errores y estados de carga (loading/spinner).

#### Instalar Bootstrap 5 en NextJS

    https://www.youtube.com/watch?v=yzNCrBOqvto

    https://github.com/urian121/guia-completa-para-integrar-Bootstrap5-en-Nextjs14

#### Instalar las dependencias

    npm install

#### Ejecuta la aplicación en modo desarrollo

    npm run dev

#### Visitar

    

    http://localhost:3000

##### Nota

En Next.js, una carpeta con nombre entre corchetes, como [id], define una ruta dinámica. Esto permite que el nombre de la URL se convierta en un parámetro, por ejemplo, /posts/1 donde id es el valor dinámico (1)

### Expresiones de Gratitud 🎁

    Comenta a otros sobre este proyecto 📢

    Invita una cerveza 🍺 o un café ☕

    Paypal iamdeveloper86@gmail.com

    Da las gracias públicamente 🤓.

## No olvides SUSCRIBIRTE 👍