logo

Extra Block Types (EBT) - New Layout Builder experience❗

Extra Block Types (EBT) - styled, customizable block types: Slideshows, Tabs, Cards, Accordions and many others. Built-in settings for background, DOM Box, javascript plugins. Experience the future of layout building today.

Demo EBT modules Download EBT modules

❗Extra Paragraph Types (EPT) - New Paragraphs experience

Extra Paragraph Types (EPT) - analogical paragraph based set of modules.

Demo EPT modules Download EPT modules

Scroll
  1. Home
  2. Documentazione di JSON Drop API
  3. Installazione di JSON Drop API

Esecuzione dell'esempio di frontend Next.js

06/09/2025, by Ivan
Download JSON Drop API

JSON Drop API Documentation

Nella cartella /frontend-examples/articles-with-tags-filter puoi trovare un’applicazione Next.js che utilizza JSON Drop API.

Panoramica

Questa è un’applicazione Next.js che dimostra l’integrazione con JSON Drop API per la gestione degli articoli con tag e funzionalità di filtro.

Next.js app1
Frontpage dell'app Next.js
next.js articles
Pagina di elenco articoli dell'applicazione Next.js.
Contact Us form
Form di contatto dell'applicazione Next.js.

Prerequisiti

  • Node.js (v18 o superiore)
  • npm o pnpm come gestore pacchetti
  • Accesso a un’istanza di JSON Drop API

Installazione

  1. Clonare il repository
  2. Installare le dipendenze: 
    npm install
# oppure
pnpm install
  3. Configurare le variabili d’ambiente:
    • Creare un file .env nella directory principale
    • Impostare la seguente variabile: 
      NEXT_PUBLIC_DRUPAL_BASE_URL="http://your-jsonapi-instance"

Esecuzione dell’Applicazione

Per avviare il server di sviluppo:

npm run dev
# oppure
pnpm dev

L’applicazione sarà disponibile su http://localhost:3000

npm run dev
Esecuzione di un'applicazione con Next.js

Route Disponibili

  • / - Homepage con elenco articoli e filtro per tag
  • /articles - Pagina di elenco articoli
  • /form - Pagina del form per creare/modificare articoli

Configurazione

Variabili d’Ambiente

  • NEXT_PUBLIC_DRUPAL_BASE_URL - URL di base della tua istanza JSON Drop API

Dipendenze

L’applicazione utilizza diverse dipendenze chiave:

  • Next.js 15.1.0
  • React 19
  • Axios per le chiamate API
  • TailwindCSS per lo styling
  • Componenti Radix UI
  • React Hook Form per la gestione dei form

Problemi Comuni

Configurazione API

Assicurati che la variabile d’ambiente NEXT_PUBLIC_DRUPAL_BASE_URL sia impostata correttamente sulla tua istanza JSON Drop API. Una configurazione errata comporterà errori nelle richieste API.

Problemi di CORS

Se riscontri errori CORS, assicurati che la tua istanza JSON Drop API sia configurata per accettare richieste dal tuo dominio di sviluppo (localhost:3000).

Variabili d’Ambiente

Ricorda che le variabili d’ambiente con prefisso NEXT_PUBLIC_ sono esposte al browser. Non includere informazioni sensibili in queste variabili.

Build per la Produzione

Per creare una build di produzione:

npm run build
# oppure
pnpm build

Per avviare il server di produzione:

npm run start
# oppure
pnpm start

Supporto

Per problemi o domande, fai riferimento alla documentazione del progetto o crea una issue nel repository.