Construir una Aplicación Full-Stack con Next.js y FastAPI

Tiempo de lectura: 2 minutos

Hoy vamos a aprender a crear una aplicación Flull Stack con Next y Fast API.

1. Configuración del Proyecto

1. Pre-requisitos:
   • Node.js instalado.
   • Python instalado (se recomienda 3.9 o superior).
   • Familiaridad con REST APIs y React.
2. Estructura del Proyecto: Crea un directorio para tu proyecto:

my-fullstack-app/
├── backend/
└── frontend/

2. Configuración del Backend con FastAPI

Instalar FastAPI y Uvicorn: Navega al directorio backend/ y ejecuta:

pip install fastapi uvicorn

Crea tu servidor FastAPI: En backend/, crea un archivo main.py:

from fastapi import FastAPI

app = FastAPI()

@app.get("/")
def read_root():
    return {"message": "Welcome to FastAPI Backend!"}

@app.get("/api/items/{item_id}")
def read_item(item_id: int, q: str = None):
    return {"item_id": item_id, "q": q}

Ejecutar el servidor: uvicorn main:app --reload El backend estará disponible en http://127.0.0.1:8000.

3. Configuración del Frontend con Next.js

1. Crear una app Next.js: Navega al directorio frontend/ y ejecuta:

npx create-next-app@latest .

Configurar Axios para llamadas al backend: Instala Axios:

npm install axios

Crea un archivo lib/api.js para manejar las peticiones:

import axios from "axios";

const api = axios.create({
  baseURL: "http://127.0.0.1:8000", // Backend URL
});

export default api;

Crear una página que consuma la API: Edita pages/index.js:

import { useState, useEffect } from "react";
import api from "../lib/api";

export default function Home() {
  const [data, setData] = useState(null);

  useEffect(() => {
    api.get("/api/items/1?q=test").then((response) => {
      setData(response.data);
    });
  }, []);

  return (
    <div>
      <h1>Next.js + FastAPI App</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

Ejecuta el servidor Next.js:

npm run dev

El frontend estará disponible en http://localhost:3000.

4. Configuración del Proxy para el Desarrollo

Para evitar problemas de CORS, configura un proxy en Next.js.

Edita next.config.js:

module.exports = {
  async rewrites() {
    return [
      {
        source: "/api/:path*",
        destination: "http://127.0.0.1:8000/api/:path*",
      },
    ];
  },
};

Reinicia el servidor de desarrollo para aplicar los cambios.

5. Extensiones y Mejoras

Añadir un Modelo en FastAPI: Define un modelo con Pydantic en main.py:

from pydantic import BaseModel

class Item(BaseModel):
    name: str
    price: float
    description: str | None = None

Endpoint para crear items:

@app.post("/api/items/")
def create_item(item: Item):
    return {"item": item}

Llamar a la API desde Next.js: En una página como pages/create.js:

import { useState } from "react";
import api from "../lib/api";

export default function CreateItem() {
  const [item, setItem] = useState({ name: "", price: 0, description: "" });

  const handleSubmit = async (e) => {
    e.preventDefault();
    const response = await api.post("/api/items/", item);
    console.log(response.data);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Name"
        value={item.name}
        onChange={(e) => setItem({ ...item, name: e.target.value })}
      />
      <input
        type="number"
        placeholder="Price"
        value={item.price}
        onChange={(e) => setItem({ ...item, price: parseFloat(e.target.value) })}
      />
      <textarea
        placeholder="Description"
        value={item.description}
        onChange={(e) => setItem({ ...item, description: e.target.value })}
      />
      <button type="submit">Create Item</button>
    </form>
  );
}

6. Despliegue

1. Backend:
   • Utiliza Docker o servicios como AWS/GCP para desplegar tu API de FastAPI.
2. Frontend:
   • Despliega la app Next.js con Vercel o similar.