nextjs ts

NEXTJS KOLDERPLATE

Eine Meinung mit einem Kesselplatte zum Kickstart von Projekten mit NextJs

Merkmale

• ? Nächste 13
• ⚛️ React 18
• ? Benutzerdefinierte Dokument und App
• ⌨️ Geben Sie die Sicherheit mithilfe von TypeScript im strengen Modus ein
• ? Schreiben Sie SCSS & Future CSS mit POSTCSS + Preset-Env
• ? SVG Sprite für Ikonen
• ? FININT IHRE CODE MIT ESINLINT & STYLELINT
• ? Schöner für einen konsistenten Codestil
• ? Scherz + Testbibliothek für Tests
• ☝️ Husky + Lint-stetig für die Codequalitätssicherung
• EditorConfig -Datei für konsistente Einklebungen
• ? Redux mit react-redux und redux-thunk

Variationszweige

Benutzerdefinierte Server

git clone -b custom-server --single-branch [email protected]:sanjaytwisk/nextjs-ts.git

Enzym

git clone -b enzyme --single-branch [email protected]:sanjaytwisk/nextjs-ts.git

Kein Redux

git clone -b no-redux --single-branch [email protected]:sanjaytwisk/nextjs-ts.git

Erste Schritte

Bevor Sie Ihre großartige Anwendung entwickeln können, müssen Sie die Abhängigkeiten des Projekts installieren. Stellen Sie sicher, dass Sie einen Knoten (> = 10.13.0) und NPM installiert und ausgeführt haben:

$ npm install

⌨️ Entwicklung

Sobald alle Abhängigkeiten installiert wurden, können Sie mit der Entwicklung beginnen. So starten Sie einen Entwicklungsserver auf http: // localhost: 3000 rennen:

$ npm run dev

? Produktion

Um Ihre Anwendung in der Produktion auszuführen, stellen Sie sicher, dass Sie zuerst einen Build ausführen:

$ npm run build

Und dann starten Sie Ihre Anwendung mit einer bereitgestellten Portnummer (Standardeinstellungen bis 3000, wenn nicht angegeben):

$ PORT=8080 npm run start

? Statisch

Sie können Ihre Bewerbung auch auf eine statische Website exportieren:

npm run export

Dadurch werden statische HTML -Seiten in ./out gerendert

? Linter

Die Kesselplatte bietet ein paar Linter, mit denen Sie die Codekonsistenz und die Eingabesicherheit im Auge behalten können. Es gibt drei Linter: eine für CSS, einen für Typenkripte und eine für die Typensicherheit. Sie können jeden von ihnen die folgenden Befehle separat verwenden:

$ npm run lint:css
$ npm run lint:ts
$ npm run lint:types

Tipp: Um das Beste aus Ihren Lintern herauszuholen, installieren Sie die entsprechenden Plugins (Stylelint, Tslint) für Ihren Editor oder Ihre IDE

Hübscher

Schöner hilft Ihnen, einen konsequenten (merkenden) Code -Stil durchzusetzen. Wenn möglich, können Sie Ihren Editor anweisen, Ihren Code zu formatieren, wenn Sie eine Datei speichern. Wenn Sie dies nicht tun können, können Sie hübscher mit:

$ npm run prettier

? Tests

Sie können Ihre Tests mit Scherz und Enzym schreiben. Sie können alle Tests mit dem folgenden Befehl ausführen

$ npm run test

Wenn Sie die testgetriebene Entwicklung befolgen möchten, können Sie verwenden:

$ npm run test:dev

Module

Typoskript

TypeScript und Babel werden mit benutzerdefinierten Modul-Resolver vorkonfiguriert. Dies bedeutet, dass Sie standardmäßig absolute Importe mit benutzerdefinierten Namespaces für die folgenden Module verwenden können:

 /* import common library */
import lib from '@common/<folder>/<lib>'
/* import component */
import Counter from '@components/counter/Counter'
/* import container */
import HomepageCounter from '@containers/counter/HomepageCounter'
/* import store files */
import { CounterAction } from '@store/counter/counterActions'

SCSS

Standardmäßig ist der Pfad ./src/common/css als eingeschlossener Pfad für unseren SCSS -Loader konfiguriert. Dies bedeutet, dass Sie eine der Dateien dieses Ordners direkt ohne den relativen oder absoluten Pfad importieren können:

 @import 'variables' ;
@import 'colors' ;