terminalGETTING_STARTED_v1.0

Introduzione

Layero è un marketplace di temi Next.js costruiti con precisione, pensati per siti web ad alte prestazioni. Ogni tema viene fornito pronto per la produzione — con TypeScript, Tailwind CSS, SEO e connettori CMS inclusi.

codeSTART (Solo Tema) è per

  • checkSviluppatori
  • checkFreelancer
  • checkAgenzie
  • checkUtenti tecnici autonomi

support_agentNon sei tecnico?

Nessun problema. I nostri piani gestiti si occupano di tutto — dall'installazione al lancio e alla modifica dei contenuti.

PRO Planci occupiamo del deploy al posto tuo

MAX Plandeploy + interfaccia modificabile

ULTRAsoluzione completamente su misura

01. Acquista

Scegli un tema e seleziona il tuo piano — START, PRO o MAX.

02. Configura

Clona il repository, installa le dipendenze e imposta le variabili d'ambiente in .env.local.

03. Personalizza

Modifica i contenuti nella cartella data/, sostituisci le immagini e regola i token del tema Tailwind.

04. Deploy

Pubblica su Vercel, Netlify, o carica una build statica sul tuo hosting Apache / cPanel.

REQUISITI

Node.js ≥ 18.17, npm ≥ 9 oppure pnpm ≥ 8. Git è necessario per clonare e gestire il progetto.

Installazione

Dopo l'acquisto, riceverai accesso al repository sorgente del tema. Segui i passaggi per inizializzare l'ambiente locale.

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

Apri http://localhost:3000 per vedere il tema in esecuzione in locale.

VARIABILI D'AMBIENTE

Modifica .env.local con le tue credenziali prima di avviare:

# 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

Struttura File

Tutti i temi Layero seguono una struttura di directory coerente basata sulle convenzioni di 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

Nome aziendale, telefono, email, indirizzo, orari e statistiche globali del sito. Il primo file da aprire dopo l'acquisto del tema.

data/

Tutti i contenuti modificabili suddivisi in file TypeScript focalizzati. Ogni tema documenta i propri file nella sua README — aprila per la lista completa.

app/globals.css

Blocco @theme di Tailwind contenente tutti i design token — colori, scale tipografiche, spaziatura e border radius.

tailwind.config.ts

Estendi o sovrascrivi le utility Tailwind. Aggiungi plugin personalizzati come Tailwind Typography o Forms qui.

components/

Componenti riutilizzabili condivisi tra le pagine (Navbar, Footer, primitivi UI). Evita di duplicare la logica altrove.

Deploy

Server infrastructure visualization

Opzioni di Hosting Consigliate

I temi Layero funzionano con qualsiasi provider di hosting moderno. Di seguito le tre opzioni più comuni — scegli quella adatta al tuo flusso di lavoro.

1. Deploy su Vercel

Il percorso più semplice. Pubblica il tuo repo su GitHub, importalo nella dashboard Vercel ed è online in pochi minuti. Ogni push successivo attiva un redeploy automatico.

npx vercel --prod

2. Deploy su Netlify

Connetti il tuo repository GitHub nella dashboard di Netlify. Imposta il build command su npm run build e la publish directory su .next. Ogni push ricostruisce automaticamente.

npx netlify deploy --prod
dns

3. Hosting Tradizionale (Apache / cPanel)

Se il tema supporta l'esportazione statica, puoi ospitarlo su qualsiasi server Apache o cPanel standard — senza Node.js. Adatto a siti vetrina e portfolio.

01

Abilita l'esportazione statica

Verifica nella README del tema che l'export statico sia supportato. In next.config.ts, output deve essere impostato su 'export'.

02

Genera i file statici

Esegui npm run build. Next.js genera una cartella out/ con HTML, CSS e JS — nessun server necessario.

03

Carica via FTP

Usa un client FTP (FileZilla, Cyberduck) o il file manager del pannello di controllo per caricare il contenuto di out/ nella cartella public_html.

04

Vai online

Il tuo sito è ora live come sito statico standard. Nessun processo Node.js, nessuna configurazione server richiesta.

npm run build # generates the out/ folder

CONSIGLIO PRO

Vercel e Netlify sono le scelte consigliate per la maggior parte degli utenti — configurazione zero, SSL automatico e rideploy istantaneo ad ogni push. Usa Apache se hai già un piano di hosting condiviso e vuoi ridurre i costi.

Modifica Contenuti

Tutti i contenuti visibili all'utente sono suddivisi in file TypeScript focalizzati nella cartella data/ alla radice del progetto. Per modifiche di base non è necessario toccare i file delle singole pagine.

FileCosa gestisce
data/site.tsNome aziendale, telefono, email, indirizzo, orari, statistiche
data/services.tsServizi / aree di competenza / voci di menu
data/team.tsProfili dei membri del team
data/testimonials.tsTestimonianze (dove applicabile)
data/navigation.tsLink di navigazione

Consulta la README del tuo tema per la lista completa dei file data e la loro struttura — varia da tema a tema.

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

Dopo aver salvato il file, il server di sviluppo si aggiorna istantaneamente. In produzione è necessaria una nuova build per applicare le modifiche.

Come funzionano gli aggiornamenti dei contenuti

Il processo di aggiornamento dipende da dove è ospitato il tuo sito. Ecco cosa aspettarsi su ogni piattaforma.

cloud

Vercel

  1. 01Modifica i file rilevanti nella cartella data/ del tema
  2. 02Esegui il commit e push sul tuo repo
  3. 03Vercel ricostruisce e rideploya automaticamente

Flusso più veloce — le modifiche sono live in meno di un minuto.

bolt

Netlify

  1. 01Modifica i file rilevanti nella cartella data/ del tema
  2. 02Esegui il commit e push sul tuo repo
  3. 03Netlify ricostruisce e rideploya automaticamente

Uguale a Vercel — push per pubblicare.

dns

Apache / Static

  1. 01Modifica i file rilevanti nella cartella data/ del tema in locale
  2. 02Esegui npm run build per generare i nuovi file statici
  3. 03Carica la nuova cartella out/ via FTP

Richiede accesso al codice sorgente e un client FTP ogni volta.

VUOI SALTARE IL REBUILD?

Passa al piano MAX e modifica i contenuti tramite un'interfaccia visiva — nessun codice, nessun terminale, nessun FTP richiesto.

Sostituisci Immagini

Tutte le immagini segnaposto sono caricate da URL esterni. Sostituiscile con i tuoi asset in public/images/ o tramite la libreria media del tuo CMS.

01

Aggiungi le tue immagini

Inserisci i file in public/images/. Formati accettati: WebP, AVIF, PNG, JPG. Punta al WebP all'80% di qualità per le migliori performance.

02

Aggiorna il percorso sorgente

Nel file pagina o data pertinente, sostituisci la stringa URL con /images/your-file.webp. Next.js Image gestisce l'ottimizzazione automaticamente.

03

Imposta larghezza e altezza

Se usi il componente Next.js Image, fornisci le dimensioni intrinseche per evitare il layout shift (CLS). Omettile se usi la modalità fill.

DIMENSIONI IMMAGINI

Immagini hero: 1920×1080 px. Miniature card: 800×600 px. Avatar/logo: 400×400 px. Esporta sempre a 2× per display retina.

CMS Ready

I temi Layero includono adattatori opzionali per le tre piattaforme CMS headless più popolari. Connetti quella che si adatta al tuo flusso di lavoro.

edit_square

Sanity

Modifica collaborativa in tempo reale, linguaggio di query GROQ, Studio completamente personalizzabile.

dns

Strapi

Self-hosted, open source. Controllo totale sui tuoi dati e sull'infrastruttura di deployment.

api

Payload

CMS Node.js code-first, self-hosted. TypeScript nativo con REST & GraphQL APIs auto-generate.

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

I temi con funzionalità commerce includono un'integrazione Stripe preconfigurata. Aggiungi le tue chiavi e il flusso di checkout è pronto.

01

Crea un account Stripe

Registrati su stripe.com e recupera la tua Publishable Key e la Secret Key dalla dashboard Developers.

02

Aggiungi le chiavi a .env.local

Imposta STRIPE_SECRET_KEY e NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY nel tuo file .env.local.

03

Definisci i tuoi prodotti

Crea prodotti e price ID nella dashboard Stripe. Incolla i price_xxx IDs nel tuo file dati prodotti.

04

Testa con Stripe CLI

Inoltra i webhook al tuo server locale per testare il flusso di checkout prima di andare live.

SICUREZZA WEBHOOK

Verifica sempre le firme dei webhook usando stripe.webhooks.constructEvent(). Non fidarti mai dei dati del payload webhook senza verifica.

Piano Superiore

Sei già su START? Puoi passare a un livello superiore in qualsiasi momento — contattaci e applicheremo un credito per quanto hai già pagato.

rocket_launch

LVL-02

PRO Plan

€399

Gestiamo il deployment, la configurazione del dominio e il primo lancio. Affidalo a noi e ottieni un sito live senza toccare il codice.

  • checkConfigurazione tema
  • checkCaricamento contenuti
  • checkSetup dominio e hosting
  • checkConsegna pronta al lancio
edit_note

LVL-03

MAX Plan

€999

Tutto il PRO, più un'interfaccia di gestione contenuti. Aggiorna pagine, testi e immagini da solo — nessun codice, nessun rebuild, nessun FTP.

  • checkTutto di Setup
  • checkIntegrazione CMS
  • checkEditor contenuti visivo
  • checkModifica senza sviluppatore
auto_awesome

LVL-MAX

ULTRA

Quote

Pagine su misura, integrazioni di terze parti e una soluzione di gestione personalizzata attorno alle tue esigenze specifiche.

  • checkDesign pagine personalizzato
  • checkIntegrazioni API
  • checkGestione su misura
  • checkSupporto premium

Pronto per il upgrade?

Dicci su quale piano sei e a quale vuoi passare. Pensiamo noi al resto.

PARLACI →

FAQ

Posso usare un tema per più progetti clienti?expand_more

Una singola licenza copre un sito. Per deployment multipli, acquista una Licenza Agenzia che consente installazioni in produzione illimitate.

Layero è compatibile con React 19?expand_more

Sì. Tutti i temi supportano React 19 e Next.js 16 con App Router. Server Components, Suspense e Streaming sono supportati di default.

Come aggiorno i colori del tema?expand_more

Vai in app/globals.css e modifica le proprietà CSS personalizzate nel blocco @theme. Ogni token colore si propaga automaticamente a tutti i componenti.

Posso integrare un'API personalizzata?expand_more

Assolutamente. Crea route handler in app/api/ o usa Server Components con fetch() per il recupero dati lato server. L'architettura è API-agnostica.

Hai ancora bisogno di aiuto?

Il nostro team è disponibile per supporto tecnico e domande sugli upgrade. Apri un ticket e risponderemo entro 2 ore.

APRI TICKET DI SUPPORTO
help_center