Téléchargement Next JS Landing Page Starter Template - Next JS Landing Page Starter Template Téléchargement

Next JS Landing Page Starter Template

Code Source AI

1.0.0

Télécharger

Modèle de page de destination construit avec JS 14+ Next, Tailwind CSS 3 et TypeScript

Next JS Starter Banner

Thème de la page d'atterrissage écrit dans Next.js, Tailwind CSS et TypeScript ⚡️ Fabriqué avec l'expérience du développeur d'abord: Next.js, TypeScript, Eslint, plus joli, husky, mise en scène, VScode, Netlify, PostCSS, Tailwind CSS.

Clone ce projet et utilisez-le pour créer votre propre projet Next.js. Vous pouvez vérifier une démonstration de modèles JS suivante.

Sponsors



Ajoutez votre logo ici

Démo

NextJS Page de destination Template d'écran

Découvrez notre démo en direct.

Caractéristiques

Expérience du développeur en premier:

Next.js pour le générateur de sites statique
? Intégrer au vent arrière CSS
? POSTCSS pour le traitement du vent arrière CSS et intégré à styled-jsx
? Type Vérification TypeScript
✅ Mode strict pour dactylographie et réagir 18
✏️ Linter avec Eslint (NextJS par défaut, NextJS Core Web Vitals et Airbnb Configuration)
? Formateur de code avec plus joli
? Husky pour les crochets git
En place de peluche pour exécuter des liners sur les fichiers mis en scène GIT
? Configuration VScode: débogage, paramètres, tâches et extension pour PostCSS, Eslint, plus jolie, TypeScript
? Métadonnées de référence
Analyseur de bundler
? ️ Un seul déploiement avec Netlify (ou déploiement manuel à tous les services d'hébergement)
? Inclure un thème gratuit
? Maximiser le score du phare

Fonction intégrée de Next.js:

☕ Minify HTML & CSS
? Rechargement en direct
✅ Buste de cache

Composants inclus

Barre navale
Héros
Caractéristiques
Bannière CTA
Pied de page

Trouvez plus de composants dans nos thèmes NextJS premium.

Philosophie

Code minimal
De référencement
Prêt pour la production

Exigences

Node.js et NPM

Commencer

Exécutez la commande suivante sur votre environnement local:

 git clone --depth=1 https://github.com/ixartz/Next-JS-Landing-Page-Starter-Template.git my-project-name
cd my-project-name
npm install

Ensuite, vous pouvez fonctionner localement en mode développement avec un rechargement en direct:

 npm run dev

Ouvrez http: // localhost: 3000 avec votre navigateur préféré pour voir votre projet. Pour vos informations, le prochain JS doit prendre le temps de compiler le projet pour la première fois.

 .
├── README.md            # README file
├── next.config.js       # Next JS configuration
├── public               # Public folder
│   └── assets
│       └── images       # Image used by default template
├── src
│   ├── background       # Atomic background component
│   ├── button           # Atomic button component
│   ├── cta              # Atomic cta component
│   ├── feature          # Atomic feature component
│   ├── footer           # Atomic footer component
│   ├── hero             # Atomic hero component
│   ├── layout           # Atomic layout component
│   ├── navigation       # Atomic navigation component
│   ├── pages            # Next JS pages
│   ├── styles           # PostCSS style folder with Tailwind
│   ├── templates        # Default template
│   └── utils            # Utility folder
├── tailwind.config.js   # Tailwind CSS configuration
└── tsconfig.json        # TypeScript configuration

Personnalisation

Vous pouvez facilement configurer le thème. Veuillez modifier le fichier suivant:

public/apple-touch-icon.png , public/favicon.ico , public/favicon-16x16.png et public/favicon-32x32.png : Votre favicon, vous pouvez générer à partir de https://favicon.io/favicon-converter/
src/styles/global.css : votre fichier CSS à l'aide de tailwind CSS
utils/AppConfig.ts : fichier de configuration
src/pages/index.tsx : la page d'index du thème qui utilise le composant Base
src/template/Base.tsx : le composant Base à l'aide de blocs de composants
src/templates/* : la liste des blocs de composants
src/* : les autres dossiers de SRC sont les composants atomiques utilisés par les blocs de composants

Voici la couche:

Le point d'entrée: index.tsx en src/pages
le modèle Base : Base.tsx dans src/templates
Utilisez des blocs de composants de src/templates/*
Utilisez des composants atomiques de src/*

Déploier à la production

Vous pouvez voir les résultats localement en mode de production avec:

 $ npm run build
$ npm run start

Les fichiers HTML et CSS générés sont minifiés (fonction intégrée de Next JS). Il a également supprimé le CSS inutilisé du vent arrière CSS.

Vous pouvez créer une construction de production optimisée avec:

 npm run build-prod

Maintenant, votre thème est prêt à être déployé. Tous les fichiers générés sont situés dans le dossier out , que vous pouvez déployer avec n'importe quel service d'hébergement.

Déploier sur netlify

Clone ce référentiel sur son propre compte GitHub et déployer sur netlify:

Informations VScode (facultative)

Si vous êtes des utilisateurs de VScode, vous pouvez avoir une meilleure intégration avec VScode en installant l'extension suggérée dans .vscode/extension.json . Le code de démarrage propose des paramètres pour une intégration transparente avec VScode. La configuration de débogage est également fournie pour l'expérience de débogage du frontend et du backend.

Conseils de pro: Si vous avez besoin d'un type de projet à l'échelle de la vérification avec TypeScript, vous pouvez exécuter une version avec CMD + Shift + B sur Mac.