Crear una aplicación fullstack significa desarrollar tanto la parte visual que utiliza el usuario como la lógica del servidor y el acceso a datos. Con Next.js 16 podemos construir todo esto dentro de un mismo proyecto, evitando tener que mantener un frontend y un backend completamente separados.
En este tutorial veremos cómo crear una aplicación sencilla desde cero.
1. Crear el proyecto
Primero necesitamos tener instalado Node.js. Después podemos crear nuestro proyecto ejecutando:
npx create-next-app@latest mi-app
Durante la configuración podemos seleccionar TypeScript, ESLint, Tailwind CSS y el App Router.
Después entramos en la carpeta:
cd mi-app
npm run dev
La aplicación estará disponible normalmente en http://localhost:3000.
2. Crear la interfaz
Next.js utiliza una estructura basada en archivos. Por ejemplo, podemos modificar app/page.tsx para crear nuestra página principal:
export default function Home() {
return (
<main>
<h1>Mi aplicación Fullstack</h1>
<p>Aplicación creada con Next.js 16</p>
</main>
);
}
Aquí estamos creando un componente de React que será renderizado por Next.js.
3. Crear lógica en el servidor
Una de las ventajas de Next.js es que podemos ejecutar código del servidor dentro del mismo proyecto.
Por ejemplo, podemos utilizar una Server Action para procesar información:
"use server";
export async function guardarUsuario(formData: FormData) {
const nombre = formData.get("nombre");
console.log("Usuario:", nombre);
}
Esto permite enviar información desde la interfaz hacia el servidor sin necesidad de crear obligatoriamente una API independiente.
4. Conectar una base de datos
Una aplicación real normalmente necesita almacenar información. Podemos utilizar herramientas como Prisma junto con bases de datos como PostgreSQL, MySQL o SQLite.
La idea sería crear un modelo, por ejemplo:
model Usuario {
id Int @id @default(autoincrement())
nombre String
email String @unique
}
Después podemos utilizar Prisma desde el servidor para crear, consultar, actualizar o eliminar usuarios.
5. Crear una API
Next.js también permite crear endpoints mediante Route Handlers.
Por ejemplo:
export async function GET() {
return Response.json({
mensaje: "API funcionando"
});
}
Esto permite que nuestra aplicación tenga endpoints para comunicarse con otros servicios o aplicaciones.
6. Probar y desplegar
Durante el desarrollo podemos comprobar que tanto la interfaz como la lógica del servidor funcionan correctamente.
Cuando el proyecto esté terminado, podemos generar una versión de producción:
npm run build
npm start
También podemos desplegar la aplicación en plataformas compatibles con Next.js.
Conclusión
Next.js 16 permite construir aplicaciones fullstack modernas utilizando React, lógica de servidor, APIs y bases de datos dentro de un mismo proyecto. Esto simplifica la arquitectura y facilita el desarrollo de aplicaciones completas.
Si estás aprendiendo desarrollo web, crear un proyecto fullstack con Next.js es una excelente forma de entender cómo se conectan el frontend, el backend y la base de datos en una aplicación real.
