typescript nextjs starter Download - typescript nextjs starter Quellcode Download

typescript nextjs starter

AI-Quellcode

2.2.0

Herunterladen

NEXT.JS TYPESCIPS STARTER

Nicht opinionierter Typterkriptstarter für Next.js

Hoch skalierbare Grundlage mit dem besten DX. Alle Tools, die Sie benötigen, um Ihr nächstes Projekt zu erstellen.

_{Erstellt von João Pedro mit Hilfe vieler wunderbarer Mitwirkender.}

Merkmale

⚡️ Next.js 15 (App -Router)
⚛️ React 19
⛑ Typenkript
? Eslint 9 - Probleme in Ihrem Code zu finden und zu beheben
? Schöner - Codeformatierer für konsistenten Stil
? Husky - für das Ausführen von Skripten vor dem Vergehen
? CommitLint - Um sicherzustellen, dass Ihre Commit -Nachrichten dem Kongress folgen
? Renovieren - um Ihre Abhängigkeiten auf dem neuesten Stand zu halten
Lint-Stage-Führen Sie Eslint und schöner gegen inszenierte Git-Dateien aus
? PR -Workflow - Führen Sie Typ -Check & Linter auf Pull -Anfragen aus
EditorConfig - Konsistente Codierungsstile für Redakteure und IDEs
? Pfadzuordnung - Importieren von Komponenten oder Bildern mit dem @ Präfix
? CSP - Inhaltssicherheitsrichtlinie für erweiterte Sicherheit (Standard -Minimalrichtlinie)
? T3 Env-Typ-Safe-Umgebungsvariablen
? Weiterleitungen - Ihre Anwendung leicht Weiterleitungen hinzufügen

Schneller Start

Der beste Weg, um mit dieser Vorlage zu beginnen, besteht darin, die nächste App Create zu verwenden.

 # pnpm
pnpm create next-app -e https://github.com/jpedroschmitz/typescript-nextjs-starter
# yarn
yarn create next-app -e https://github.com/jpedroschmitz/typescript-nextjs-starter
# npm
npx create-next-app -e https://github.com/jpedroschmitz/typescript-nextjs-starter

Entwicklung

Um das Projekt lokal zu starten, laufen Sie:

pnpm dev

Öffnen Sie http://localhost:3000 mit Ihrem Browser, um das Ergebnis zu sehen.

Zeugnisse

"Dieser Starter ist bei weitem der beste Typenkriptstarter für Next.js. Feature Pack, aber gleichzeitig nicht optimiert!"
- Arafat Zahan

"Ich kann das nächste.
- Corfitz

"Brillante Arbeit!"
- Soham Dasgupta

Showcase

Liste der Websites, die mit Next.js TypeScript -Starter begonnen haben:

FreeInvoice.dev
Begriff Avatarhersteller
Ikea niedriger Preis
Hygraph.com
Rocketat.com.br
vagaschapeco.com
entcrom.vercel.app
cryptools.dev
Fügen Sie Ihre hinzu

Dokumentation

Anforderungen

Node.js> = 20
PNPM 9

Verzeichnisstruktur

.github - GitHub -Konfiguration einschließlich des CI -Workflows.
.husky - Husky -Konfiguration und Haken.
public - statische Assets wie Robots.txt, Bilder und Favicon.
src - Anwendungsquellcode, einschließlich Seiten, Komponenten, Stile.

Skripte

pnpm dev - Startet die Anwendung im Entwicklungsmodus unter http://localhost:3000 .
pnpm build - Erstellt einen optimierten Produktionsaufbau Ihrer Anwendung.
pnpm start - Startet die Anwendung im Produktionsmodus.
pnpm type-check -Validieren Sie den Code mit dem TypeScript-Compiler.
pnpm lint - Läuft eSlint für alle Dateien im src -Verzeichnis.
pnpm lint:fix - FIST ESLINT FEXT für alle Dateien im src -Verzeichnis.
pnpm format - Ausführender für alle Dateien im src -Verzeichnis.
pnpm format:check - Überprüfen Sie die schönere Liste der Dateien, die formatiert werden müssen.
pnpm format:ci - schöner Scheck für CI.

Pfadzuordnung

Typscript werden mit benutzerdefinierten Pfadzuordnungen vorkonfiguriert. Verwenden Sie zum Importieren von Komponenten oder Dateien das @ Präfix.

 import { Button } from '@/components/Button' ;
// To import images or other files from the public folder
import avatar from '@/public/avatar.png' ;

Wechseln Sie zu Garn/NPM

Dieser Starter verwendet standardmäßig PNPM, aber diese Wahl gehört Ihnen. Wenn Sie zu Garn/NPM wechseln möchten, löschen Sie die pnpm-lock.yaml Datei, installieren Sie die Abhängigkeiten mit Garn/NPM, ändern Sie den CI-Workflow und Husky Git-Haken, um Garn/NPM-Befehle zu verwenden.

Hinweis: Wenn Sie Garn verwenden, befolgen Sie diese Schritte aus der Husky -Dokumentation, damit Git -Hooks nicht mit Garn an Fenstern versagen.

Umgebungsvariablen

Wir verwenden T3 Env, um Umgebungsvariablen zu verwalten. Erstellen Sie eine .env.local -Datei im Stamm des Projekts und fügen Sie dort Ihre Umgebungsvariablen hinzu.

Beim Hinzufügen zusätzlicher Umgebungsvariablen sollte das Schema in ./src/lib/env/client.ts oder ./src/lib/env/server.ts entsprechend aktualisiert werden.

Umleiten

Um Weiterleitungen hinzuzufügen, aktualisieren Sie das redirects in ./redirects.ts . Es wird eingegeben, sodass Sie eine Autoperation für die Eigenschaften erhalten.

CSP (Inhaltssicherheitsrichtlinie)

Die Content Security Policy (CSP) ist eine Sicherheitsschicht, mit der bestimmte Arten von Angriffen erfasst und gemindert werden können, einschließlich Cross-Site-Skripten (XSS) und Dateneinspritzangriffe. Der CSP wird in der next.config.ts -Datei implementiert.

Es enthält eine Standard- und minimale Richtlinie, die Sie an Ihre Anwendungsanforderungen anpassen können. Es ist eine Grundlage, auf der man aufbauen kann.