ts nextjs tailwind starter

Weiter.JS + Tailwind CSS + Typenkriptstarter und Boilerplate

? ts-nextJS-Tailwind-Starter

Weiter.JS + Tailwind CSS + Typenkriptstarter mit nützlichen Entwicklungsfunktionen.

Gemacht von Theodorus Clarence

Merkmale

Dieses Repository ist? Batterie verpackt mit:

• ⚡️ Weiter.js 14 mit App Router
• ⚛️ React 18
• Typoskript
• ? Tailwind CSS 3 - mit CSS -Variablen konfiguriert, um die Primärfarbe zu erweitern
• ? Vorgefertigte Komponenten-Komponenten, die sich automatisch mit Ihrer Markenfarbe anpassen , finden Sie hier für die Demo
• ? Scherz - für Unit -Tests konfiguriert
• ? Absolute Import- und Pfad -Alias - Importkomponenten mit @/ Präfix importieren
• ? Eslint - Finden und Behebung von Problemen in Ihrem Code, sortieren Sie auch Ihre Importe automatisch
• ? Schöner - formatieren Sie Ihren Code konsequent
• ? Husky & Lint inszeniert - Führen Sie Skripte in Ihren inszenierten Dateien aus, bevor sie sich verpflichtet fühlen
• ? Konventionelles Commit FINT - Stellen Sie sicher
• ⏰ Veröffentlichung bitte-generieren Sie Ihren ChangeLog, indem Sie den release-please aktivieren
• ? GitHub -Aktionen - FININT IHRE CODE auf PR
• ? Automatische Niederlassung und Ausgabe autolink - Die Filiale wird automatisch zu dem Problem erstellt und automatisch auf PR verknüpft
• Snippets - eine Sammlung nützlicher Ausschnitte
• ? Öffnen Sie die Graph -Helferfunktion - Awesome Open Graph, das mit OG generiert wird, geben Sie es und stellen Sie bereit!
• ? Site -Karte - Generieren Sie automatisch sitemap.xml
• ? Erweiterungspaket - Installieren Sie einfache Bibliotheken, zusätzliche Komponenten und Konfigurationen.

Sehen Sie sich die Funktionsdetails und ChangeLog an? Für mehr.

Sie können auch alle Details und Demos in meinem Blog -Beitrag überprüfen:

• One-Stop-Starter, um die Effizienz bei Next.js & Tailwind CSS-Projekten zu maximieren

Erste Schritte

1. Klonen Sie diese Vorlage mit einem der drei Wege

1. Verwenden Sie dieses Repository als Vorlage

   Offenlegung: Durch die Verwendung dieses Repositorys als Vorlage wird Ihr Repository zuzuordnen.

   Ich werde es schätzen, wenn Sie dies tun, also kann diese Vorlage auch von anderen bekannt sein?

   

2. Verwenden von create-next-app

   pnpm create next-app  -e https://github.com/theodorusclarence/ts-nextjs-tailwind-starter ts-pnpm

   Wenn Sie weiterhin das Seitenverzeichnis verwenden möchten ( nicht aktiv gepflegt ) können Sie diesen Befehl verwenden

   npx create-next-app -e https://github.com/theodorusclarence/ts-nextjs-tailwind-starter/tree/pages-directory project-name

3. Verwenden degit

   npx degit theodorusclarence/ts-nextjs-tailwind-starter YOUR_APP_NAME

4. Bereitstellung in Vercel

2. Installieren Sie Abhängigkeiten

Es wird ermutigt, PNPM zu verwenden, damit die Husky -Haken ordnungsgemäß funktionieren können.

pnpm install

3. Führen Sie den Entwicklungsserver aus

Sie können den Server mit diesem Befehl starten:

pnpm dev

Öffnen Sie http: // localhost: 3000 mit Ihrem Browser, um das Ergebnis zu sehen. Sie können mit der Bearbeitung der Seite beginnen, indem Sie src/pages/index.tsx ändern.

4. Ändern Sie die Standardeinstellungen

Es gibt einige Dinge, die Sie ändern müssen, einschließlich Titel, URLs, Favicons usw.

Finden Sie alle Kommentare mit! StarterConf und befolgen Sie dann dem Leitfaden.

Vergessen Sie nicht, den Paketnamen in package.json zu ändern

5. Message Convention Commit

Dieser Starter verwendet herkömmliche Commits. Es ist obligatorisch, ihn zu verwenden, um Änderungen zu begehen.

Projekte mit Ts-NextJS-Tailwind-Starter

• theodorusclarence.com (Quelle)
• Notiolink (Quelle)
• NEXTJS + MATERIA UI + TISTERSCIPT

Verwenden Sie diesen Starter? Bitte fügen Sie Ihre Seite (und Repo) über eine Pull -Anfrage zum Ende der Liste hinzu. ?

Erweiterungspaket?

Dieser Starter ist jetzt mit einem Erweiterungspaket ausgestattet.

Sie können leicht Erweiterungen wie React Hook Form + Komponenten, Storybook und mehr verwenden, um eine einzelne Befehlszeile zu verwenden.

CleanShot.2021-12-04.at.18.54.07-trimmed.mp4

Schauen Sie sich das Expansionspaket -Repository für die Befehle an

App Router Update

Aufgrund des App -Router -Updates ist das Erweiterungspaket derzeit veraltet . Es wird in Zukunft aktualisiert. Sie können sie weiterhin verwenden, indem Sie die Dateien kopieren und einfügen.