Skip to content

Commit ed17ae8

Browse files
author
codeporx
committed
'xd'
1 parent e932865 commit ed17ae8

File tree

5 files changed

+328
-6
lines changed

5 files changed

+328
-6
lines changed

‎app/tag-data.json‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
{
2-
"git": 2,
2+
"nextjs": 3,
3+
"desarrollo-web": 3,
4+
"rutas": 1,
5+
"tutorial": 1,
6+
"seo": 3,
7+
"git": 1,
38
"github": 1,
49
"open-source": 1,
510
"contribuciones": 1,
611
"ngrok": 1,
7-
"desarrollo-web": 1,
812
"pruebas-web": 1,
913
"google": 1,
1014
"search-console": 1,
11-
"seo": 2,
1215
"dominios": 1,
1316
"vercel": 1,
1417
"hostinger": 1

‎data/blog/como-consumir-apis-en-nextjs-con-fetch-y-axios.mdx‎

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
---
2+
title: 'Cómo consumir APIs en Next.js con Fetch y Axios'
3+
date: '2025-01-25'
4+
tags: ['nextjs', 'apis', 'fetch', 'axios']
5+
draft: false
6+
summary: 'Aprende cómo consumir APIs en Next.js usando Fetch y Axios con ejemplos prácticos. Descubre las ventajas de cada método para integrar datos en tus aplicaciones.'
7+
authors: ['default']
8+
---
9+
10+
## Introducción
11+
12+
Consumir APIs es una tarea esencial en el desarrollo de aplicaciones web modernas. En **Next.js**, puedes integrar datos fácilmente en tus aplicaciones utilizando herramientas como **Fetch** o **Axios**. En este artículo, te mostraré cómo hacerlo con ejemplos claros usando la API de prueba [JSONPlaceholder](https://jsonplaceholder.typicode.com).
13+
14+
JSONPlaceholder es una API gratuita que proporciona datos de ejemplo, como publicaciones, comentarios y usuarios, ideal para aprender a manejar peticiones HTTP.
15+
16+
---
17+
18+
## ¿Qué aprenderás?
19+
20+
- Cómo consumir APIs en Next.js con **Fetch**.
21+
- Cómo consumir APIs en Next.js con **Axios**.
22+
- Cuándo utilizar cada método según tus necesidades.
23+
24+
---
25+
26+
## Consumir una API con Fetch en Next.js
27+
28+
Fetch es una API nativa de JavaScript que permite realizar solicitudes HTTP. Es ligera, no requiere instalación y es ideal para la mayoría de los casos.
29+
30+
### Ejemplo con Fetch
31+
32+
```typescript
33+
"use client";
34+
35+
import { useState, useEffect } from "react";
36+
37+
interface Post {
38+
id: number;
39+
title: string;
40+
body: string;
41+
}
42+
43+
export default function FetchExample() {
44+
const [posts, setPosts] = useState<Post[]>([]);
45+
const [loading, setLoading] = useState(true);
46+
const [error, setError] = useState("");
47+
48+
useEffect(() => {
49+
const fetchPosts = async () => {
50+
try {
51+
const response = await fetch("https://jsonplaceholder.typicode.com/posts");
52+
if (!response.ok) {
53+
throw new Error("Error en la respuesta de la red");
54+
}
55+
const data = await response.json();
56+
setPosts(data.slice(0, 5)); // Obtener solo los primeros 5 posts
57+
} catch (err) {
58+
setError("Error al cargar los posts");
59+
} finally {
60+
setLoading(false);
61+
}
62+
};
63+
64+
fetchPosts();
65+
}, []);
66+
67+
if (loading) return <div>Cargando...</div>;
68+
if (error) return <div>{error}</div>;
69+
70+
return (
71+
<div>
72+
<h2 className="text-2xl font-bold mb-4">Posts (Fetch)</h2>
73+
<ul>
74+
{posts.map((post) => (
75+
<li key={post.id} className="mb-2">
76+
<h3 className="font-semibold">{post.title}</h3>
77+
<p>{post.body}</p>
78+
</li>
79+
))}
80+
</ul>
81+
</div>
82+
);
83+
}
84+
```
85+
86+
### Ventajas de Fetch
87+
88+
1. **Integrado en el navegador:** No necesitas instalar dependencias adicionales.
89+
2. **Ligero y fácil de usar:** Ideal para solicitudes simples.
90+
3. **Compatible con Next.js:** Puedes usarlo tanto en el cliente como en el servidor.
91+
92+
---
93+
94+
## Consumir una API con Axios en Next.js
95+
96+
**Axios** es una biblioteca externa para realizar solicitudes HTTP. Es conocida por su sintaxis más amigable y características avanzadas, como interceptores y cancelación de solicitudes.
97+
98+
### Instalación
99+
100+
Para usar Axios, primero debes instalarlo en tu proyecto:
101+
102+
```bash
103+
npm install axios
104+
```
105+
106+
### Ejemplo con Axios
107+
108+
```typescript
109+
"use client";
110+
111+
import { useState, useEffect } from "react";
112+
import axios from "axios";
113+
114+
interface Post {
115+
id: number;
116+
title: string;
117+
body: string;
118+
}
119+
120+
export default function AxiosExample() {
121+
const [posts, setPosts] = useState<Post[]>([]);
122+
const [loading, setLoading] = useState(true);
123+
const [error, setError] = useState("");
124+
125+
useEffect(() => {
126+
const fetchPosts = async () => {
127+
try {
128+
const response = await axios.get<Post[]>("https://jsonplaceholder.typicode.com/posts");
129+
setPosts(response.data.slice(0, 5)); // Obtener solo los primeros 5 posts
130+
} catch (err) {
131+
setError("Error al cargar los posts");
132+
} finally {
133+
setLoading(false);
134+
}
135+
};
136+
137+
fetchPosts();
138+
}, []);
139+
140+
if (loading) return <div>Cargando...</div>;
141+
if (error) return <div>{error}</div>;
142+
143+
return (
144+
<div>
145+
<h2 className="text-2xl font-bold mb-4">Posts (Axios)</h2>
146+
<ul>
147+
{posts.map((post) => (
148+
<li key={post.id} className="mb-2">
149+
<h3 className="font-semibold">{post.title}</h3>
150+
<p>{post.body}</p>
151+
</li>
152+
))}
153+
</ul>
154+
</div>
155+
);
156+
}
157+
```
158+
159+
### Ventajas de Axios
160+
161+
1. **Interfaz simplificada:** Sintaxis más intuitiva para configurar solicitudes.
162+
2. **Funciones avanzadas:** Soporte para interceptores, transformación de datos y más.
163+
3. **Soporte para JSON automáticamente:** Convierte respuestas en JSON sin necesidad de llamarlo manualmente.
164+
165+
---
166+
167+
## Comparación: ¿Fetch o Axios?
168+
169+
| Característica | Fetch | Axios |
170+
| ------------------- | ----------------------------------- | ------------------------------------ |
171+
| Instalación | Nativa (sin instalación) | Requiere instalación |
172+
| Sintaxis | Más código en solicitudes complejas | Más amigable y limpia |
173+
| Funciones avanzadas | Limitadas | Interceptores, cancelación, etc. |
174+
| Compatibilidad | Nativo en navegadores modernos | Compatible con Node.js y navegadores |
175+
176+
![ejemplo final](https://res.cloudinary.com/dq0pfesxe/image/upload/v1737831559/Captura_de_pantalla_2025-01-25_195138_akmmud.png)
177+
178+
### ¿Cuál usar?
179+
180+
- **Usa Fetch** si prefieres evitar dependencias externas y necesitas una solución ligera.
181+
- **Usa Axios** si trabajas con solicitudes complejas o necesitas características avanzadas como interceptores.
182+
183+
---
184+
185+
## Preguntas frecuentes (FAQs)
186+
187+
### 1. ¿Axios es más rápido que Fetch?
188+
189+
No necesariamente. El rendimiento depende del caso de uso, pero la diferencia es mínima. La principal ventaja de Axios radica en su facilidad de uso y características avanzadas.
190+
191+
### 2. ¿Cuál es mejor para manejar errores, Fetch o Axios?
192+
193+
Axios tiene una mejor gestión de errores, ya que arroja excepciones automáticamente para códigos de estado fuera del rango 2xx. Con Fetch, necesitas manejar esto manualmente.
194+
195+
---
196+
197+
Espero que este artículo te haya ayudado a entender cómo consumir APIs en Next.js utilizando Fetch y Axios. Si tienes dudas o comentarios, ¡déjalos abajo!

‎data/blog/como-crear-api-en-nextjs.mdx‎

Lines changed: 122 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,129 @@
11
---
2-
title: 'Como crear api en nextjs y consumirla'
2+
title: 'Como Crear una API Simple en Next.js con el App Router'
33
date: '2025-01-22'
44
tags: ['nextjs', 'desarrollo web']
55
draft: false
66
summary: 'Descubre qué es Next.js, por qué es una herramienta poderosa para el desarrollo web, y cómo empezar a usarlo para crear aplicaciones modernas y escalables.'
77
authors: ['default']
88
---
9+
10+
## Introducción
11+
12+
Next.js es un poderoso framework que combina lo mejor del frontend y backend en un solo lugar. En este artículo, aprenderás a crear una API simple utilizando el App Router de Next.js. Construiremos una API que manejará solicitudes GET y POST para gestionar una lista de usuarios.
13+
![crear api en nextjs con node](https://res.cloudinary.com/dq0pfesxe/image/upload/v1737826949/node_h0tztg.png)
14+
15+
## Creando la API
16+
17+
Para comenzar, crea un archivo `route.ts` en la carpeta `app/api/users/`. Este archivo manejará las solicitudes GET y POST a la ruta `/api/users`.
18+
19+
```typescript
20+
import { NextResponse } from 'next/server'
21+
22+
// Simulación de una base de datos de usuarios
23+
const users = [
24+
{ id: 1, name: 'Alice Johnson' },
25+
{ id: 2, name: 'Bob Smith' },
26+
{ id: 3, name: 'Charlie Brown' },
27+
]
28+
29+
export async function GET() {
30+
return NextResponse.json(users)
31+
}
32+
33+
export async function POST(request: Request) {
34+
const newUser = await request.json()
35+
36+
// Simular la adición de un nuevo usuario
37+
const id = users.length + 1
38+
users.push({ id, ...newUser })
39+
40+
return NextResponse.json({ message: 'User created', user: { id, ...newUser } }, { status: 201 })
41+
}
42+
```
43+
44+
### Detalles:
45+
46+
- La función `GET` devuelve la lista de usuarios.
47+
- La función `POST` agrega un nuevo usuario a la lista.
48+
49+
## Creando la Interfaz de Usuario
50+
51+
En la página principal (`app/page.tsx`), crearemos un componente React para interactuar con la API.
52+
53+
```tsx
54+
import { useState, useEffect } from 'react'
55+
56+
export default function Add() {
57+
const [users, setUsers] = useState([])
58+
const [newUserName, setNewUserName] = useState('')
59+
60+
// Utiliza useEffect para obtener la lista de usuarios cuando el componente se monta.
61+
useEffect(() => {
62+
fetchUsers()
63+
}, [])
64+
65+
// Función para obtener la lista de usuarios desde la API.
66+
const fetchUsers = async () => {
67+
const response = await fetch('/api/users')
68+
const data = await response.json()
69+
setUsers(data)
70+
}
71+
72+
// Función para manejar el envío del formulario.
73+
const handleSubmit = async (e: React.FormEvent) => {
74+
e.preventDefault()
75+
const response = await fetch('/api/users', {
76+
method: 'POST',
77+
headers: {
78+
'Content-Type': 'application/json',
79+
},
80+
body: JSON.stringify({ name: newUserName }),
81+
})
82+
const data = await response.json()
83+
console.log(data)
84+
setNewUserName('')
85+
fetchUsers()
86+
}
87+
88+
return (
89+
<div className="p-4">
90+
<h1 className="mb-4 text-2xl font-bold">Users</h1>
91+
<ul className="mb-4">
92+
{users.map((user: { id: number; name: string }) => (
93+
<li key={user.id}>{user.name}</li>
94+
))}
95+
</ul>
96+
<form onSubmit={handleSubmit} className="flex gap-2">
97+
<input
98+
type="text"
99+
value={newUserName}
100+
onChange={(e) => setNewUserName(e.target.value)}
101+
placeholder="Enter new user name"
102+
className="rounded border p-2"
103+
/>
104+
<button type="submit" className="rounded bg-blue-500 p-2 text-white">
105+
Add User
106+
</button>
107+
</form>
108+
</div>
109+
)
110+
}
111+
```
112+
113+
### Detalles:
114+
115+
- **Carga Inicial**: Usamos `fetch` en `useEffect` para obtener los usuarios al cargar la página.
116+
- **Formulario**: Creamos un formulario que envía una solicitud POST a la API para agregar un nuevo usuario.
117+
118+
## Probando la API
119+
120+
Puedes probar la API y la interfaz de usuario de las siguientes maneras:
121+
122+
1. **Interfaz Web**: Visita `http://localhost:3000` para ver la lista de usuarios y agregar nuevos usuarios mediante el formulario.
123+
2. **GET a la API**: Haz una solicitud GET a `http://localhost:3000/api/users` para obtener la lista de usuarios en formato JSON.
124+
3. **POST a la API**: Envía una solicitud POST a `http://localhost:3000/api/users` con un cuerpo JSON como `{ "name": "Nuevo Usuario" }` para agregar un nuevo usuario.
125+
![api](https://res.cloudinary.com/dq0pfesxe/image/upload/v1737825823/blog_hgdkt2.png)
126+
127+
## Conclusión
128+
129+
Next.js facilita la creación de APIs junto con tu aplicación frontend, todo en el mismo proyecto. Este ejemplo te proporciona una base para construir APIs más complejas en el futuro. ¡Experimenta y adapta este código a tus necesidades!

‎data/blog/como-crear-rutas-en-nextjs.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -209,4 +209,4 @@ Puedes crear carpetas dentro de `app` para definir subrutas. Por ejemplo, `app/b
209209

210210
Sí. Next.js permite combinar rutas dinámicas con funciones como `getStaticProps` o `getServerSideProps` para cargar datos en tiempo de construcción o en tiempo real.
211211

212-
Con esta guía, estás preparado para crear rutas en Next.js 15 de manera eficiente. ¡Aprovecha las mejoras en el enrutamiento para desarrollar aplicaciones modernas y escalables! 🚀
212+
Con esta guía, estás preparado para crear rutas en Next.js 15 de manera eficiente. ¡Aprovecha las mejoras en el enrutamiento para desarrollar aplicaciones modernas y escalables! 🚀

‎data/blog/que-es-nextjs-y-por-que-usarlo.mdx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ Trabajar con Next.js ofrece una amplia gama de ventajas:
2828
- Las páginas renderizadas en el servidor permiten que los motores de búsqueda indexen fácilmente el contenido.
2929

3030
3. **Rutas basadas en archivos**:
31-
[rutas en nextjs](http://localhost:3000/blog/como-crear-rutas-en-nextjs)
31+
[rutas en nextjs](como-crear-rutas-en-nextjs)
3232

3333
- No es necesario configurar manualmente un enrutador, ya que las rutas se generan automáticamente a partir de la estructura de archivos.
3434

@@ -38,6 +38,7 @@ Trabajar con Next.js ofrece una amplia gama de ventajas:
3838
- Integración con TypeScript y ESLint lista para usar.
3939

4040
5. **Compatibilidad con APIs**:
41+
[crear api en nextjs](como-crear-api-en-nextjs)
4142

4243
- Next.js te permite crear rutas API directamente dentro de tu proyecto, eliminando la necesidad de configurar un backend separado para operaciones simples.
4344

0 commit comments

Comments
 (0)