Voorbeeld van het draaien van een Next.js-frontend

In de map /frontend-examples/articles-with-tags-filter vind je een Next.js-applicatie die gebruikmaakt van de JSON Drop API.

Overzicht

Dit is een Next.js-applicatie die integratie met de JSON Drop API demonstreert voor het beheren van artikelen met tags en filterfunctionaliteit.

Vereisten

• Node.js (v18 of hoger)
• npm of pnpm pakketbeheerder
• Toegang tot een JSON Drop API-instantie

Installatie

1. Kloon de repository
2. Installeer afhankelijkheden:

   npm install
   # of
   pnpm install

3. Configureer omgevingsvariabelen:
   • Maak een .env-bestand aan in de hoofdmap
   • Stel de volgende variabele in:

     NEXT_PUBLIC_DRUPAL_BASE_URL="http://jouw-jsonapi-instantie"

De applicatie starten

Om de ontwikkelserver te starten:

npm run dev
# of
pnpm dev

De applicatie zal beschikbaar zijn op http://localhost:3000

Beschikbare routes

• / - Startpagina met artikellijst en tag-filtering
• /articles - Artikelen overzichtspagina
• /form - Formulierpagina voor het aanmaken/bewerken van artikelen

Configuratie

Omgevingsvariabelen

• NEXT_PUBLIC_DRUPAL_BASE_URL - Basis-URL van jouw JSON Drop API-instantie

Afhankelijkheden

De applicatie gebruikt verschillende belangrijke afhankelijkheden:

• Next.js 15.1.0
• React 19
• Axios voor API-aanroepen
• TailwindCSS voor styling
• Radix UI-componenten
• React Hook Form voor formulierafhandeling

Veelvoorkomende valkuilen

Bouwen voor productie

Om een productiebuild te maken:

npm run build
# of
pnpm build

Om de productie-server te starten:

npm run start
# of
pnpm start

Ondersteuning

Voor problemen of vragen, raadpleeg de projectdocumentatie of maak een issue aan in de repository.