nextjs postgres nextauth tailwindcss template

Next.js 14 Plantilla de tablero de administración

Construido con el enrutador de aplicaciones Next.js

Demostración · clon e implementar

Descripción general

Esta es una plantilla de inicio usando la siguiente pila:

• Framework - Next.js (enrutador de aplicaciones)
• Lenguaje - mecanografiado
• Auth - auth.js
• Base de datos - Postgres
• Despliegue - VERCEL
• Estilo - CSS de viento de cola
• Componentes - Shadcn UI
• Análisis - Vercely Analytics
• Formateo - más bonito

Esta plantilla utiliza el nuevo enrutador de aplicaciones Next.js. Esto incluye soporte para diseños mejorados, colocación de componentes, pruebas y estilos, recolección de datos a nivel de componentes y más.

Empezando

Durante la implementación, VERCEL le pedirá que cree una nueva base de datos de Postgres. Esto agregará las variables de entorno necesarias a su proyecto.

Dentro del tablero de Postgres Vercel, cree una tabla basada en el esquema definido en este repositorio.

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

Luego, app/api/seed.ts y presione http://localhost:3000/api/seed para sembrar la base de datos con productos.

A continuación, copie el archivo .env.example a .env y actualice los valores. Siga las instrucciones en el archivo .env.example para configurar su aplicación GitHub OAuth.

npm i -g vercel
vercel link
vercel env pull

Finalmente, ejecute los siguientes comandos para iniciar el servidor de desarrollo:

 pnpm install
pnpm dev

Ahora debería poder acceder a la aplicación en http: // localhost: 3000.