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. Accueil
  2. Documentation de l’API JSON Drop
  3. <h2>Installation de l’API JSON Drop</h2>

Exécution de l'exemple frontend Next.js

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

JSON Drop API Documentation

Dans le dossier /frontend-examples/articles-with-tags-filter, vous pouvez trouver une application Next.js qui utilise JSON Drop API.

Aperçu

Il s'agit d'une application Next.js qui démontre l'intégration avec JSON Drop API pour gérer des articles avec des tags et une fonctionnalité de filtrage.

Next.js app1
Page d'accueil de l'application Next.js
next.js articles
Page de liste des articles de l'application Next.js.
Contact Us form
Formulaire de contact de l'application Next.js.

Prérequis

  • Node.js (version 18 ou supérieure)
  • Gestionnaire de paquets npm ou pnpm
  • Accès à une instance JSON Drop API

Installation

  1. Cloner le dépôt
  2. Installer les dépendances : 
    npm install
# ou
pnpm install
  3. Configurer les variables d'environnement :
    • Créer un fichier .env à la racine du projet
    • Définir la variable suivante : 
      NEXT_PUBLIC_DRUPAL_BASE_URL="http://votre-instance-jsonapi"

Lancement de l'application

Pour démarrer le serveur de développement :

npm run dev
# ou
pnpm dev

L'application sera disponible à l'adresse http://localhost:3000

npm run dev
Exécution de l'application avec Next.js

Routes disponibles

  • / - Page d'accueil avec liste d'articles et filtrage par tags
  • /articles - Page listant les articles
  • /form - Page de formulaire pour créer/modifier des articles

Configuration

Variables d'environnement

  • NEXT_PUBLIC_DRUPAL_BASE_URL - URL de base de votre instance JSON Drop API

Dépendances

L'application utilise plusieurs dépendances clés :

  • Next.js 15.1.0
  • React 19
  • Axios pour les appels API
  • TailwindCSS pour le style
  • Composants Radix UI
  • React Hook Form pour la gestion des formulaires

Pièges courants

Configuration de l'API

Assurez-vous que la variable d'environnement NEXT_PUBLIC_DRUPAL_BASE_URL est correctement configurée vers votre instance JSON Drop API. Une mauvaise configuration entraînera des erreurs lors des appels API.

Problèmes CORS

Si vous rencontrez des erreurs CORS, assurez-vous que votre instance JSON Drop API est configurée pour accepter les requêtes depuis votre domaine de développement (localhost:3000).

Variables d'environnement

Rappelez-vous que les variables d'environnement préfixées par NEXT_PUBLIC_ sont exposées au navigateur. N'incluez pas d'informations sensibles dans ces variables.

Construction pour la production

Pour créer une version de production :

npm run build
# ou
pnpm build

Pour démarrer le serveur de production :

npm run start
# ou
pnpm start

Support

Pour toute question ou problème, veuillez consulter la documentation du projet ou créer une issue dans le dépôt.