terminalGETTING_STARTED_v1.0

Introduction

Layero est un marketplace de thèmes Next.js conçus avec précision pour des sites web haute performance. Chaque thème est livré prêt pour la production — TypeScript, Tailwind CSS, SEO et connecteurs CMS inclus.

codeSTART (Thème uniquement) est pour

  • checkDéveloppeurs
  • checkFreelances
  • checkAgences
  • checkUtilisateurs techniques autonomes

support_agentPas technique ?

Pas de problème. Nos plans gérés s'occupent de tout — de l'installation au lancement et à la modification du contenu.

PRO Plannous gérons le déploiement pour vous

MAX Plandéploiement + interface modifiable

ULTRAsolution entièrement sur mesure

01. Acheter

Choisissez un thème et sélectionnez votre plan — START, PRO ou MAX.

02. Configurer

Clonez le dépôt, installez les dépendances et définissez vos variables d'environnement dans .env.local.

03. Personnaliser

Modifiez le contenu dans le dossier data/, remplacez les images et ajustez les tokens du thème Tailwind.

04. Déployer

Publiez sur Vercel, Netlify, ou uploadez un build statique vers votre hébergement Apache / cPanel.

PRÉREQUIS

Node.js ≥ 18.17, npm ≥ 9 ou pnpm ≥ 8. Git est requis pour cloner et suivre votre projet.

Installation

Après l'achat, vous recevrez un accès au dépôt source de votre thème. Suivez les étapes ci-dessous pour initialiser votre environnement local.

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

Ouvrez http://localhost:3000 pour voir votre thème fonctionner en local.

VARIABLES D'ENVIRONNEMENT

Modifiez .env.local avec vos identifiants avant de lancer :

# 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

Structure des fichiers

Tous les thèmes Layero suivent une structure de répertoires cohérente basée sur les conventions Next.js App Router.

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

Nom de l'entreprise, téléphone, email, adresse, horaires et statistiques globales du site. Le premier fichier à ouvrir après l'achat du thème.

data/

Tout le contenu modifiable réparti dans des fichiers TypeScript ciblés. Chaque thème documente ses propres fichiers de données dans son README — ouvrez-le pour la liste complète.

app/globals.css

Bloc @theme de Tailwind contenant tous les design tokens — couleurs, échelles typographiques, espacements et border radius.

tailwind.config.ts

Étendez ou surchargez les utilitaires Tailwind. Ajoutez des plugins personnalisés comme Tailwind Typography ou Forms ici.

components/

Composants réutilisables partagés entre les pages (Navbar, Footer, primitives UI). Évitez de dupliquer la logique ailleurs.

Déploiement

Server infrastructure visualization

Options d'hébergement recommandées

Les thèmes Layero fonctionnent avec n'importe quel hébergeur moderne. Voici les trois options les plus courantes — choisissez celle qui convient à votre workflow.

1. Déployer sur Vercel

Le chemin le plus simple. Publiez votre dépôt sur GitHub, importez-le dans le tableau de bord Vercel et vous êtes en ligne en quelques minutes. Chaque push futur déclenche un redéploiement automatique.

npx vercel --prod

2. Déployer sur Netlify

Connectez votre dépôt GitHub dans le tableau de bord Netlify. Définissez la commande de build sur npm run build et le répertoire de publication sur .next. Chaque push reconstruit automatiquement.

npx netlify deploy --prod
dns

3. Hébergement traditionnel (Apache / cPanel)

Si votre thème supporte l'export statique, vous pouvez l'héberger sur n'importe quel serveur Apache ou cPanel standard — sans Node.js. Adapté aux sites vitrine et portfolios.

01

Activer l'export statique

Vérifiez dans le README du thème que l'export statique est supporté. Dans next.config.ts, output doit être défini sur 'export'.

02

Générer les fichiers statiques

Lancez npm run build. Next.js génère un dossier out/ contenant du HTML, CSS et JS — aucun serveur nécessaire.

03

Uploader via FTP

Utilisez un client FTP (FileZilla, Cyberduck) ou le gestionnaire de fichiers de votre hébergeur pour uploader le contenu de out/ dans votre dossier public_html.

04

Mise en ligne

Votre site est maintenant en ligne comme un site statique standard. Aucun processus Node.js, aucune configuration serveur requise.

npm run build # generates the out/ folder

CONSEIL PRO

Vercel et Netlify sont les choix recommandés pour la plupart des utilisateurs — configuration zéro, SSL automatique et redéploiement instantané à chaque push. Utilisez Apache si vous avez déjà un plan d'hébergement partagé et souhaitez minimiser les coûts.

Modifier le contenu

Tout le contenu visible par l'utilisateur est réparti dans des fichiers TypeScript ciblés dans le dossier data/ à la racine du projet. Vous ne devriez pas avoir besoin de toucher les fichiers de page individuels pour des modifications de base.

FichierCe qu'il gère
data/site.tsNom de l'entreprise, téléphone, email, adresse, horaires, statistiques
data/services.tsServices / domaines d'activité / éléments de menu
data/team.tsProfils des membres de l'équipe
data/testimonials.tsTémoignages (le cas échéant)
data/navigation.tsLiens de navigation

Consultez le README de votre thème pour la liste complète des fichiers de données et leur structure exacte — elle varie selon les thèmes.

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", };

Après l'enregistrement du fichier, le serveur de développement se recharge instantanément. En production, un nouveau build est nécessaire pour appliquer les modifications.

Comment fonctionnent les mises à jour de contenu

Le processus de mise à jour dépend de l'endroit où votre site est hébergé. Voici ce qu'attendre sur chaque plateforme.

cloud

Vercel

  1. 01Modifiez les fichiers concernés dans le dossier data/ de votre thème
  2. 02Commitez et poussez sur votre dépôt
  3. 03Vercel reconstruit et redéploie automatiquement

Workflow le plus rapide — les modifications sont en ligne en moins d'une minute.

bolt

Netlify

  1. 01Modifiez les fichiers concernés dans le dossier data/ de votre thème
  2. 02Commitez et poussez sur votre dépôt
  3. 03Netlify reconstruit et redéploie automatiquement

Identique à Vercel — push pour déployer.

dns

Apache / Static

  1. 01Modifiez les fichiers concernés dans le dossier data/ de votre thème en local
  2. 02Lancez npm run build pour générer de nouveaux fichiers statiques
  3. 03Uploadez le nouveau dossier out/ via FTP

Nécessite un accès au code source et un client FTP à chaque fois.

VOUS VOULEZ ÉVITER LE REBUILD ?

Passez au plan MAX et modifiez votre contenu via une interface visuelle — pas de code, pas de terminal, pas de FTP requis.

Remplacer les images

Toutes les images de substitution sont chargées depuis des URL externes. Remplacez-les par vos propres assets dans public/images/ ou via la médiathèque de votre CMS.

01

Ajoutez vos images

Déposez les fichiers dans public/images/. Formats acceptés : WebP, AVIF, PNG, JPG. Visez le WebP à 80% de qualité pour les meilleures performances.

02

Mettez à jour le chemin source

Dans le fichier page ou data concerné, remplacez la chaîne URL par /images/your-file.webp. Next.js Image gère l'optimisation automatiquement.

03

Définissez la largeur et la hauteur

Si vous utilisez le composant Next.js Image, fournissez les dimensions intrinsèques pour éviter le décalage de mise en page (CLS). Omettez-les en mode fill.

TAILLES D'IMAGES

Images hero : 1920×1080 px. Miniatures de cartes : 800×600 px. Avatars/logos : 400×400 px. Exportez toujours en 2× pour les écrans retina.

CMS Ready

Les thèmes Layero sont livrés avec des adaptateurs optionnels pour les trois plateformes CMS headless les plus populaires. Connectez celle qui convient à votre workflow.

edit_square

Sanity

Édition collaborative en temps réel, langage de requête GROQ, Studio entièrement personnalisable.

dns

Strapi

Auto-hébergé, open source. Contrôle total sur vos données et votre infrastructure de déploiement.

api

Payload

CMS Node.js code-first, auto-hébergé. TypeScript natif avec API REST & GraphQL auto-générées.

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

Les thèmes commerce incluent une intégration Stripe préconfigurée. Ajoutez vos clés et votre flux de paiement est prêt.

01

Créez un compte Stripe

Inscrivez-vous sur stripe.com et récupérez votre Publishable Key et Secret Key depuis le tableau de bord Developers.

02

Ajoutez les clés à .env.local

Définissez STRIPE_SECRET_KEY et NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY dans votre fichier .env.local.

03

Définissez vos produits

Créez des produits et des price IDs dans le tableau de bord Stripe. Collez les price_xxx IDs dans votre fichier de données produits.

04

Testez avec Stripe CLI

Transférez les webhooks vers votre serveur local pour tester le flux de paiement avant la mise en ligne.

SÉCURITÉ DES WEBHOOKS

Vérifiez toujours les signatures des webhooks avec stripe.webhooks.constructEvent(). Ne faites jamais confiance aux données d'un payload webhook sans vérification.

Changer de plan

Déjà sur START ? Vous pouvez passer à un niveau supérieur à tout moment — contactez-nous et nous appliquerons un crédit pour ce que vous avez déjà payé.

rocket_launch

LVL-02

PRO Plan

€399

Nous gérons le déploiement, la configuration du domaine et le premier lancement. Confiez-le nous et obtenez un site en ligne sans toucher au code.

  • checkConfiguration du thème
  • checkChargement du contenu
  • checkConfiguration domaine & hébergement
  • checkLivraison prête au lancement
edit_note

LVL-03

MAX Plan

€999

Tout ce que contient PRO, plus une interface de gestion de contenu. Mettez à jour pages, textes et images vous-même — pas de code, pas de rebuild, pas de FTP.

  • checkTout de Setup
  • checkIntégration CMS
  • checkÉditeur de contenu visuel
  • checkModification sans développeur
auto_awesome

LVL-MAX

ULTRA

Quote

Pages sur mesure, intégrations tierces et une solution de gestion personnalisée autour de vos besoins spécifiques.

  • checkDesign de pages personnalisé
  • checkIntégrations API
  • checkGestion sur mesure
  • checkSupport premium

Prêt à évoluer ?

Dites-nous sur quel plan vous êtes et vers lequel vous souhaitez passer. Nous nous en occupons.

PARLEZ-NOUS →

FAQ

Puis-je utiliser un thème pour plusieurs projets clients ?expand_more

Une seule licence couvre un site. Pour plusieurs déploiements clients, achetez une Licence Agence qui permet des installations en production illimitées.

Layero est-il compatible avec React 19 ?expand_more

Oui. Tous les thèmes ciblent React 19 et Next.js 16 avec l'App Router. Server Components, Suspense et Streaming sont supportés par défaut.

Comment mettre à jour les couleurs du thème ?expand_more

Allez dans app/globals.css et modifiez les propriétés CSS personnalisées dans le bloc @theme. Chaque token de couleur se propage automatiquement à tous les composants.

Puis-je intégrer une API personnalisée ?expand_more

Absolument. Créez des route handlers dans app/api/ ou utilisez des Server Components avec fetch() pour la récupération de données côté serveur. L'architecture est API-agnostique.

Besoin d'aide supplémentaire ?

Notre équipe est disponible pour le support technique et les questions de montée en gamme. Ouvrez un ticket et nous répondrons dans les 2 heures.

OUVRIR UN TICKET DE SUPPORT
help_center