tailnext

Tailnext

TailNext ist eine kostenlose und Open-Source-Vorlage, um Ihre Website mit NextJS + Tailwind CSS zu erstellen. Bereit, ein neues Projekt zu beginnen und unter Berücksichtigung der Best Practices zu konzipiert.

Merkmale

• ✅ Integration mit Rückenwind -CSS, die den Dunklen Modus unterstützen.
• ✅ Produktionsstätte in Lighthouse- und PageSpeed Insights-Berichten.
• ✅ Bildoptimierung und Schriftoptimierung .
• ✅ Schnell und SEO -freundlicher Blog .
• ✅ Generation von Projekts Sitemap und Robots.txt basierend auf Ihren Routen.

Inhaltsverzeichnis

• Demo
• Erste Schritte
  • Projektstruktur
  • Befehle
  • Konfiguration
  • Einsetzen
• Roadmap
• Beitragen
• Anerkennung
• Lizenz

Demo

? https://tailnext.vercel.app/

Erste Schritte

• Klon: git clone https://github.com/onwidget/tailnext.git
• Geben Sie in das Verzeichnis ein: cd tailnext
• Installieren Sie Abhängigkeiten: npm install
• Starten Sie den Entwicklungsserver: npm run dev
• Projekt in der lokalen Umgebung anzeigen: localhost:3000

Projektstruktur

In der TailNext -Vorlage sehen Sie die folgenden Ordner und Dateien:

 /
├── .storybook/
├── app/
│   ├── (blog)
│   │   ├── [slug]
|   |   |   └── page.js
|   |   └── blog
|   |       └── page.js
│   ├── head.js
│   ├── layout.js
│   └── page.js
├── public/
│   └── favicon.svg
├── src/
│   ├── assets/
│   │   ├── images/
|   |   └── styles/
|   |       └── base.css
│   ├── components/
│   │   ├── atoms/
|   |   └── widgets/
|   |       ├── Header.astro
|   |       ├── Footer.astro
|   |       └── ...
│   │── content/
│   |   └── blog/
│   |       ├── demo-post-1.md
│   |       └── ...
│   ├── stories/
│   ├── utils/
│   └── config.mjs
├── package.json
└── ...

Erfahrene Nächste.js Experte? Löschen Sie diese Datei. Aktualisieren Sie config.mjs und Inhalt. Viel Spaß!

Befehle

Alle Befehle werden aus der Wurzel des Projekts aus einem Terminal ausgeführt:

Befehl	Aktion
npm install	Abhängigkeiten installieren
npm run dev	Startet den lokalen Entwickler -Server bei localhost:3000
npm run build	Bauen Sie Ihre Produktionsseite auf ./dist/ auf
npm run preview	Vorschau Ihres Builds lokal vor dem Einsatz
npm run storybook	Öffnen Sie das Storybook, um Geschichten von Widgets anzuzeigen
npm run format	Formatcodes mit schöneren
npm run lint:eslint	Laufen Sie Eslint

Konfiguration

Bald kommen ..

Einsetzen

Bereitstellung für die Produktion (Handbuch)

Sie können einen optimierten Produktionsbau erstellen mit:

npm run build

Jetzt ist Ihre Website bereit, bereitzustellen. Alle generierten Dateien befinden sich im dist -Ordner, mit dem Sie den Ordner für jeden Hosting -Dienst bereitstellen können, den Sie bevorzugen.

Auf netlify bereitstellen

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

Bereitstellung in Vercel

Klonen Sie dieses Repository auf eigenem GitHub -Konto und stellen Sie sie an Vercel bereit:

Roadmap

Bald kommen ..

Beitragen

Wenn Sie eine Idee, Vorschläge oder Fehler finden, können Sie eine Diskussion, ein Problem eröffnen oder eine Pull -Anfrage erstellen. Das wäre sehr nützlich für uns alle und wir würden gerne zuhören und Maßnahmen ergreifen.

Anerkennung

Ursprünglich von Onwidget erstellt und von einer Community von Mitwirkenden gepflegt.

Lizenz

TailNext ist unter der MIT -Lizenz lizenziert - Einzelheiten finden Sie in der Lizenzdatei.