terminalGETTING_STARTED_v1.0

Introductie

Layero is een marketplace van precisiematige Next.js-thema's ontworpen voor high-performance websites. Elk thema wordt productierijp geleverd — met TypeScript, Tailwind CSS, SEO en CMS-connectoren inbegrepen.

codeSTART (Alleen thema) is voor

  • checkOntwikkelaars
  • checkFreelancers
  • checkBureaus
  • checkTechnische doe-het-zelvers

support_agentNiet technisch?

Geen probleem. Onze beheerde plannen regelen alles — van installatie tot lancering en inhoudsbewerking.

PRO Planwij verzorgen de deployment voor u

MAX Plandeployment + bewerkbare interface

ULTRAvolledig op maat gemaakte oplossing

01. Kopen

Kies een thema en selecteer uw plan — START, PRO of MAX.

02. Configureren

Kloon de repository, installeer de afhankelijkheden en stel uw omgevingsvariabelen in via .env.local.

03. Aanpassen

Bewerk inhoud in de map data/, vervang afbeeldingen en pas de Tailwind-thematokens aan.

04. Deploy

Publiceer op Vercel, Netlify, of upload een statische build naar uw Apache / cPanel-hosting.

VEREISTEN

Node.js ≥ 18.17, npm ≥ 9 of pnpm ≥ 8. Git is vereist om uw project te klonen en bij te houden.

Installatie

Na aankoop ontvangt u toegang tot de bronrepository van uw thema. Volg de onderstaande stappen om uw lokale omgeving te initialiseren.

Terminalbash
# Clone your purchased theme git clone https://github.com/sitelift/your-theme.git # Enter the project directory cd your-theme # Install dependencies npm install # Copy the environment template cp .env.example .env.local # Start the dev server npm run dev

Open http://localhost:3000 om uw thema lokaal te bekijken.

OMGEVINGSVARIABELEN

Bewerk .env.local met uw inloggegevens voordat u start:

# Site config NEXT_PUBLIC_SITE_URL=https://yourdomain.com NEXT_PUBLIC_SITE_NAME="Your Business" # CMS (optional) CONTENTFUL_SPACE_ID=xxxx CONTENTFUL_ACCESS_TOKEN=xxxx # Stripe (optional) STRIPE_SECRET_KEY=sk_live_xxxx NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_xxxx

Bestandsstructuur

Alle Layero-thema's volgen een consistente directorystructuur gebaseerd op de Next.js App Router-conventies.

Project Root
. ├─ app/ # Next.js App Router │ ├─ (routes)/ # Page route groups │ ├─ api/ # Server API routes │ ├─ globals.css # Tailwind + design tokens │ └─ layout.tsx # Root layout + fonts ├─ components/ # Shared UI components ├─ data/ # ← All editable content lives here │ ├─ site.ts # Business info, contact, hours │ ├─ services.ts # Services / offerings (theme-specific) │ ├─ team.ts # Team profiles │ └─ ... # Additional files per theme ├─ hooks/ # Custom React hooks ├─ lib/ # SEO helpers, form utils, animations ├─ public/ # Static assets ├─ tailwind.config.ts # Design token overrides └─ .env.local # Your environment secrets
data/site.ts

Bedrijfsnaam, telefoon, e-mail, adres, openingstijden en sitewijde statistieken. Het eerste bestand om te openen na het kopen van een thema.

data/

Alle bewerkbare inhoud verdeeld in gerichte TypeScript-bestanden. Elk thema documenteert zijn eigen databestanden in de README — open die voor de volledige lijst.

app/globals.css

Tailwind @theme-blok met alle designtokens — kleuren, typografieschalen, afstanden en border radii.

tailwind.config.ts

Breid Tailwind-utilities uit of overschrijf ze. Voeg hier aangepaste plugins toe zoals Tailwind Typography of Forms.

components/

Herbruikbare componenten gedeeld tussen pagina's (Navbar, Footer, UI-primitieven). Vermijd het dupliceren van logica elders.

Deployment

Server infrastructure visualization

Aanbevolen hostingopties

Layero-thema's werken met elke moderne hostingprovider. Hieronder de drie meest voorkomende opties — kies wat past bij uw workflow.

1. Deployen naar Vercel

De eenvoudigste route. Push uw repo naar GitHub, importeer het in het Vercel-dashboard en u bent live binnen minuten. Elke toekomstige push activeert een automatische herdeployment.

npx vercel --prod

2. Deployen naar Netlify

Verbind uw GitHub-repository in het Netlify-dashboard. Stel de build command in op npm run build en de publicatiemap op .next. Elke push herbouwt automatisch.

npx netlify deploy --prod
dns

3. Traditionele hosting (Apache / cPanel)

Als uw thema statische export ondersteunt, kunt u het hosten op elke standaard Apache- of cPanel-server — zonder Node.js. Geschikt voor brochurewebsites en portfolio's.

01

Statische export inschakelen

Controleer in de README van het thema of statische export wordt ondersteund. In next.config.ts moet output zijn ingesteld op 'export'.

02

Statische bestanden genereren

Voer npm run build uit. Next.js genereert een map out/ met HTML, CSS en JS — geen server nodig.

03

Uploaden via FTP

Gebruik een FTP-client (FileZilla, Cyberduck) of de bestandsbeheerder van uw hostingpaneel om de inhoud van out/ te uploaden naar uw public_html-map.

04

Live gaan

Uw site is nu live als standaard statische website. Geen Node.js-proces, geen serverconfiguratie vereist.

npm run build # generates the out/ folder

PRO TIP

Vercel en Netlify zijn de aanbevolen keuzes voor de meeste gebruikers — nul configuratie, automatisch SSL en directe herdeployment bij elke push. Gebruik Apache-hosting als u al een gedeeld hostingplan heeft en kosten wilt minimaliseren.

Inhoud bewerken

Alle gebruikersgerichte inhoud is verdeeld in gerichte TypeScript-bestanden in de map data/ aan de projectroot. Voor basale inhoudswijzigingen hoeft u geen afzonderlijke paginabestanden aan te raken.

BestandWat het beheert
data/site.tsBedrijfsnaam, telefoon, e-mail, adres, openingstijden, statistieken
data/services.tsDiensten / praktijkgebieden / menu-items
data/team.tsTeamlidprofielen
data/testimonials.tsGetuigenissen (indien van toepassing)
data/navigation.tsNavigatielinks

Raadpleeg de README van uw thema voor de volledige lijst met databestanden en hun exacte structuur — dit varieert per thema.

data/site.tsTypeScript
export const siteConfig = { name: "Your Business", tagline: "Your memorable tagline", phone: "+1 (555) 000-0000", email: "hello@yourdomain.com", address: "123 Main St, City, Country", };

Na het opslaan van het bestand herlaadt de ontwikkelserver direct. In productie is een nieuwe build vereist om wijzigingen toe te passen.

Hoe inhoudsupdates werken

Het updateproces hangt af van waar uw site wordt gehost. Dit is wat u kunt verwachten op elk platform.

cloud

Vercel

  1. 01Bewerk de relevante bestanden in de map data/ van uw thema
  2. 02Commit en push naar uw repository
  3. 03Vercel herbouwt en herdeployt automatisch

Snelste workflow — wijzigingen zijn live in minder dan een minuut.

bolt

Netlify

  1. 01Bewerk de relevante bestanden in de map data/ van uw thema
  2. 02Commit en push naar uw repository
  3. 03Netlify herbouwt en herdeployt automatisch

Hetzelfde als Vercel — push om te deployen.

dns

Apache / Static

  1. 01Bewerk de relevante bestanden in de map data/ van uw thema lokaal
  2. 02Voer npm run build uit om nieuwe statische bestanden te genereren
  3. 03Upload de nieuwe map out/ via FTP

Vereist elke keer toegang tot broncode en een FTP-client.

REBUILD OVERSLAAN?

Upgrade naar het MAX-plan en bewerk uw inhoud via een visuele interface — geen code, geen terminal, geen FTP vereist.

Afbeeldingen vervangen

Alle plaatshouderafbeeldingen worden geladen van externe URL's. Vervang ze door uw eigen assets in public/images/ of via de mediabibliotheek van uw CMS.

01

Voeg uw afbeeldingen toe

Zet bestanden in public/images/. Geaccepteerde formaten: WebP, AVIF, PNG, JPG. Streef naar WebP op 80% kwaliteit voor de beste prestaties.

02

Werk het bronpad bij

Vervang in het relevante pagina- of databestand de URL-string door /images/uw-bestand.webp. Next.js Image verwerkt de optimalisatie automatisch.

03

Stel breedte en hoogte in

Als u de Next.js Image-component gebruikt, geef dan de intrinsieke afmetingen op om lay-outverschuiving (CLS) te voorkomen. Laat ze weg in de fill-modus.

AFBEELDINGSFORMATEN

Hero-afbeeldingen: 1920×1080 px. Kaartminiaturen: 800×600 px. Avatars/logo's: 400×400 px. Exporteer altijd op 2× voor retina-schermen.

CMS Ready

Layero-thema's worden geleverd met optionele adapters voor de drie meest populaire headless CMS-platforms. Verbind degene die past bij uw workflow.

edit_square

Sanity

Realtime collaboratief bewerken, GROQ-querytaal, volledig aanpasbare Studio.

dns

Strapi

Zelf-gehost, open source. Volledige controle over uw data en deployment-infrastructuur.

api

Payload

Code-first, zelf-gehoste Node.js CMS. TypeScript-native met automatisch gegenereerde REST & GraphQL API's.

lib/sanity.ts — example
import {createClient} from '@sanity/client'; export const sanity = createClient({ projectId: process.env.SANITY_PROJECT_ID!, dataset: 'production', apiVersion: '2024-01-01', useCdn: true, });

Stripe Ready

Commerce-thema's bevatten een voorgeconfigureerde Stripe-integratie. Voeg uw sleutels toe en uw checkout-stroom is live.

01

Maak een Stripe-account aan

Registreer op stripe.com en haal uw Publishable Key en Secret Key op uit het Developers-dashboard.

02

Voeg sleutels toe aan .env.local

Stel STRIPE_SECRET_KEY en NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY in in uw .env.local-bestand.

03

Definieer uw producten

Maak producten en prijs-ID's in het Stripe-dashboard. Plak de price_xxx-ID's in uw productendatabestand.

04

Test met Stripe CLI

Stuur webhooks door naar uw lokale server om de checkout-stroom te testen voor u live gaat.

WEBHOOK-BEVEILIGING

Verifieer altijd webhookhandtekeningen met stripe.webhooks.constructEvent(). Vertrouw nooit webhookpayload-data zonder verificatie.

Plan upgraden

Al op START? U kunt op elk gewenst moment upgraden — neem contact op en we verrekenen het al betaalde bedrag.

rocket_launch

LVL-02

PRO Plan

€399

Wij verzorgen de deployment, domeinconfiguratie en eerste lancering. Geef het aan ons en ontvang een live website zonder de code aan te raken.

  • checkThemaconfiguratie
  • checkInhoud uploaden
  • checkDomein- en hostingconfiguratie
  • checkLanceringsklaarleverantie
edit_note

LVL-03

MAX Plan

€999

Alles van PRO, plus een inhoudsbeheersinterface. Werk pagina's, teksten en afbeeldingen zelf bij — geen code, geen rebuilds, geen FTP.

  • checkAlles van Setup
  • checkCMS-integratie
  • checkVisuele inhoudseditor
  • checkBewerken zonder ontwikkelaar
auto_awesome

LVL-MAX

ULTRA

Quote

Maatwerk pagina's, third-party integraties en een op maat gemaakte beheeroplossing rondom uw specifieke vereisten.

  • checkAangepast paginaontwerp
  • checkAPI-integraties
  • checkMaatwerk beheer
  • checkPremium ondersteuning

Klaar om te upgraden?

Vertel ons op welk plan u zit en naar welk plan u wilt overstappen. Wij regelen de rest.

NEEM CONTACT OP →

FAQ

Kan ik een thema gebruiken voor meerdere klantenprojecten?expand_more

Eén licentie dekt één site. Voor meerdere klantenimplementaties koopt u een Bureaulicentie die onbeperkte productie-installaties toestaat.

Is Layero compatibel met React 19?expand_more

Ja. Alle thema's richten zich op React 19 en Next.js 16 met de App Router. Server Components, Suspense en Streaming worden standaard ondersteund.

Hoe werk ik de themakleuren bij?expand_more

Ga naar app/globals.css en wijzig de aangepaste CSS-eigenschappen in het @theme-blok. Elk kleurtoken wordt automatisch doorgegeven aan alle componenten.

Kan ik een aangepaste API integreren?expand_more

Absoluut. Maak route handlers aan in app/api/ of gebruik Server Components met fetch() voor gegevensophaling aan de serverzijde. De architectuur is API-agnostisch.

Nog hulp nodig?

Ons team is beschikbaar voor technische ondersteuning en upgradevragen. Open een ticket en we reageren binnen 2 uur.

ONDERSTEUNINGSTICKET OPENEN
help_center