Saltar al contenido
ESEN
Contacto

Tecnología · Framework de aplicaciones

Desarrollo de aplicaciones con Next.js

Next.js es un framework construido sobre React que añade lo que una aplicación necesita alrededor de la interfaz: rutas, páginas generadas en el servidor, acceso de usuarios y funciones que hablan con tu base de datos. Con él desarrollamos aplicaciones que tienen una parte pública y otra privada en un mismo proyecto.

Cuéntanos tu proyecto Ver un ejemplo

Se combina con

Fig. 01Maqueta en dos nivelesSERVIDOR · DATOSPÚBLICOPRIVADOEn bucle
Una petición pública se sirve desde el escaparate. La privada sube, pasa por la barrera de acceso y baja a la base a por sus datos.

Situaciones

Qué puedes resolver con una aplicación en Next.js

Next.js tiene sentido cuando el proyecto es más que una web y más que una pantalla: hay algo que cualquiera puede ver, algo que solo ve quien entra y un servidor que decide qué enseña a cada uno.

  • Páginas públicas y área privada juntas

    Un catálogo que cualquiera puede ver y una cuenta donde cada cliente ve lo suyo, con el mismo diseño y un solo despliegue.

  • Un producto con usuarios y roles

    Registro, inicio de sesión, permisos y pantallas que cambian según quién entra.

  • Datos que no deben salir al navegador

    Consultas y claves que se quedan en el servidor: el navegador recibe solo el resultado que le corresponde.

  • Una aplicación React que necesita más

    Carga lenta, páginas que el buscador no ve o lógica sensible en el cliente. Se traslada a Next.js por partes.

El control de acceso: lo privado no pasa sin comprobarse

Qué conviene revisar al empezar

  • Qué partes son públicas y cuáles requieren sesión
  • Cómo se identifican hoy los usuarios
  • Dónde están los datos y quién puede escribirlos
  • Dónde se alojará y qué servidor necesita

Servicios

Qué desarrollamos con Next.js

Las cuatro partes de una aplicación, que en Next.js conviven en el mismo proyecto.

  • Módulo 1 · Nivel público

    Páginas públicas

    Portada, catálogo y fichas generadas en el servidor, para que lleguen completas al navegador y a los buscadores.

    Ejemplos de entregables

    • Catálogo y fichas
    • Páginas de contenido
    • Formularios públicos
  • Módulo 2 · Control de acceso

    Áreas privadas y acceso de usuarios

    Inicio de sesión, recuperación de contraseña, roles y comprobación de permisos en cada petición.

    Ejemplos de entregables

    • Cuenta de cliente
    • Panel por rol
    • Acceso con un proveedor externo
  • Módulo 3 · Base técnica

    Funciones de servidor y datos

    Lectura y escritura en tu base de datos, llamadas a otros sistemas y tareas que no deben ejecutarse en el navegador.

    Ejemplos de entregables

    • Consultas a la base de datos
    • Envío de correos
    • Conexión con un ERP
  • Módulo 4 · Montante

    Integración de las partes

    Interfaz, servidor, datos y despliegue coordinados, para que un cambio en una parte no rompa la de al lado.

    Ejemplos de entregables

    • Entornos de pruebas y producción
    • Despliegue automatizado
    • Registro de errores

Un ejemplo en funcionamiento

Un catálogo público y una cuenta privada

Ejemplo ilustrativo con datos ficticios. El catálogo se ve sin iniciar sesión. Entra en «Mi cuenta» y observa el registro del servidor: comprueba la sesión antes de enviar ningún dato.

Demostración simulada · datos de muestra

/catalogo
  • Silla Albaref. A-102
  • Mesa Robleref. M-340
  • Lámpara Nuberef. L-018

Registro del servidor

    La sesión y los datos son de muestra y viven en tu navegador. El acceso de ejemplo ya viene rellenado: no hace falta, ni conviene, escribir credenciales reales.

    Integración

    Cómo encaja con tus sistemas

    Una aplicación Next.js se sitúa entre las personas y tus datos. Lo que importa decidir pronto es quién se identifica, con qué y dónde vive cada dato.

    De dónde viene

    • Interfaz en React componentes y pantallas
    • Base de datosusuarios, pedidos y contenido
    • Proveedor de identidadinicio de sesión
    Next.jsAplicación Next.jssirve páginas y comprueba accesos

    A dónde llega

    Dependencias que conviene revisar

    • Qué alojamiento se usará y qué funciones del framework admite
    • Cómo se trasladan los usuarios que ya existen
    • Qué datos son personales y dónde se guardan
    • Qué carga se espera en las páginas públicas

    Cómo trabajamos y qué entregamos

    Cómo trabajamos una aplicación en Next.js

    1. 01

      Revisión inicial

      Qué existe hoy: aplicación, base de datos, usuarios y lo que cada uno puede ver.

    2. 02

      Alcance

      El mapa de rutas públicas y privadas, los roles y las funciones de servidor. Lo que queda fuera, por escrito.

    3. 03

      Primera entrega

      Un recorrido completo: una página pública, el acceso y una pantalla privada con datos reales.

    4. 04

      Validación

      Pruebas con un usuario de cada rol, incluido el que no debería ver algo.

    5. 05

      Documentación

      Variables de entorno, despliegue, cómo se revierte una versión y a quién avisa un error.

    Qué recibes al cerrar el encargo

    • El repositorio y las cuentas de despliegue a tu nombre
    • Entornos de pruebas y de producción
    • Los roles y permisos documentados
    • Una guía de despliegue y de reversión

    Preguntas

    Preguntas sobre Next.js

    ¿Falta la tuya? Escríbela a info@veodar.com y te respondemos con una pregunta concreta, no con un dossier.

    ¿Qué diferencia hay entre React y Next.js?

    React es la biblioteca con la que se construye la interfaz. Next.js es un framework que usa React y le añade rutas, generación de páginas en el servidor y funciones de servidor. Una aplicación Next.js es, por dentro, una aplicación React con esas piezas alrededor.

    ¿Usar Next.js garantiza posicionar en buscadores?

    No. Next.js puede entregar las páginas ya generadas, que es una buena base técnica. El posicionamiento depende del contenido, de la estructura del sitio y de su autoridad; el framework por sí solo no lo decide.

    ¿Next.js obliga a alojar en un proveedor concreto?

    No. Se puede desplegar en varios proveedores o en un servidor propio con Node.js. Algunas funciones dependen de la plataforma, así que el alojamiento se elige al principio y no al final.

    ¿Podéis migrar una aplicación React que ya existe?

    Sí, normalmente por partes: primero las rutas y las páginas públicas, después el acceso y los datos. La aplicación sigue funcionando durante el traslado.

    ¿Dónde se guardan los datos de los usuarios?

    En la base de datos que elijas, en cuentas a tu nombre. Las contraseñas no se guardan en claro y las claves de otros servicios se quedan en el servidor, fuera del código que llega al navegador.

    Actualizado:

    Servicios relacionados

    Todos los servicios

    Otras tecnologías

    Con qué se combina

    Todas las tecnologías
    • Desarrollo con ReactPaneles, buscadores y formularios complejos. Interfaces conectadas con tus datos para consultar información y realizar tareas desde el navegador.
    • Backend con Node.jsAPIs, conexiones entre sistemas y procesos en segundo plano. Automatizamos el intercambio de información entre tu web y tus herramientas de gestión.
    • Integración de IA generativaAsistentes sobre documentos, clasificación de información y generación de borradores. Incorporamos estas funciones a tu web y a tus herramientas de trabajo.

    Empezar

    Cuéntanos qué aplicación quieres construir.

    Qué ve cualquiera, qué ve solo quien entra y dónde están hoy los datos. Con esas tres cosas se puede hablar de alcance.

    Qué ayuda a valorarlo

    • Qué ve cualquiera y qué solo ve un usuario
    • Qué roles existen
    • Dónde están hoy los datos
    • Si hay una aplicación anterior
    Cuéntanos tu proyecto info@veodar.com

    ¿Antes de escribir? Mira cómo presupuestamos un proyecto o las soluciones por área de la empresa.

    Fig. 07Manipulador MorseH · O · L · A