Next js Boilerplate - Next js Boilerplate Télécharger

Next js Boilerplate

Code Source AI

v3.60.5

Télécharger

Plate-plaque et démarreur pour next.js 15+, tailwind CSS 3.4 et TypeScript.

Next JS Starter Banner

Chauler-plaque et démarreur pour next.js avec routeur d'applications, CSS de Tailwind et TypeScript ⚡️ prioriser l'expérience du développeur d'abord: Next.js, typescript, Eslint, plus joli, husky, charpique, Vistest (remplaçant la plaisante SQLite et MySQL), surveillance des erreurs avec Sentry, se connectant avec Pino.js et gestion des journaux, surveillance en tant que code, livre d'histoire, multi-langues (I18N), sécurisé avec Arcjet (détection de bot, limitation des taux, protection d'attaque, etc.) et plus encore.

Clone ce projet et utilisez-le pour créer votre propre projet Next.js. Vous pouvez consulter la démo en direct sur la bailliser Next.js, qui comprend un système d'authentification fonctionnel.

Sponsors




Ajoutez votre logo ici

Démo

Demo en direct: Next.js Plate-plaque

S'inscrire	Se connecter

Caractéristiques

Développeur Expérience d'abord, une structure de code extrêmement flexible et ne gardez que ce dont vous avez besoin:

⚡ Next.js avec support d'application Router
Type Vérification TypeScript
? Intégrer au vent arrière CSS
✅ Mode strict pour les dactylographies et réagir 19
Authentification avec Clerk: Inscrivez-vous, connectez-vous, déconnectez-vous, oubliez le mot de passe, réinitialisez le mot de passe, etc.
? Authentification sans mot de passe avec des liens magiques, Multi-Factor Auth (MFA), Social Auth (Google, Facebook, Twitter, GitHub, Apple et plus), Connexion sans mot de passe avec PassKeys, usurpation d'identité des utilisateurs
? ORM de type sécurisé avec Drizzleorm, compatible avec PostgreSQL, SQLite et MySQL
? Base de données de développement hors ligne et locale avec pglite
Multicangue (i18n) avec le prochain INTL et Crowdin
♻️ Variables d'environnement de type sécurisé avec T3 Env
⌨️ Gestion de formulaire avec REACT Hook Form
? Bibliothèque de validation avec ZOD
? Linter avec Eslint (Default Next.js, next.js Core Web Vitals, Tailwind CSS et Antfu Configuration)
? Formateur de code avec plus joli
? Husky pour les crochets git
En place de peluche pour exécuter des liners sur les fichiers mis en scène GIT
? Lint Git s'engage avec commissaire
? Écrivez des messages de validation standard avec Commizen
? Tests unitaires avec la bibliothèque des tests Vuest et React
? Intégration et tests E2E avec le dramaturge
? Exécutez des tests sur la demande de traction avec les actions GitHub
? Livre de contes pour le développement de l'interface utilisateur
Surveillance des erreurs avec Sentry
☂️ Couverture de code avec codecov
Enregistrement avec pino.js et gestion des journaux avec une meilleure pile
Surveillance comme code avec vérification
? Sécurité et protection des bots (arcjet)
? GÉNÉRATION AUTOMATIQUE DE LACHAGE AVEC SEMANT
? Tests visuels avec Percy (facultatif)
Importations absolues à l'aide de @ prefix
? Configuration VScode: débogage, paramètres, tâches et extensions
? Métadonnées de référence
? ️ Sitemap.xml et robots.txt
⌘ Exploration de la base de données avec Studio et outil de migration CLI avec kit de bruine
Analyseur de bundler
? Inclure un thème minimaliste gratuit
? Maximiser le score du phare

Fonction intégrée de Next.js:

☕ Minify HTML & CSS
? Rechargement en direct
✅ Buste de cache

Philosophie

Rien ne vous est caché, vous permettant de faire des ajustements nécessaires pour répondre à vos besoins et préférences.
Les dépendances sont régulièrement mises à jour sur une base mensuelle
Commencez gratuitement sans frais initiaux
Facile à personnaliser
Code minimal
Modèle non style
De référencement
Prêt pour la production

Exigences

Node.js 20+ et npm

Commencer

Exécutez la commande suivante sur votre environnement local:

git clone --depth=1 https://github.com/ixartz/Next-js-Boilerplate.git my-project-name
cd my-project-name
npm install

Pour vos informations, toutes les dépendances sont mises à jour chaque mois.

Ensuite, vous pouvez exécuter le projet localement en mode développement avec un rechargement en direct en exécutant:

npm run dev

Ouvrez http: // localhost: 3000 avec votre navigateur préféré pour voir votre projet.

Configurer l'authentification

Pour commencer, vous devrez créer un compte de commis sur Clerk.com et créer une nouvelle application dans le tableau de bord du greffier. Une fois que vous avez fait cela, copiez les valeurs NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY et CLERK_SECRET_KEY et ajoutez-les au fichier .env.local (non suivi par Git):

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_pub_key
CLERK_SECRET_KEY=your_clerk_secret_key

Maintenant, vous avez un système d'authentification entièrement fonctionnel avec Next.js, y compris des fonctionnalités telles que l'inscription, la connexion, la connexion, le mot de passe oublié, la réinitialisation du mot de passe, le profil de mise à jour, la mise à jour du mot de passe, la mise à jour de l'e-mail, la suppression du compte, etc.

Configurer la base de données distante

Le projet utilise Drizzleorm, un ORM de type type qui est compatible avec les bases de données PostgreSQL, SQLite et MySQL. Par défaut, le projet est configuré pour fonctionner de manière transparente avec PostgreSQL, et vous avez la flexibilité de choisir n'importe quel fournisseur de base de données PostgreSQL de votre choix.

Configuration de la traduction (i18n)

Pour la traduction, le projet utilise next-intl combiné à Crowdin. En tant que développeur, il vous suffit de prendre soin de la version anglaise (ou une autre langue par défaut). Les traductions pour d'autres langues sont automatiquement générées et gérées par Crowdin. Vous pouvez utiliser Crowdin pour collaborer avec votre équipe de traduction ou traduire vous-même les messages à l'aide de la traduction automatique.

Pour configurer la traduction (I18N), créez un compte sur Crowdin.com et créez un nouveau projet. Dans le projet nouvellement créé, vous pourrez trouver l'ID du projet. Vous devrez également créer un nouveau jeton d'accès personnel en vous rendant à des paramètres de compte> API. Ensuite, dans vos actions GitHub, vous devez définir les variables d'environnement suivantes: CROWDIN_PROJECT_ID et CROWDIN_PERSONAL_TOKEN .

Après avoir défini les variables d'environnement dans vos actions GitHub, vos fichiers de localisation seront synchronisés avec Crowdin chaque fois que vous poussez un nouveau engagement dans la branche main .

Structure du projet

 .
├── README.md                       # README file
├── .github                         # GitHub folder
├── .husky                          # Husky configuration
├── .storybook                      # Storybook folder
├── .vscode                         # VSCode configuration
├── migrations                      # Database migrations
├── public                          # Public assets folder
├── src
│   ├── app                         # Next JS App (App Router)
│   ├── components                  # React components
│   ├── libs                        # 3rd party libraries configuration
│   ├── locales                     # Locales folder (i18n messages)
│   ├── models                      # Database models
│   ├── styles                      # Styles folder
│   ├── templates                   # Templates folder
│   ├── types                       # Type definitions
│   ├── utils                       # Utilities folder
│   └── validations                 # Validation schemas
├── tests
│   ├── e2e                         # E2E tests, also includes Monitoring as Code
│   └── integration                 # Integration tests
├── tailwind.config.js              # Tailwind CSS configuration
└── tsconfig.json                   # TypeScript configuration

Personnalisation

Vous pouvez facilement configurer le prochain chaudron JS en recherchant l'ensemble du projet pour FIXME: pour faire des personnalisations rapides. Voici quelques-uns des fichiers les plus importants à personnaliser:

public/apple-touch-icon.png , public/favicon.ico , public/favicon-16x16.png et public/favicon-32x32.png : votre site Web favicon
src/utils/AppConfig.ts : fichier de configuration
src/templates/BaseTemplate.tsx : Thème par défaut
next.config.mjs : configuration next.js
.env : variables d'environnement par défaut

Vous avez un accès complet au code source pour plus de personnalisation. Le code fourni est juste un exemple pour vous aider à démarrer votre projet. Le ciel est la limite.

Modifier le schéma de la base de données

Pour modifier le schéma de base de données dans le projet, vous pouvez mettre à jour le fichier de schéma situé sur ./src/models/Schema.ts . Ce fichier définit la structure de vos tables de base de données à l'aide de la bibliothèque Drizzle Orm.

Après avoir apporté des modifications au schéma, générez une migration en exécutant la commande suivante:

npm run db:generate

Cela créera un fichier de migration qui reflète vos modifications de schéma. La migration est automatiquement appliquée lors de la prochaine interaction de la base de données, il n'est donc pas nécessaire de l'exécuter manuellement ou de redémarrer le serveur suivant.js.

COMMER Format de message

Le projet suit la spécification des engagements conventionnels, ce qui signifie que tous les messages de validation doivent être formatés en conséquence. Pour vous aider à rédiger des messages de validation, le projet utilise Commizen, une CLI interactive qui vous guide tout au long du processus de validation. Pour l'utiliser, exécutez la commande suivante:

npm run commit

L'un des avantages de l'utilisation de commits conventionnels est la possibilité de générer automatiquement un fichier CHANGELOG . Il nous permet également de déterminer automatiquement le numéro de version suivant en fonction des types de validations incluses dans une version.

Essai

Tous les tests unitaires sont situés à côté du code source dans le même répertoire, ce qui les rend plus faciles à trouver. Le projet utilise la bibliothèque de tests les plus vive et les plus réagi pour les tests unitaires. Vous pouvez exécuter les tests avec la commande suivante:

npm run test

Intégration et tests E2E

Le projet utilise le dramaturge pour l'intégration et les tests de bout en bout (E2E). Vous pouvez exécuter les tests avec les commandes suivantes:

npx playwright install # Only for the first time in a new environment
npm run test:e2e

Dans l'environnement local, les tests visuels sont désactivés et le terminal affichera le message [percy] Percy is not running, disabling snapshots. . Par défaut, les tests visuels ne fonctionnent que dans les actions GitHub.

Activer Edge Runtime (facultatif)

Le dossier du routeur de l'application est compatible avec le runtime Edge. Vous pouvez l'activer en ajoutant les lignes suivantes src/app/layouts.tsx :

 export const runtime = 'edge' ;

Pour vos informations, la migration de la base de données n'est pas compatible avec l'exécution Edge. Vous devez donc désactiver la migration automatique dans src/libs/DB.ts :

 await migrate ( db , { migrationsFolder : './migrations' } ) ;

Après l'avoir désactivé, vous devez exécuter la migration manuellement avec:

npm run db:migrate

Vous devez également exécuter la commande chaque fois que vous souhaitez mettre à jour le schéma de base de données.

Déploier à la production

Pendant le processus de construction, les migrations de la base de données sont automatiquement exécutées, il n'est donc pas nécessaire de les exécuter manuellement. Cependant, vous devez définir DATABASE_URL dans vos variables d'environnement.

Ensuite, vous pouvez générer une construction de production avec:

$ npm run build

Il génère une construction de production optimisée de la passerelle. Pour tester la construction générée, exécutez:

$ npm run start

Vous devez également définir les variables d'environnement CLERK_SECRET_KEY en utilisant votre propre clé.

Cette commande démarre un serveur local à l'aide de la construction de production. Vous pouvez maintenant ouvrir http: // localhost: 3000 dans votre navigateur préféré pour voir le résultat.

Surveillance des erreurs

Le projet utilise la sentinelle pour surveiller les erreurs. Dans l'environnement de développement, aucune configuration supplémentaire n'est nécessaire: Next.js est préconfiguré pour utiliser Sentry et Spotlight (Sentry for Development). Toutes les erreurs seront automatiquement envoyées à votre instance de projecteurs locaux, vous permettant de faire l'expérience de Sentry localement.

Pour l'environnement de production, vous devrez créer un compte Sentry et un nouveau projet. Ensuite, dans next.config.mjs , vous devez mettre à jour l' org et les attributs project dans la fonction withSentryConfig . De plus, ajoutez votre Sentry DSN à sentry.client.config.ts , sentry.edge.config.ts et sentry.server.config.ts .

Couverture de code

Next.js Boilerplate s'appuie sur CodeCov pour la solution de rapport de couverture de code. Pour activer CodeCov, créez un compte Codecov et connectez-le à votre compte GitHub. Vos référentiels doivent apparaître sur votre tableau de bord Codecov. Sélectionnez le référentiel souhaité et copiez le jeton. Dans les actions GitHub, définissez la variable d'environnement CODECOV_TOKEN et collez le jeton.

Assurez-vous de créer CODECOV_TOKEN en tant que secret des actions GitHub, ne le collez pas directement dans votre code source.

Enregistrement

Le projet utilise Pino.js pour la journalisation. Dans l'environnement de développement, les journaux sont affichés dans la console par défaut.

Pour la production, le projet est déjà intégré à une meilleure pile pour gérer et interroger vos journaux à l'aide de SQL. Pour utiliser une meilleure pile, vous devez créer un meilleur compte de pile et créer une nouvelle source: accédez à votre tableau de bord Better Stack Logs> Sources> Connecter la source. Ensuite, vous devez donner un nom à votre source et sélectionner Node.js comme plate-forme.

Après avoir créé la source, vous pourrez afficher et copier votre jeton de source. Dans vos variables d'environnement, collez le jeton dans la variable LOGTAIL_SOURCE_TOKEN . Maintenant, tous les journaux seront automatiquement envoyés et ingérés par une meilleure pile.

Surveillance vérifiée

Le projet utilise Checkly pour vous assurer que votre environnement de production est toujours opérationnel. À intervalles réguliers, vérifie les tests se terminant par *.check.e2e.ts et vous avertit si l'un des tests échoue. De plus, vous avez la flexibilité d'exécuter des tests à partir de plusieurs emplacements pour vous assurer que votre application est disponible dans le monde entier.

Pour utiliser Checkly, vous devez d'abord créer un compte sur leur site Web. Après avoir créé un compte, générez une nouvelle touche API dans le tableau de bord Checkly et définissez la variable d'environnement CHECKLY_API_KEY dans les actions GitHub. De plus, vous devrez définir le CHECKLY_ACCOUNT_ID , qui peut également être trouvé dans votre tableau de bord Checkly sous Paramètres utilisateur> Général.

Pour terminer la configuration, mettez à jour le fichier checkly.config.ts avec votre propre adresse e-mail et URL de production.

Sécurité des arcs et protection contre les bots

Le projet utilise ArcJet, un produit de sécurité en tant que code qui comprend plusieurs fonctionnalités qui peuvent être utilisées individuellement ou combinées pour fournir une défense en profondeur pour votre site.

Pour configurer Arcjet, créez un compte gratuit et obtenez votre clé API. Ajoutez-le ensuite à la variable d'environnement ARCJET_KEY .

Arcjet est configuré avec deux caractéristiques principales: la détection de bot et le bouclier Arcjet WAF:

La détection de bot est configurée pour permettre les moteurs de recherche, les générateurs de liens d'aperçu, par exemple les aperçus de Slack et Twitter et pour permettre des services de surveillance de disponibilité courants. Tous les autres robots, tels que les grattoirs et les robots de l'IA, seront bloqués. Vous pouvez configurer des types de bot supplémentaires pour autoriser ou bloquer.
ArcJet Shield WAF détectera et bloquera les attaques communes telles que l'injection SQL, les scripts croisés et d'autres vulnérabilités des 10 meilleures OWASP.

ArcJet est configuré avec un client central de src/libs/Arcjet.ts qui comprend les règles SHIELD WAF. Les règles supplémentaires sont configurées dans src/app/[locale]/layout.tsx en fonction du type de page.

Commandes utiles

Analyseur de lot

Next.js Baillare comprend un analyseur de bundle intégré. Il peut être utilisé pour analyser la taille de vos faisceaux JavaScript. Pour commencer, exécutez la commande suivante:

npm run build-stats

En exécutant la commande, il ouvrira automatiquement une nouvelle fenêtre de navigateur avec les résultats.

Studio de base de données

Le projet est déjà configuré avec Drizzle Studio pour explorer la base de données. Vous pouvez exécuter la commande suivante pour ouvrir le studio de base de données:

npm run db:studio

Ensuite, vous pouvez ouvrir https://local.drizzle.studio avec votre navigateur préféré pour explorer votre base de données.

Informations VScode (facultative)

Si vous êtes un utilisateur VScode, vous pouvez avoir une meilleure intégration avec VScode en installant l'extension suggérée dans .vscode/extension.json . Le code de démarrage propose des paramètres pour une intégration transparente avec VScode. La configuration de débogage est également fournie pour l'expérience de débogage du frontend et du backend.

Avec les plugins installés dans votre VSCODE, Eslint et plus joli peuvent réparer automatiquement les erreurs de code et d'affichage. Il en va de même pour les tests: vous pouvez installer l'extension VSCODE VITEFOR pour exécuter automatiquement vos tests, et il affiche également la couverture du code en contexte.

Conseils de pro: Si vous avez besoin d'une vérification de type large de type avec TypeScript, vous pouvez exécuter une version avec CMD + Shift + B sur Mac.

Contributions

Tout le monde est invité à contribuer à ce projet. N'hésitez pas à ouvrir un problème si vous avez des questions ou si vous trouvez un bug. Totalement ouvert aux suggestions et améliorations.

Licence

Voir la licence pour plus d'informations.