Next JS Landing Page Starter Template Download - Next JS Landing Page Starter Template Quellcode Download

Next JS Landing Page Starter Template

AI-Quellcode

1.0.0

Herunterladen

Landing Page -Vorlage, erstellt mit dem nächsten JS 14+, dem Tailwind CSS 3 und dem Typenkript

Nächstes JS Starter Banner

Zielseitenthema, geschrieben in Next.js, Tailwind CSS und Typenkript ⚡️ Mit Entwicklererfahrung zuerst hergestellt: Next.js, TypeScript, Eslint, Schöner, Husky, Lint-State, VSCode, Netlify, Postcss, Tailwind CSS.

Klonen Sie dieses Projekt und verwenden Sie es, um Ihr eigenes Next.js -Projekt zu erstellen. Sie können eine nächste JS -Vorlagen -Demo überprüfen.

Sponsoren



Fügen Sie hier Ihr Logo hinzu

DEMO

NextJS Landing Page Vorlage Screenshot

Schauen Sie sich unsere Live -Demo an.

Merkmale

Entwicklererfahrung zuerst:

Weiter.js für statische Site Generator
? Integrieren Sie sich in CSS mit Rückenwind
? Postcs für die Verarbeitung von Rückenwind-CSS und in styled-jsx integriert
? Geben Sie das Checking typeScript ein
✅ Strikter Modus für Typscript und React 18
✏️ Linter mit Eslint (Standard -NextJS, NextJS Core Web Vitals und Airbnb -Konfiguration)
? Codeformatierer mit hübscher
? Ehemann für Git -Haken
Lint-stetig zum Ausführen von Lintern auf Git-inszenierten Dateien
? VSCODE -Konfiguration: Debug, Einstellungen, Aufgaben und Erweiterungen für Postcss, Eslint, schöner, TypeScript
? SEO-Metadaten, JSON-LD und Open Graph Tags mit dem nächsten SEO
Bundler -Analysator
? Euen Klick -Bereitstellung mit Netlify (oder manuelle Bereitstellung zu Hosting -Diensten)
? Fügen Sie ein kostenloses Thema ein
? Maximieren Sie die Leuchtturmbewertung

Integrierte Funktion von Next.js:

☕ HTML & CSS minifieren
? Live Reload
✅ Cache Busting

Enthaltene Komponenten

Navillat
Held
Merkmale
CTA -Banner
Fußzeile

Weitere Komponenten finden Sie in unseren Premium NextJS -Themen.

Philosophie

Minimaler Code
SEO-freundlich
Produktionsbereit

Anforderungen

Node.js und npm

Erste Schritte

Führen Sie den folgenden Befehl in Ihrer lokalen Umgebung aus:

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

Anschließend können Sie im Entwicklungsmodus mit Live -Reload lokal laufen:

 npm run dev

Öffnen Sie http: // localhost: 3000 mit Ihrem bevorzugten Browser, um Ihr Projekt zu sehen. Für Ihre Informationen muss sich JS als nächstes Zeit nehmen, um das Projekt zum ersten Mal zu erstellen.

 .
├── 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

Anpassung

Sie können das Thema problemlos konfigurieren. Bitte ändern Sie die folgende Datei:

public/apple-touch-icon.png , public/favicon.ico , public/favicon-16x16.png und public/favicon-32x32.png : Ihr Favicon können Sie von https://favicon.io/favicon-converter/generieren,
src/styles/global.css : Ihre CSS -Datei mit Tailwind CSS
utils/AppConfig.ts : Konfigurationsdatei
src/pages/index.tsx : Die Indexseite des Themas, die die Base verwendet
src/template/Base.tsx : Die Base mithilfe von Komponentenblöcken
src/templates/* : Die Liste der Komponentenblöcke
src/* : Andere Ordner in SRC sind die Atomkomponenten, die von Komponentenblöcken verwendet werden

Hier ist die Ebene:

Der Einstiegspunkt: index.tsx in src/pages
Die Base : Base.tsx in src/templates
Verwenden Sie Komponentenblöcke von src/templates/*
Verwenden Sie Atomkomponenten von src/*

Zur Produktion einsetzen

Sie können die Ergebnisse lokal im Produktionsmodus sehen mit:

 $ npm run build
$ npm run start

Die generierten HTML- und CSS-Dateien werden abgebaut (integrierte Funktionen von Next JS). Es wird auch ungenutzte CSS von Rückenwind -CSS entfernt.

Sie können einen optimierten Produktionsbau erstellen mit:

 npm run build-prod

Jetzt ist Ihr Thema bereit, bereitzustellen. Alle generierten Dateien befinden sich im out -Ordner, den Sie mit jedem Hosting -Dienst bereitstellen können.

Auf netlify bereitstellen

Klonen Sie dieses Repository auf eigenem GitHub -Konto und stellen Sie sie für Netlify bereit:

VSCODE -Informationen (optional)

Wenn Sie VSCODE -Benutzer sind, können Sie eine bessere Integration in VSCODE haben, indem Sie die vorgeschlagene Erweiterung in .vscode/extension.json installieren. Der Startercode erstellt Einstellungen für eine nahtlose Integration in VSCODE. Die Debug -Konfiguration wird auch für Frontend- und Backend -Debugging -Erfahrungen bereitgestellt.

Pro -Tipps: Wenn Sie eine projektbreite Überprüfung mit TypeScript benötigen, können Sie einen Build mit CMD + Shift + B auf dem Mac ausführen.

Beiträge

Jeder ist herzlich eingeladen, zu diesem Projekt beizutragen. Fühlen Sie sich frei, ein Problem zu öffnen, wenn Sie eine Frage haben oder einen Fehler gefunden haben.