nextjs postgres nextauth tailwindcss template

Modèle de tableau de bord d'administration suivant NEXT.JS 14

Construit avec le routeur d'application suivant.js

Démo · clone et déploiement

Aperçu

Ceci est un modèle de démarrage en utilisant la pile suivante:

• Framework - next.js (routeur de l'application)
• Langue - dactylographiée
• Auth - auth.js
• Base de données - Postgres
• Déploiement - Vercel
• Styling - Tailwind CSS
• Composants - Shadcn UI
• Analytique - Vercel Analytics
• Formatage - plus joli

Ce modèle utilise le nouveau routeur de l'application Next.js. Cela inclut la prise en charge des dispositions améliorées, la colocation des composants, les tests et les styles, la récupération des données au niveau des composants, etc.

Commencer

Pendant le déploiement, Vercel vous invitera à créer une nouvelle base de données Postgres. Cela ajoutera les variables d'environnement nécessaires à votre projet.

À l'intérieur du tableau de bord Vercel Postgres, créez un tableau basé sur le schéma défini dans ce référentiel.

 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
);

Ensuite, non Comment app/api/seed.ts et frappez http://localhost:3000/api/seed pour semer la base de données avec des produits.

Ensuite, copiez le fichier .env.example sur .env et mettez à jour les valeurs. Suivez les instructions dans le fichier .env.example pour configurer votre application GitHub OAuth.

npm i -g vercel
vercel link
vercel env pull

Enfin, exécutez les commandes suivantes pour démarrer le serveur de développement:

 pnpm install
pnpm dev

Vous devriez maintenant pouvoir accéder à l'application sur http: // localhost: 3000.