Ce qu'est le template
Un site vitrine pour un produit logiciel, avec un produit d'analyse comme exemple. C'est une seule application Next.js, sans base de données ni back end, et rien n'est à configurer avant le premier lancement.
Il comprend une page d'accueil avec un aperçu de tableau de bord en direct dans le hero, une page de tarifs, un blog, une page de contact, des pages de connexion, d'inscription et de mot de passe oublié, quatre pages légales et des pages d'erreur.
Aperçu du site
Technologies utilisées
| Technologie | Son rôle ici |
|---|---|
| Next.js 16 (App Router) | Le framework, les pages, les métadonnées et le serveur de production |
| React 19 et TypeScript | Tous les composants et fichiers source |
| Tailwind CSS 4 | Tout le style |
| next-intl | Les textes en anglais et en arabe, et la langue dans chaque adresse |
| React Hook Form et Zod | Les formulaires et leurs vérifications |
| Framer Motion et GSAP | Les animations |
| Recharts, dnd-kit et Embla | Les graphiques de l'aperçu du tableau de bord, ses cartes déplaçables et les carrousels |
| Tabler Icons | Les icônes |
Chaque dépendance est fixée à une version exacte dans package.json, et yarn.lock est inclus : votre installation obtient donc les mêmes versions que celles avec lesquelles le template a été testé.
Contenu du téléchargement
Le ZIP s'extrait dans un dossier nommé Nextjs-landing-page-template-2 :
| Chemin | Description |
|---|---|
src/ | L'application : les pages, leurs sections, l'en-tête et le pied de page, l'aperçu du tableau de bord et la configuration des langues |
messages/ | Tous les textes visibles, en anglais et en arabe |
public/ | Les images, les fichiers de la police Clash Display et l'image de partage social |
Dockerfile, .dockerignore | Construit le site dans une image qui le sert sur le port 3030 |
.env.example | Les paramètres optionnels, avec leurs valeurs par défaut |
README.md | Le guide d'installation et de personnalisation |
LICENSE.md | Votre licence commerciale |
package.json, yarn.lock, .yarnrc.yml | Les dépendances et la configuration de Yarn 4 |
À savoir avant de construire dessus
- Les formulaires vérifient ce que saisissent les visiteurs, mais n'envoient rien tant que vous ne les reliez pas à votre propre service.
- Le site est sombre. Il est livré avec quatre thèmes de couleurs, et vous en choisissez un en une seule ligne.
- Les textes, chiffres, personnes, logos et articles de blog sont des contenus d'exemple à remplacer. Les pages légales sont aussi des textes d'exemple.
Le site est livré en anglais et en arabe. Chaque adresse commence par sa langue, par exemple /en/pricing ou /ar/pricing, et les pages en arabe s'affichent de droite à gauche.
Sous Windows, utilisez PowerShell ou Git Bash pour les commandes de ces guides.