next boilerplate

Tschüss Nächster Boilerplate, Willkommen bei Superplate!

Es ist lange her, dass wir das nächste Projekt mit dem nächsten Boilerplate gestartet haben. Wir sind stolz darauf, dass es vielen Frontend -Entwicklern auf der ganzen Welt geholfen hat, ihre Frontend -Entwicklungszyklen zu beschleunigen.

Mit der Zeit haben wir wertvolle Lektionen aus unserer Erfahrung und dem Community -Feedback genommen:

• Es gibt unendlich viele Frontend -Technologien und es ist unmöglich, alles in einem einzelnen Kesselplattenprodukt zu kombinieren.
• Das Projekt ist mit unzähligen externen Abhängigkeiten schwer zu pflegen.

Um das Komplexitätsproblem anzugehen, haben wir ein neues Projekt von Grund auf neu gestartet. Wir nennen es "Superplate" - die Frontend -Kesselplatte mit Supermächten.

Es basiert auf einer Plugin -Architektur und ermöglicht es Ihnen, Ihre eigenen Tools und Best Practices problemlos zu integrieren. Es umfasst auch mehr als 30 integrierte Plugins Ihrer Lieblingswerkzeuge.

Das Standard-Framework von Superplate lautet als nächstes.js, sodass Sie es sofort anstelle von nächster Boilerplate verwenden können. Weitere Rahmenziele kommen in Kürze.

Sie können das Projekt von der Repo -Seite oder -Dokumentation überprüfen.

NÄCHSTER KOILERPLATE

Leistungsorientiert Next.js Anwendungskesselplatte mit Redux, TypeScript, Express.js und Sass.

_{Erstellt von Pankod}

Um

Next.js ist ein minimalistisches React -Framework, das auf dem Browser und dem Server ausgeführt wird. Es bietet Entwicklern eine einfache Möglichkeit, loszulegen, und da es React.js für die Vorlagen verwendet, ist es auch eine einfache Möglichkeit für Entwickler mit React -Erfahrung, schnell produktiv zu werden.

Der Vorteil dieses Ansatzes besteht darin, in der Lage zu sein, einheitliche Benutzererfahrungen auf einheitliche Weise zu erstellen, ohne die SEO -Faktoren (Suchmaschinenoptimierung) zu beeinträchtigen, die für Google und andere Suchmaschinen von entscheidender Bedeutung sind.

Diese Kesselplatte erleichtert es, mit einer gut strukturierten Next.js- und TypeScript-Anwendung zu arbeiten.

Merkmale

Das Next-Boilerplate-Projekt bietet viele Funktionen außerhalb der Box. Hier finden Sie einen Überblick über die enthaltenen Komponenten und Tools.

• Next.js - Minimalistischer Framework für servergerenderte React -Anwendungen.
• TypeScript - Superset von JavaScript, das hauptsächlich optionale statische Typisierung, Klassen und Schnittstellen bietet.
• Redux - Ein vorhersehbarer Zustandsbehälter für JavaScript -Apps.
• Express.js - ein minimales und flexibler Node.js -Webanwendungs -Framework, das das Server -Seiten -Rendering übernimmt und sich in Next.js integriert.
• Integrierte Projektcli -Erstellen Sie Seiten, Komponenten, Aktionen, Reduzierer mit einem Befehl mit integrierten CLI.
• SASS/SCSS - CSS -Präprozessor, das spezielle Merkmale wie Variablen, verschachtelte Regeln und Mixins (manchmal als syntaktischer Zucker bezeichnet) in normale CSS hinzufügt.
• Docker - Ein Tool, das das Erstellen, Bereitstellen und Ausführen von Anwendungen mithilfe von Containern erleichtert.
• Babel - Der Compiler für JavaScript der nächsten Generation.
• Eslint - das steckbare Linie -Dienstprogramm.
• Reverse Proxy - Leichter Server für Proxying -API -Anforderungen.
• Bundler Analyzer - Visualisieren Sie die Größe von Webpack -Ausgabedateien mit einem interaktiven zoombaren Treemap.
• Scherz - JavaScript -Test -Framework, erstellt von Entwicklern, die React erstellt haben.
• React Testing Library - Einfache und vollständige Reaktionsdom -Test -Dienstprogramme, die gute Testpraktiken fördern.
• Next-Runtime-Dotenv -Umgebungsvariablen der Laufzeitkonfiguration von Next.js aussetzen
• NEXT-I18NEXT -Eine Internationalisierungsrahmenarbeit, die eine Funktion bietet, die einen Schlüssel, einige Optionen ausübt und den Wert für die aktuelle Sprache zurückgibt. Hilft Ihnen, Ihrer App Sprachübersetzungsunterstützung hinzuzufügen.
• Storybook - Ein Open -Source -Tool zur Entwicklung von UI -Komponenten isoliert für React.
• Bootstrap - Das beliebteste HTML-, CSS- und JavaScript -Framework für die Entwicklung reaktionsschneller, mobiler Websites.

Setup & Dokumentation

Weitere Informationen finden Sie in unserem Setup -Handbuch, um eine neue App zu erstellen.

Weitere detaillierte Unterlagen finden Sie unter https://pankod.github.io/next-boilerplate/

Eingebaute CLI

Die Pankod -Kesselplatte wird mit einem CLI -Werkzeug versendet, um die Erstellung neuer Komponenten zu optimieren. Durch die Verwendung des CLI -Tools können Sie Ihrem Projekt einfach Seiten, Klassenkomponenten oder funktionale Komponenten hinzufügen und alle erforderlichen Aktionen, Reduzierer und Importe für Sie automatisch erstellt.

Um die CLI zu starten, müssen Sie sie möglicherweise vorher installieren, wenn Sie es noch nicht getan haben.

 ~ $ npm i -g @pankod/pankod-cli

Dann können Sie es in Ihren Projekten verwenden:

 ~ $ npm run cli

Mit einem interaktiven Menü können Sie nach dem Start die zu erstellende Komponente konfigurieren. Zunächst werden Sie nach dem Typ der Komponente gefragt, ob es sich um eine Seite oder eine funktionale Komponente handelt. Anschließend werden Sie mit den anderen Optionen aufgefordert, die für Ihre Auswahl relevant sind.

Schließlich werden Sie in kürzester Zeit eine Seite oder Komponente mit Stil- und Testdateien erhalten.

Lizenz

Lizenziert unter der MIT-Lizenz, Copyright © 2018-Present Pankod