ts nextjs tailwind starter

Next.js + Tailwind CSS + TypeScript Starter et chauffe-plaque

? TS-NEXTJS-TAILWIND-Starter

NEXT.JS + Tailwind CSS + TypeScript Starter emballé avec des fonctionnalités de développement utiles.

Fabriqué par Theodorus Clarence

Caractéristiques

Ce référentiel est? batterie remplie:

• ⚡️ Next.js 14 avec routeur d'application
• ⚛️ React 18
• Manuscrit
• ? Tailwind CSS 3 - configuré avec des variables CSS pour étendre la couleur primaire
• ? Composants prédéfinis - composants qui s'adapteront automatiquement avec la couleur de votre marque, vérifiez ici la démo
• ? Jest - configuré pour les tests unitaires
• ? Alias d'importation et de chemin absolu - Composants d'importation à l'aide de @/ préfixe
• ? Eslint - Trouvez et résolvez des problèmes dans votre code, triera également automatiquement vos importations
• ? Plus joli - formatez votre code de manière cohérente
• ? Husky & Lint mis en scène - exécutez les scripts sur vos fichiers mis en scène avant qu'ils ne soient engagés
• ? Commit conventionnel Lint - Assurez-vous que vous et vos coéquipiers suivez un engagement conventionnel
• ⏰ Release s'il vous plaît - Générez votre changelog en activant le release-please flux
• ? Actions GitHub - peluchez votre code sur PR
• ? Branche automatique et émission AutoLink - La branche sera automatiquement créée en attribution de problèmes, et lié automatiquement sur PR
• Extraits - une collection d'extraits utiles
• ? Fonction d'assistance graphique ouverte - Awesome Open Graph généré à l'aide d'OG, fourchez-le et déploie!
• ? PAPE DE SITE - Générez automatiquement SiteMap.xml
• ? Pack d'extension - installez facilement les bibliothèques communes, les composants supplémentaires et les configurations.

Voir les détails de la fonctionnalité et Changelog? pour plus.

Vous pouvez également consulter tous les détails et démos sur mon article de blog:

• Démarreur à guichet

Commencer

1. Clone ce modèle en utilisant l'une des trois façons

1. Utilisez ce référentiel comme modèle

   Divulgation: En utilisant ce référentiel comme modèle, il y aura une attribution sur votre référentiel.

   J'apprécierai si vous le faites, donc ce modèle peut également être connu des autres?

   

2. Utilisation create-next-app

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

   Si vous souhaitez toujours utiliser le répertoire des pages ( n'est pas activement maintenu ), vous pouvez utiliser cette commande

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

3. Utilisation degit

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

4. Déployer à Vercel

2. Installez les dépendances

Il est encouragé à utiliser PNPM afin que les crochets husky puissent fonctionner correctement.

pnpm install

3. Exécutez le serveur de développement

Vous pouvez démarrer le serveur à l'aide de cette commande:

pnpm dev

Ouvrez http: // localhost: 3000 avec votre navigateur pour voir le résultat. Vous pouvez commencer à modifier la page en modifiant src/pages/index.tsx .

4. Modifier les défauts

Il y a certaines choses que vous devez modifier, y compris le titre, les URL, les favicons, etc.

Trouvez tous les commentaires avec! StarterConf, puis suivez le guide.

N'oubliez pas de modifier le nom du package dans package.json

5. Commissez la convention de message

Ce démarreur utilise des commits conventionnels, il est obligatoire de l'utiliser pour commettre des changements.

Projets utilisant TS-NEXTJS-TAILWIND-Starter

• theodorusclarence.com (source)
• NotioLink (source)
• NextJS + Materia UI + TypeScript

Utilisez-vous ce démarreur? Veuillez ajouter votre page (et répension) à la fin de la liste via une demande de traction. ?

Pack d'extension?

Ce démarreur est désormais équipé d'un pack d'extension.

Vous pouvez facilement ajouter une extension telle que React Hook Form + Composants, Storybook, et plus simplement en utilisant une seule ligne de commande.

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

Découvrez le référentiel du pack d'extension pour les commandes

Mise à jour du routeur de l'application

En raison de la mise à jour du routeur de l'APP, le pack d'extension est actuellement obsolète . Il sera mis à jour à l'avenir. Vous pouvez toujours les utiliser en copier et en collant les fichiers.