logo

Extra Block Types (EBT) - Nueva experiencia con Layout Builder❗

Extra Block Types (EBT): tipos de bloques con estilo y personalizables: Presentaciones de diapositivas, Pestañas, Tarjetas, Acordeones y muchos más. Configuraciones integradas para fondo, DOM Box y plugins de JavaScript. Experimenta hoy el futuro de la construcción de diseños.

Módulos de demostración EBT Descargar módulos EBT

❗Extra Paragraph Types (EPT) - Nueva experiencia con Paragraphs

Extra Paragraph Types (EPT): conjunto de módulos basado en párrafos de forma análoga.

Módulos de demostración EPT Descargar módulos EPT

Scroll
  1. Inicio
  2. Documentación de la API de JSON Drop
  3. Instalación de JSON Drop API

Ejemplo de ejecución de la interfaz de usuario de Next.js

18/05/2025, by Ivan
Download JSON Drop API

JSON Drop API Documentation

En la carpeta /frontend-examples/articles-with-tags-filter puedes encontrar una aplicación Next.js que utiliza JSON Drop API.

Resumen

Esta es una aplicación Next.js que demuestra la integración con JSON Drop API para gestionar artículos con etiquetas y funcionalidad de filtrado.

Next.js app1
Página principal de la aplicación Next.js
next.js articles
Página de listado de artículos de la aplicación Next.js.
Formulario de Contacto
Formulario de contacto de la aplicación Next.js.

Requisitos Previos

  • Node.js (versión 18 o superior)
  • Administrador de paquetes npm o pnpm
  • Acceso a una instancia de JSON Drop API

Instalación

  1. Clona el repositorio
  2. Instala las dependencias: 
    npm install
# o
pnpm install
  3. Configura las variables de entorno:
    • Crea un archivo .env en el directorio raíz
    • Define la siguiente variable: 
      NEXT_PUBLIC_DRUPAL_BASE_URL="http://tu-instancia-jsonapi"

Ejecutar la Aplicación

Para iniciar el servidor de desarrollo:

npm run dev
# o
pnpm dev

La aplicación estará disponible en http://localhost:3000

npm run dev
Ejecutando una aplicación con Next.js

Rutas Disponibles

  • / - Página principal con lista de artículos y filtrado por etiquetas
  • /articles - Página de listado de artículos
  • /form - Página con formulario para crear/editar artículos

Configuración

Variables de Entorno

  • NEXT_PUBLIC_DRUPAL_BASE_URL - URL base de tu instancia JSON Drop API

Dependencias

La aplicación utiliza varias dependencias clave:

  • Next.js 15.1.0
  • React 19
  • Axios para llamadas a la API
  • TailwindCSS para estilos
  • Componentes Radix UI
  • React Hook Form para manejo de formularios

Problemas Comunes

Configuración de la API

Asegúrate que la variable de entorno NEXT_PUBLIC_DRUPAL_BASE_URL esté correctamente configurada apuntando a tu instancia JSON Drop API. Una configuración incorrecta provocará fallos en las solicitudes a la API.

Problemas CORS

Si experimentas errores CORS, verifica que tu instancia JSON Drop API esté configurada para aceptar solicitudes desde tu dominio de desarrollo (localhost:3000).

Variables de Entorno

Recuerda que las variables de entorno que comienzan con NEXT_PUBLIC_ son expuestas al navegador. No incluyas información sensible en estas variables.

Construcción para Producción

Para crear una compilación de producción:

npm run build
# o
pnpm build

Para iniciar el servidor en producción:

npm run start
# o
pnpm start

Soporte

Para problemas o preguntas, consulta la documentación del proyecto o crea un issue en el repositorio.