Skip to main content

Lumo Next (Nederlandse Versie)

Dit is het Next.js project van Lumo. Het dient als vervanging van een eerdere implementatie die gebruikmaakte van Deno Fresh. Dit project maakt gebruik van de Next.js App Router voor de structuur en routering van de applicatie.

Overzicht​

Het doel van deze applicatie is om de functionaliteit van het oorspronkelijke Lumo-project, gebouwd met Deno Fresh, te repliceren met behulp van het Next.js framework. Belangrijke concepten uit de Fresh-architectuur worden hierbij vertaald naar Next.js conventies:

  • Islands (Interactieve UI-Componenten): In Deno Fresh vertegenwoordigen 'islands' interactieve componenten die specifiek op de client worden gehydrateerd (actief gemaakt met JavaScript). In dit Next.js project vervullen de routes binnen de src/app/(dashboard)/ map een vergelijkbare rol. Deze map bevat de primaire pagina's en componenten die zichtbaar zijn voor ingelogde gebruikers en waar de meeste interactie plaatsvindt.
  • API Routes: De backend API-eindpunten die voorheen werden afgehandeld door de API-routes van Fresh, bevinden zich nu in de src/app/api/ map binnen dit Next.js project. Deze routes verwerken dataverzoeken en server-side logica.

Aan de slag​

Volg deze stappen om het project lokaal op te zetten en te draaien.

Vereisten​

Zorg ervoor dat de volgende software op je systeem geïnstalleerd is:

  • Node.js: De aanbevolen versie staat gespecificeerd in het .nvmrc bestand. Als dit bestand ontbreekt, gebruik dan de meest recente LTS (Long Term Support) versie.
  • Package Manager: npm, yarn, of pnpm. Kies één van deze tools om de projectafhankelijkheden (dependencies) te beheren.

Installatie​

  1. Clone de repository: Download de projectbestanden naar je lokale machine. 
    git clone <repository-url> # Vervang <repository-url> door de daadwerkelijke URL
    cd lumo-next
  2. Installeer afhankelijkheden: Navigeer naar de projectmap en installeer alle benodigde packages. 
    # Kies één van de volgende commando's, afhankelijk van je voorkeur:
    npm install
    # of
    yarn install
    # of
    pnpm install

Starten van de Development Server​

Voer het volgende commando uit om de Next.js development server te starten:

npm run dev
# of
yarn dev
# of
pnpm dev

De server start standaard op http://localhost:3000. Open deze URL in je webbrowser om de applicatie te bekijken. De applicatie zal automatisch herladen wanneer je wijzigingen aanbrengt in de code.

Mappenstructuur​

Het project volgt de standaard mappenstructuur van de Next.js App Router, die is ontworpen voor een duidelijke organisatie van routes en componenten:

lumo-next/
├── public/             # Statische bestanden (afbeeldingen, lettertypen, etc.) die direct toegankelijk zijn.
├── src/                # Broncode van de applicatie.
│   ├── app/            # Kernmap voor de App Router: bevat alle routes, layouts en pagina's.
│   │   ├── (dashboard)/ # Route Group: Beveiligde dashboard routes (vergelijkbaar met Fresh islands).
│   │   │   ├── layout.tsx # Standaard layout specifiek voor alle dashboard pagina's.
│   │   │   └── page.tsx   # Voorbeeld van een dashboard pagina (bv. /dashboard).
│   │   ├── api/         # API Routes: Definieert backend eindpunten.
│   │   │   └── ...      # Submappen en bestanden voor specifieke API-logica.
│   │   ├── layout.tsx   # Root Layout: De hoofdlayout die geldt voor de gehele applicatie.
│   │   └── page.tsx     # Root Page: De hoofdpagina van de applicatie (bv. de landingspagina op '/').
│   ├── components/     # Herbruikbare React componenten.
│   │   ├── shared/      # Componenten gedeeld over verschillende delen van de app (bv. Sidebar, Topbar).
│   │   └── ui/          # Suggestie: Generieke UI-elementen (knoppen, invoervelden, kaarten).
│   ├── lib/            # Suggestie: Hulpprogramma's, custom hooks, constanten, type definities.
│   ├── styles/         # Suggestie: Globale stijlen, Tailwind CSS configuratie.
│   └── ...             # Andere mappen voor bijvoorbeeld types, context, etc.
├── .env.local          # Lokale omgevingsvariabelen (NIET opslaan in Git!).
├── .gitignore          # Specificeert bestanden en mappen die Git moet negeren.
├── next.config.mjs     # Configuratiebestand voor Next.js.
├── package.json        # Definieert project metadata en afhankelijkheden.
├── pnpm-lock.yaml      # Of package-lock.json / yarn.lock: Lockfile voor exacte dependency versies.
├── postcss.config.js   # Configuratie voor PostCSS (vaak gebruikt met Tailwind).
├── tailwind.config.ts  # Configuratiebestand voor Tailwind CSS.
└── tsconfig.json       # Configuratiebestand voor TypeScript.
  • src/app/: Dit is het hart van de applicatie volgens de App Router conventie. Alle gebruikersroutes (pagina's die je in de browser kunt bezoeken) en API-routes worden hier gedefinieerd.
    • (dashboard): Dit is een Route Group. Mappen tussen haakjes () worden genegeerd in de URL-structuur, maar helpen bij het organiseren van routes en het toepassen van specifieke layouts. Deze groep bevat de pagina's die alleen toegankelijk zijn na authenticatie en vormen de kern van de gebruikersinterface, conceptueel vergelijkbaar met 'islands' in Deno Fresh waar interactieve elementen leven.
    • api: Deze map bevat alle server-side API eindpunten. Elk bestand of map hierin definieert een route onder /api/. Bijvoorbeeld, src/app/api/users/route.ts zou bereikbaar zijn via http://<jouw-domein>/api/users.
  • src/components/: Bevat herbruikbare React componenten die op verschillende plaatsen in de applicatie gebruikt kunnen worden.
    • shared: Componenten die specifiek zijn voor dit project en gedeeld worden tussen meerdere features of layouts (bijvoorbeeld Sidebar, Topbar, Footer).
    • ui: (Suggestie) Basale, herbruikbare UI-primitieven die geen specifieke applicatielogica bevatten (zoals Button, Input, Card). Dit bevordert consistentie en herbruikbaarheid.
  • src/lib/: (Suggestie) Een map voor algemene hulpprogramma's, custom React Hooks, globale constanten, TypeScript type definities, en andere logica die niet direct een component of een route is.
  • src/styles/: (Suggestie) Plek voor globale CSS-bestanden of styling-gerelateerde configuraties, zoals de setup voor Tailwind CSS (globals.css).
  • public/: Bestanden in deze map worden direct geserveerd vanaf de root van de webserver. Ideaal voor afbeeldingen, lettertypen, robots.txt, favicon.ico, etc.

Gebruikte Technologieën (Tech Stack)​

Dit project is gebouwd met de volgende kerntechnologieën:

Deze README biedt een gedetailleerd overzicht specifiek voor het Lumo Next.js project. Voel je vrij om het verder uit te breiden met informatie over specifieke features, deployment instructies, of richtlijnen voor bijdragen.

Meer Leren Over Next.js​

Om meer te leren over Next.js, bekijk de volgende bronnen:

Je kunt ook de Next.js GitHub repository bekijken - feedback en bijdragen zijn welkom!

Deployen op Vercel​

De makkelijkste manier om je Next.js app te deployen is via het Vercel Platform, gemaakt door de ontwikkelaars van Next.js.

Bekijk de Next.js deployment documentatie voor meer details.