Come costruire una landing page modulare in Next.js
Innanzitutto, capirai cos'è una landing page. Poi, vedrai le sezioni che ogni landing page dovrebbe contenere. Infine, imparerai a costruire una landing page modulare in Next.js. Non sprechiamo ulteriore tempo e partiamo!
Che cos’è una Landing Page?
Una landing page è una pagina web nella quale i visitatori "atterrano" dopo aver cliccato su un link proveniente da e-mail, annuncio pubblicitario, post sui social o altro. Di solito, queste pagine sono create per una campagna di marketing con uno obiettivo specifico in mente.
Nel dettaglio, Gartner definisce una landing page come «una pagina web mirata a una specifica strategia di marketing. Gli utenti vengono in genere indirizzati alla landing page tramite un risultato di ricerca SEO, un'e-mail di marketing o un post sui social media».
Quindi, mentre le pagine web generiche incoraggiano generalmente l'esplorazione e possono avere molti obiettivi, le landing page si concentrano su un solo obiettivo di marketing. Questo obiettivo è noto anche come CTA (Call To Action), un termine di marketing utilizzato per definire un elemento grafico ideata per sollecitare un'azione da parte dell'utente.
In altre parole, gli utenti che raggiungono la tua landing page sono incoraggiati a compiere un'azione. Per esempio, questa azione può essere l’acquisto di un prodotto, il download di un documento o l’iscrizione alla tua newsletter. Una landing page ha successo se molti utenti compiono l'azione per cui è stata progettata.
Ora vediamo quali elementi una buona landing page dovrebbe avere.
Quali elementi deve includere una landing page?
La ricetta per una buona landing page è semplice. Vediamo ora le sezioni che una landing page dovrebbe avere per essere efficace.
1. Un header ben visibile
Generalmente, la sezione “header” di una landing page include una barra di navigazione (d'ora in poi navbar) contenente i link alle altre sezioni incluse nella pagina. Il suo scopo è quello di aiutare il visitatore a navigare la landing page. I link contenuti nell'intestazione devono essere anchor link, ovvero link interni a sezioni della pagina. Non si vuole infatti che i visitatori abbandonino la pagina.
L’header dovrebbe anche includere anche il tuo logo.
2. Una sezione hero che colpisce
La sezione “hero” è la prima cosa che gli utenti vedono quando arrivano sulla tua landing page. In altre parole, rappresenta l'area che va dall'intestazione alla sezione successiva ed è generalmente progettata per occupare l'intero spazio verticale e orizzontale dello schermo. Il suo obiettivo è quello di impressionare il visitatore con il suo design e i suoi colori e di condurlo alla sezione successiva della landing page, quella che contiene la CTA.
3. Una sezione dedicata alla CTA
Questo è l’elmento più importante di una landing page e l'unico veramente obbligatorio. È qui che si vuole guidare il visitatore affinché compia l'azione per cui la landing page è stata progettata. La sezione CTA può essere un elenco di prodotti, una form o un link per il download.
4. Una sezione "Su di noi"
Una sezione opzionale per spiegare meglio di cosa tratta la landing page, chi siete o cosa fate.
Una piccola sezione che di solito include i link all'informativa sulla privacy o qualsiasi informazione obbligatoria per motivi di GDPR.
Come costruire una landing page in Next.js
Scopriamo quindi come costruire una landing page modulare facilmente adattabile a diversi obiettivi in Next.js. Nel seguente tutorial imparerai a costruire una landing page efficace interamente progettata con Bootstrap.
Prerequisiti
Ecco l'elenco dei prerequisiti richiesti per costruire la landing page:
- Node.js 12+ e npm 8.0+
- Next.js >= 12.x
- React >= 18.x
- Bootstrap >= 5.x
- React Bootstrap >= 2.x
Implementazione di una landing page in Next.js con Bootstrap
Potete clonare la repo GitHub a supporto dell'articolo e dare un'occhiata in locale alla landing page lanciando i seguenti comandi:
Visitate poi la pagina "http://localhost:3000" nel browser per vedere la landing page in azione.
Altrimenti, continua a seguire questo tutorial e impara a costruire la landing page passo passo.
1. Inizializzare un progetto in Next.js
Il modo migliore per inizializzare un progetto Next.js vuoto è tramite Create Next App. Questo è lo strumento ufficialmente consigliatoper inizializzare un'applicazione in Next.js. Potete inizializzare un progetto chiamato `landing-page-template-nextjs` lanciando il seguente comando:
La cartella "landing-page-template-nextjs" dovrebbe ora contenere i seguenti file:
Ora, entra nella cartella "landing-page-template-nextjs" e lanciate il server locale eseguendo questi due comandi:
Visitando "http://localhost:3000/" nel browser, dovresti essere in grado di vedere la pagina predefinita di Create Next App:
2. Implementare i componenti della landing page
Per prima cosa, aggiungi le dipendenze necessarie. È possibile aggiungere "bootstrap" e "react-bootstrap" alle dipendenze del tuo progetto con il seguente comando:
Approfondiamo ora come implementare ciascuno dei componenti richiesti da una landing page.
Header
Hero
Notate che il pulsante "Scopri di più" conduce alla sezione CTA sottostante. Questo è ciò che dovrebbe fare una sezione “hero”.
Services
In questo esempio la sezione CTA è rappresentata dalla segue lista di servizi:
L'elenco dei servizi viene passato come oggetto nelle "props". In questo modo, i servizi da visualizzare non sono codificati nel componente, rendendolo più dinamico. Infatti, è possibile recuperare questo elenco da un'API, ad esempio.
In questo modo, cambiando il contenuto del servizio nella piattaforma di gestione dei contenuti, la landing page si aggiornerà di conseguenza.
Ecco come appare il componente "Service" referenziato in "Services":
In questo esempio, i pulsanti "Provalo subito!" rappresentano le CTA, ovvero ciò verso cui gli utenti sono indotti a cliccare.
About
La sezione qui sopra è del tutto facoltativa e può essere omessa completamente nella tua landing page.
Footer
Analogamente a quanto spiegato per il componente "Servizi", il contenuto del componente "About" dipende dalle "props" e può essere aggiornato dinamicamente a piacere.
3. Mettere tutto insieme
Vediamo ora come utilizzare i componenti implementati sopra per costruire la tua landing page. Crea un file "index.js" nella cartella "/pages" e definiscilo come segue:
Come puoi vedere, tutto ciò che occorre per costruire una landing page è utilizzare i componenti presentati sopra, uno sotto l'altro.
Ci siamo! La tua landing page è pronta per essere distribuita.
Landing page modulari con DatoCMS secondo Cantiere Creativo
Dal momento che le landing page si basano tutte sulla stessa ricetta, la soluzione ideale è quella di definire un template che funzioni e adattarlo di volta in volta in base alle proprie esigenze. Questo è qualcosa che solo un costruttore di landing page modulari può fornirvi. Ecco per cui in Cantiere Creativo ci affidiamo a DatoCMS.
DatoCMS è un CMS headless dotato di funzionalità avanzate progettate per sviluppatori e marketer. Nel dettaglio, DatoCMS consente di definire componenti riutilizzabili che possono essere utilizzati per creare template modulari per landing page.
Con DatoCMS il team di marketing può creare un template di una landing page, collegarlo a un progetto frontend e duplicarlo all'infinito. Ciò significa che DatoCMS ti permette di basare pagine web diverse sullo stesso template. Inoltre, DatoCMS ti offre anche la possibilità di cambiare colori, lingua, testo e molto altro, così da rendere ogni pagina unica.
Progettare una nuova landing page da zero per ogni nuova campagna di marketing richiede tempo e denaro. Ecco perchè consigliamo un costruttore di landing page che segua un approccio basato su moduli configurabili codificati in un template come DatoCMS.
Conclusioni
In questo articolo, hai imparato cosa è una landing page, quali elementi deve contenere e come implementarne una di successo in Next.js. Anche se per ottenere questo risultato sono bastate poche righe di codice, si tratta di un'operazione che presenta alcune insidie. Quindi, se siete alla ricerca di una soluzione più scalabile e affidabile, dovreste considerare l'adozione di un CMS avanzato per creare e distribuire landing page modulari in modo facile, proprio come DatoCMS.
Grazie per aver seguito il tutorial! Speriamo che questo articolo ti sia stato utile. Se oltre alla struttura sei curioso di sapere come scriviamo i contenuti, abbiamo una risorsa pensata per te. Abbiamo scritto anche una breve guida per Sentiti libero di contattarci qui per qualsiasi domanda, commento o suggerimento.
