nextjs postgres nextauth tailwindcss template

Weiter.js 14 Admin -Dashboard -Vorlage

Erstellt mit dem nächsten.js App Router

Demo · Klon & Bereitstellung

Überblick

Dies ist eine Startervorlage mit dem folgenden Stack:

• Framework - Next.js (App -Router)
• Sprache - TypeScript
• Auth - Auth.js
• Datenbank - Postgres
• Bereitstellung - Vercel
• Styling - Rückenwind -CSS
• Komponenten - Shadcn UI
• Analytics - Vercel Analytics
• Formatierung - schöner

Diese Vorlage verwendet den neuen Next.js App -Router. Dies beinhaltet die Unterstützung für verbesserte Layouts, die Colocation von Komponenten, Tests und Stilen, Datenfetching von Komponenten auf dem Datenebene und vieles mehr.

Erste Schritte

Während der Bereitstellung fordert Vercel Sie auf, eine neue Postgres -Datenbank zu erstellen. Dadurch werden Ihrem Projekt die erforderlichen Umgebungsvariablen hinzugefügt.

Erstellen Sie innerhalb des Dashboard von Vercel Postgres eine Tabelle basierend auf dem in diesem Repository definierten Schema.

 CREATE TYPE status AS ENUM ('active', 'inactive', 'archived');

CREATE TABLE products (
  id SERIAL PRIMARY KEY,
  image_url TEXT NOT NULL,
  name TEXT NOT NULL,
  status status NOT NULL,
  price NUMERIC(10, 2) NOT NULL,
  stock INTEGER NOT NULL,
  available_at TIMESTAMP NOT NULL
);

Dann wenden Sie sich an app/api/seed.ts und drücken Sie http://localhost:3000/api/seed um die Datenbank mit Produkten zu säen.

Kopieren Sie als Nächstes die Datei .env.example in .env und aktualisieren Sie die Werte. Befolgen Sie die Anweisungen in der Datei .env.example um Ihre GitHub OAuth -Anwendung einzurichten.

npm i -g vercel
vercel link
vercel env pull

Führen Sie schließlich die folgenden Befehle aus, um den Entwicklungsserver zu starten:

 pnpm install
pnpm dev

Sie sollten jetzt in der Lage sein, auf die Anwendung unter http: // localhost: 3000 zugreifen zu können.