Next js Boilerplate
v3.60.5
Boilerplate und Starter für Next.js mit App-Router, Tailwind CSS und Typenkript ⚡️ Priorisierung der Entwicklererfahrung zuerst: Next.js, Typscript, Eslint, Prettier, Husky, Lint-Stattung, Vitest (Ersetzen von Scherz), Testbibliothek, Dramatikright, Damik, Tailwind, Authentifizierung mit Clerk, Clerk, CLESSWERS, CSSS-CSSS-CSS-CSSS-CSSS-CSSS-CSSS-CSSS-CSSS-CSS SQLite und MySQL), Fehlerüberwachung mit Wachposten, Anmeldung mit Pino.js und Protokollverwaltung, Überwachung als Code, Storybook, Multisprachler (I18N), sicher mit Arcjet (Bot-Erkennung, Ratenbegrenzung, Angriffsschutz usw.) und mehr.
Klonen Sie dieses Projekt und verwenden Sie es, um Ihr eigenes Next.js -Projekt zu erstellen. Sie können die Live -Demo bei Next.js Boilerplate ansehen, die ein funktionierendes Authentifizierungssystem enthält.
 |  |   |
 |  | |
 |  | |
| Fügen Sie hier Ihr Logo hinzu |
Live -Demo: Next.js Boilerplate
| Melden Sie sich an | Anmelden |
|---|---|
 | |
Entwicklererfahrung zuerst, äußerst flexible Codestruktur und nur das, was Sie brauchen:
@ PräfixIntegrierte Funktion von Next.js:
Führen Sie den folgenden Befehl in Ihrer lokalen Umgebung aus:
git clone --depth=1 https://github.com/ixartz/Next-js-Boilerplate.git my-project-name
cd my-project-name
npm installZu Ihren Informationen werden alle Abhängigkeiten jeden Monat aktualisiert.
Anschließend können Sie das Projekt im Entwicklungsmodus mit Live -Reload durch Ausführung lokal ausführen:
npm run devÖffnen Sie http: // localhost: 3000 mit Ihrem bevorzugten Browser, um Ihr Projekt zu sehen.
Um loszulegen, müssen Sie bei Clerk.com ein Clerk -Konto erstellen und eine neue Anwendung im Clerk -Dashboard erstellen. Sobald .env.local dies getan haben, kopieren Sie die Werte für CLERK_SECRET_KEY NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY .
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_pub_key
CLERK_SECRET_KEY=your_clerk_secret_keyJetzt haben Sie ein voll funktionsfähiges Authentifizierungssystem mit Next.js, einschließlich Funktionen wie Anmelden, Anmelden, Anmelden, Passwort vergessen, Kennwort zurücksetzen, das Profil aktualisieren, Kennwort aktualisieren, E -Mails aktualisieren, Konto löschen und mehr.
Das Projekt verwendet Drizzleorm, ein Typ-Safe-Orm, das mit PostgreSQL-, SQLite- und MySQL-Datenbanken kompatibel ist. Standardmäßig ist das Projekt so konfiguriert, dass sie nahtlos mit PostgreSQL arbeiten, und Sie haben die Flexibilität, einen PostgreSQL -Datenbankanbieter Ihrer Wahl zu wählen.
Für die Übersetzung verwendet das Projekt next-intl in Kombination mit Crowdin. Als Entwickler müssen Sie sich nur um die englische (oder eine andere Standardsprache) Version kümmern. Übersetzungen für andere Sprachen werden automatisch von Crowdin generiert und behandelt. Sie können Crowdin verwenden, um mit Ihrem Übersetzungsteam zusammenzuarbeiten oder die Nachrichten selbst mit Hilfe der maschinellen Übersetzung zu übersetzen.
Um die Übersetzung (I18N) einzurichten, erstellen Sie ein Konto bei Crowdin.com und erstellen Sie ein neues Projekt. Im neu erstellten Projekt können Sie die Projekt -ID finden. Sie müssen außerdem ein neues persönliches Zugriffs -Token erstellen, indem Sie zu Account -Einstellungen> API gehen. In Ihren GitHub -Aktionen müssen Sie dann die folgenden Umgebungsvariablen definieren: CROWDIN_PROJECT_ID und CROWDIN_PERSONAL_TOKEN .
Nachdem Ihre Lokalisierungsdateien die Umgebungsvariablen in Ihren Github -Aktionen definiert haben, werden Ihre Lokalisierungsdateien jedes Mal mit Crowdin synchronisiert, wenn Sie ein neues Verpflichtung zum main überschreiten.
.
├── 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 Sie können den nächsten JS -Boilerplate problemlos konfigurieren, indem Sie das gesamte Projekt nach FIXME: Schnelle Anpassungen. Hier sind einige der wichtigsten Dateien, die Sie anpassen können:
public/apple-touch-icon.png , public/favicon.ico , public/favicon-16x16.png und public/favicon-32x32.png : Ihre Website Faviconsrc/utils/AppConfig.ts : Konfigurationsdateisrc/templates/BaseTemplate.tsx : Standardthemanext.config.mjs : Next.js Konfiguration.env : StandardumgebungsvariablenSie haben den vollen Zugriff auf den Quellcode für die weitere Anpassung. Der bereitgestellte Code ist nur ein Beispiel, mit dem Sie Ihr Projekt beginnen können. Der Himmel ist die Grenze.
Um das Datenbankschema im Projekt zu ändern, können Sie die Schema -Datei unter ./src/models/Schema.ts aktualisieren. Diese Datei definiert die Struktur Ihrer Datenbanktabellen mithilfe der Nieselregenbibliothek.
Generieren Sie nach Änderungen am Schema eine Migration, indem Sie den folgenden Befehl ausführen:
npm run db:generateDadurch wird eine Migrationsdatei erstellt, die Ihre Schema -Änderungen widerspiegelt. Die Migration wird während der nächsten Datenbankinteraktion automatisch angewendet, sodass sie nicht manuell ausführen oder den nächsten.js -Server neu starten müssen.
Das Projekt folgt der herkömmlichen Commit -Spezifikation, was bedeutet, dass alle Bekanntheitsnachrichten entsprechend formatiert werden müssen. Um Ihnen dabei zu helfen, Commit -Nachrichten zu schreiben, verwendet das Projekt Commitizen, eine interaktive CLI, die Sie durch den Commit -Prozess führt. Um es zu verwenden, führen Sie den folgenden Befehl aus:
npm run commit Einer der Vorteile der Verwendung herkömmlicher Commits ist die Möglichkeit, automatisch eine CHANGELOG -Datei zu generieren. Außerdem können wir die nächste Versionsnummer automatisch basierend auf den Arten von Commits ermitteln, die in einer Version enthalten sind.
Alle Unit -Tests befinden sich neben dem Quellcode im selben Verzeichnis, sodass sie einfacher zu finden sind. Das Projekt verwendet die Vitest- und React -Testbibliothek für Unit -Tests. Sie können die Tests mit dem folgenden Befehl ausführen:
npm run testDas Projekt verwendet Dramatiker für Integration und End-to-End-Test (E2E). Sie können die Tests mit den folgenden Befehlen ausführen:
npx playwright install # Only for the first time in a new environment
npm run test:e2e In der lokalen Umgebung sind visuelle Tests deaktiviert, und das Terminal zeigt die Meldung [percy] Percy is not running, disabling snapshots. . Standardmäßig werden visuelle Tests in GitHub -Aktionen ausgeführt.
Der App -Router -Ordner ist mit der Edge -Laufzeit kompatibel. Sie können dies aktivieren, indem Sie die folgenden Zeilen src/app/layouts.tsx hinzufügen:
export const runtime = 'edge' ; Zu Ihren Informationen ist die Datenbankmigration nicht mit der Kantenlaufzeit kompatibel. Sie müssen also die automatische Migration in src/libs/DB.ts deaktivieren:
await migrate ( db , { migrationsFolder : './migrations' } ) ;Nach dem Deaktivieren müssen Sie die Migration manuell mit:
npm run db:migrateSie müssen den Befehl auch jedes Mal ausführen, wenn Sie das Datenbankschema aktualisieren möchten.
Während des Erstellungsprozesses werden Datenbankmigrationen automatisch ausgeführt, sodass sie nicht manuell ausführen müssen. Sie müssen jedoch DATABASE_URL in Ihren Umgebungsvariablen definieren.
Dann können Sie einen Produktionsbau erstellen mit:
$ npm run buildEs erzeugt einen optimierten Produktionsaufbau der Kesselplatte. Um den generierten Build zu testen, rennen Sie:
$ npm run start Sie müssen auch die Umgebungsvariablen CLERK_SECRET_KEY mit Ihrem eigenen Schlüssel definieren.
Dieser Befehl startet einen lokalen Server mit dem Produktionsbau. Sie können jetzt http: // localhost: 3000 in Ihrem bevorzugten Browser öffnen, um das Ergebnis zu sehen.
Das Projekt verwendet Sentry, um Fehler zu überwachen. In der Entwicklungsumgebung ist kein zusätzliches Setup erforderlich: Next.js Boilerplate ist vorkonfiguriert, um Sentry und Spotlight (Sachen für die Entwicklung) zu verwenden. Alle Fehler werden automatisch an Ihre lokale Spotlight -Instanz gesendet, sodass Sie Sentry lokal erleben können.
Für die Produktionsumgebung müssen Sie ein Sentry -Konto und ein neues Projekt erstellen. Dann müssen Sie in next.config.mjs die org und project in der withSentryConfig -Funktion aktualisieren. Fügen Sie außerdem Ihre Sentry DSN zu sentry.client.config.ts , sentry.edge.config.ts und sentry.server.config.ts .
Next.js Boilerplate basiert auf CodeCOV für die Code -Abdeckungsberichterstattung. Um CodeCOV zu aktivieren, erstellen Sie ein Codecov -Konto und verbinden Sie es mit Ihrem GitHub -Konto. Ihre Repositorys sollten auf Ihrem Codecov -Dashboard angezeigt werden. Wählen Sie das gewünschte Repository aus und kopieren Sie das Token. Definieren Sie in GitHub -Aktionen die Umgebungsvariable CODECOV_TOKEN und fügen Sie das Token ein.
Stellen Sie sicher, dass Sie CODECOV_TOKEN als GitHub -Aktionen geheim erstellen. Fügen Sie ihn nicht direkt in Ihren Quellcode ein.
Das Projekt verwendet Pino.js zur Protokollierung. In der Entwicklungsumgebung werden standardmäßig Protokolle in der Konsole angezeigt.
Für die Produktion ist das Projekt bereits in einen besseren Stack integriert, um Ihre Protokolle mit SQL zu verwalten und abzufragen. Um einen besseren Stack zu verwenden, müssen Sie ein besseres Stapelkonto erstellen und eine neue Quelle erstellen: Gehen Sie zu Ihrem besseren Stack -Protokolle -Dashboard> Quellen> Quelle Connect. Dann müssen Sie Ihrer Quelle einen Namen geben und Node.js als Plattform auswählen.
Nach dem Erstellen der Quelle können Sie Ihr Quell -Token anzeigen und kopieren. Fügen Sie in Ihren Umgebungsvariablen das Token in die Variable LOGTAIL_SOURCE_TOKEN ein. Jetzt werden alle Protokolle automatisch von besserem Stack an einen besseren Stack gesendet und aufgenommen.
Das Projekt nutzt Checkery, um sicherzustellen, dass Ihre Produktionsumgebung immer in Betrieb ist. In regelmäßigen Abständen führt die Prüfung die Tests aus, die mit *.check.e2e.ts Erweiterung enden, und informiert Sie, wenn einer der Tests fehlschlägt. Darüber hinaus haben Sie die Flexibilität, Tests von mehreren Standorten aus durchzuführen, um sicherzustellen, dass Ihre Anwendung weltweit verfügbar ist.
Um Checking zu verwenden, müssen Sie zunächst ein Konto auf ihrer Website erstellen. Generieren Sie nach dem Erstellen eines Kontos eine neue API -Taste im Checking -Dashboard und setzen Sie die Umgebungsvariable CHECKLY_API_KEY in GitHub -Aktionen. Zusätzlich müssen Sie die CHECKLY_ACCOUNT_ID definieren, die auch in Ihrem Checkly Dashboard unter Benutzereinstellungen> Allgemein zu finden ist.
Um das Setup zu vervollständigen, aktualisieren Sie die Datei checkly.config.ts mit Ihrer eigenen E -Mail -Adresse und Produktions -URL.
Das Projekt verwendet Arcjet, ein Sicherheit als Codeprodukt, das mehrere Funktionen enthält, die einzeln oder kombiniert werden können, um eine eingehende Verteidigung für Ihre Website zu bieten.
Erstellen Sie ein kostenloses Konto, um Arcjet einzurichten, und erhalten Sie Ihren API -Schlüssel. Fügen Sie es dann zur Umgebungsvariablen ARCJET_KEY hinzu.
Arcjet ist mit zwei Hauptmerkmalen konfiguriert: Bot -Erkennung und Arcjet Shield WAF:
Arcjet ist mit einem zentralen Client bei src/libs/Arcjet.ts konfiguriert, das die Schild -Waf -Regeln enthält. Zusätzliche Regeln werden in src/app/[locale]/layout.tsx basierend auf dem Seitentyp konfiguriert.
NEXT.JS-Kesselplatte enthält einen integrierten Bundle-Analysator. Es kann verwendet werden, um die Größe Ihrer JavaScript -Bündel zu analysieren. Führen Sie zunächst den folgenden Befehl aus:
npm run build-statsDurch Ausführen des Befehls wird automatisch ein neues Browserfenster mit den Ergebnissen geöffnet.
Das Projekt ist bereits mit Drezzle Studio konfiguriert, um die Datenbank zu erkunden. Sie können den folgenden Befehl ausführen, um das Database Studio zu öffnen:
npm run db:studioDann können Sie https://local.drizzle.studio mit Ihrem Lieblingsbrowser öffnen, um Ihre Datenbank zu erkunden.
Wenn Sie VSCODE -Benutzer sind, können Sie eine bessere Integration in VSCODE haben, indem Sie die vorgeschlagene Erweiterung in .vscode/extension.json installieren. Der Startercode erstellt Einstellungen für eine nahtlose Integration in VSCODE. Die Debug -Konfiguration wird auch für Frontend- und Backend -Debugging -Erfahrungen bereitgestellt.
Mit den in Ihrem VSCODE installierten Plugins können Eslint und schöner den Code automatisch beheben und Fehler anzeigen. Gleiches gilt für das Testen: Sie können die Vitest -Erweiterung von VSCODE installieren, um Ihre Tests automatisch auszuführen. Außerdem wird die Codeabdeckung im Kontext angezeigt.
Pro-Tipps: Wenn Sie eine Projekt-Weit-Typ-Überprüfung mit TypeScript benötigen, können Sie einen Build mit CMD + Shift + B auf dem Mac ausführen.
Jeder ist herzlich eingeladen, zu diesem Projekt beizutragen. Fühlen Sie sich frei, ein Problem zu öffnen, wenn Sie Fragen haben oder einen Fehler finden. Völlig offen für Vorschläge und Verbesserungen.
Lizenziert unter der MIT -Lizenz, Copyright © 2024
Weitere Informationen finden Sie unter Lizenz.
| | |
| | |
| | |
| Fügen Sie hier Ihr Logo hinzu |
Hergestellt mit ♥ von CreevivedEsignsguru
Suchen Sie nach einer benutzerdefinierten Kesselplatte, um Ihr Projekt zu starten? Ich würde mich freuen zu diskutieren, wie ich Ihnen helfen kann, einen zu bauen. Wenden Sie sich an [email protected].
