Next JS Boilerplate: Boilerplate für Next.js und Tailwind CSS.

Boilerplate und Starter für Next JS 12+, Tailwind CSS 3 und TypeScript

Boilerplate und Starter für Next.js, Tailwind CSS und TypeScript ⚡️ Zuerst mit Entwicklererfahrung erstellt: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, 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 Next js-Vorlagen-Demo überprüfen.

Merkmale

Entwicklererfahrung zuerst:

• Next.js für den Static Site Generator
• Integration mit Tailwind CSS
• PostCSS zur Verarbeitung von Tailwind CSS und integriert in |_+_|
• Typprüfung von TypeScript
• ✅ Strikter Modus für TypeScript und React 17
• ✏️ Linter mit ESLint (Standard NextJS, NextJS Core Web Vitals, Tailwind CSS und Airbnb-Konfiguration)
• Absolute Importe
• Code-Formatierer mit Prettier
• 🦊 Husky für Git-Hooks
• Lint-staged zum Ausführen von Linters auf Git-staged-Dateien
• VSCode-Konfiguration: Debug, Einstellungen, Aufgaben und Erweiterung für PostCSS, ESLint, Prettier, TypeScript
• 🤖 SEO-Metadaten, JSON-LD- und Open-Graph-Tags mit Next SEO
• ⚙️ Bundler-Analysator
• ️ Ein-Klick-Bereitstellung mit Vercel oder Netlify (oder manuelle Bereitstellung für beliebige Hosting-Dienste)
• Fügen Sie ein KOSTENLOSES minimalistisches Thema hinzu
• Maximieren Sie den Leuchtturm-Score

Integrierte Funktion von Next.js:

CSS-Anzeige: Block vs. Inline

• ☕ Minimiere HTML & CSS
• Live-Neuladen
• ✅ Cache-Busting

Philosophie

• Minimaler Code
• SEO-freundlich
• Produktionsreif

Nextless.js SaaS-Boilerplate

Erstellen Sie Ihr SaaS-Produkt schneller mit React SaaS Boilerplate.

Premium-Themen

Weitere Nextjs-Designs finden.

Anforderungen

• Node.js 14+ und npm

Einstieg

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

Dann können Sie lokal im Entwicklungsmodus mit Live-Neuladen ausführen:

Öffnen Sie http://localhost:3000 mit Ihrem bevorzugten Browser, um Ihr Projekt anzuzeigen.

wie bekomme ich einen aktivierungscode für netflix

Anpassung

Sie können Next js Boilerplate ganz einfach konfigurieren. Bitte ändern Sie die folgende Datei:

• |_+_|, |_+_|, |_+_| und |_+_|: Ihr Website-Favicon, das Sie von https://favicon.io/favicon-converter/ generieren können
• |_+_|: Ihre CSS-Datei mit Tailwind CSS
• |_+_|: Konfigurationsdatei
• |_+_|: Standardthema

In der Produktion bereitstellen

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

Die generierten HTML- und CSS-Dateien werden minimiert (integrierte Funktion von Next js). Außerdem wird unbenutztes CSS aus Tailwind CSS entfernt.

Sie können einen optimierten Produktionsaufbau erstellen mit:

Typoskript-Projekte für Anfänger

Jetzt kann Ihr Blog bereitgestellt werden. Alle generierten Dateien befinden sich unter |_+_| Ordner, den Sie mit jedem Hostingdienst bereitstellen können.

Bereitstellen auf Netlify

Klonen Sie dieses Repository auf Ihrem eigenen GitHub-Konto und stellen Sie es auf Netlify bereit:

Bereitstellung auf Vercel

Stellen Sie dieses Next JS Boilerplate mit einem Klick auf Vercel bereit:

VSCode-Informationen (optional)

Wenn Sie VSCode-Benutzer sind, können Sie eine bessere Integration mit VSCode erreichen, indem Sie die vorgeschlagene Erweiterung in |_+_| installieren. Der Startcode enthält Einstellungen für eine nahtlose Integration mit VSCode. Die Debug-Konfiguration wird auch für das Front-End- und Back-End-Debugging bereitgestellt.

Profi-Tipps: Wenn Sie eine projektweite Typprüfung mit TypeScript benötigen, können Sie einen Build mit Cmd + Shift + B auf dem Mac ausführen.

aol .com-Mail-Login

Beiträge

Jeder ist willkommen, sich an diesem Projekt zu beteiligen. Fühlen Sie sich frei, ein Problem zu öffnen, wenn Sie Fragen haben oder einen Fehler gefunden haben.

Autor: Ixartz
Quellcode: https://github.com/ixartz/Next-js-Boilerplate
Lizenz: MIT-Lizenz

#Rückenwindcss #next #nextjs