nextjs ts

Plate-plaque NextJS

Un chauffeur d'opinion pour lancer des projets en utilisant NextJS

Caractéristiques

• ?? 13 prochain
• ⚛️ React 18
• ? Document et application personnalisés
• ⌨️ Type de sécurité en utilisant TypeScript en mode strict
• ? Écrivez SCSS et futurs CSS avec POSTCSS + Preset-ENV
• ? SVG Sprite pour les icônes
• ? Lint votre code avec Eslint & Stylelint
• ? Plus joli pour un style de code cohérent
• ? Jest + Bibliothèque de tests pour les tests
• ☝️ Husky + peluche pour l'assurance de la qualité du code
• Fichier EditorConfig pour les retraits cohérents
• ? Redux avec react-redux et redux-thunk

Branches de variation

Serveur personnalisé

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

Enzyme

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

Pas de redux

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

Commencer

Avant de pouvoir commencer à développer votre application géniale, vous devez installer les dépendances du projet. Assurez-vous d'avoir un nœud (> = 10.13.0) et un NPM installé et exécuté:

$ npm install

⌨️ Development

Une fois toutes les dépendances installées, vous pouvez commencer le développement. Pour démarrer un serveur de développement sur http: // localhost: 3000 Run:

$ npm run dev

? Production

Pour exécuter votre application en production, assurez-vous d'exécuter une construction en premier:

$ npm run build

Puis démarrez votre application avec un numéro de port fourni (par défaut à 3000 si ce n'est pas fourni):

$ PORT=8080 npm run start

? Statique

Vous pouvez également exporter votre application vers un site Web statique:

npm run export

Cela rendra les pages HTML statiques en ./out

? Linter

Le passe-partout fournit quelques liders pour vous aider à garder un œil sur la cohérence du code et la sécurité des types. Il y a trois linceurs: un pour CSS, un pour dactylographie et un pour la sécurité de type. Vous pouvez utiliser chacun d'eux séparément en utilisant les commandes suivantes:

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

Conseil: pour tirer le meilleur parti de vos liners, installez les plugins correspondants (stylelint, tslint) pour votre éditeur ou IDE

Plus joli

Plus joli vous aide à appliquer le style de code cohérent (d'opinion). Si possible, vous pouvez dire à votre éditeur de formater votre code lorsque vous enregistrez un fichier. Si vous n'êtes pas en mesure de le faire, vous pouvez courir plus jolie en utilisant manuellement:

$ npm run prettier

? Tests

Vous pouvez écrire vos tests à l'aide de la plaisanterie et de l'enzyme. Vous pouvez exécuter tous les tests avec la commande suivante

$ npm run test

Si vous souhaitez suivre le développement axé sur les tests, vous pouvez utiliser:

$ npm run test:dev

Modules

Manuscrit

TypeScript et Babel sont préconfigurés avec des résolveurs de modules personnalisés. Cela signifie que vous pouvez utiliser des importations absolues avec des espaces de noms personnalisés par défaut pour les modules suivants:

 /* 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

Par défaut, le chemin ./src/common/css est configuré comme un chemin inclus pour notre chargeur SCSS. Cela signifie que vous pouvez importer directement l'un des fichiers de ce dossier sans le chemin relatif ou absolu:

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