nextjs postgres nextauth tailwindcss template

Next.js 14 Modelo de painel administrador

Construído com o roteador de aplicativos Next.js

Demo · Clone & Emplay

Visão geral

Este é um modelo de partida usando a seguinte pilha:

• Framework - Next.js (roteador de aplicativos)
• Idioma - TypeScript
• Auth - auth.js
• Banco de dados - PostGres
• Implantação - vercel
• Estilo - CSS do Tailwind CSS
• Componentes - shadcn ui
• Analytics - Vercel Analytics
• Formatação - mais bonita

Este modelo usa o novo roteador de aplicativos Next.js. Isso inclui suporte para layouts aprimorados, colocação de componentes, testes e estilos, busca de dados no nível de componentes e muito mais.

Começando

Durante a implantação, o Vercel solicitará que você crie um novo banco de dados do PostGres. Isso adicionará as variáveis de ambiente necessárias ao seu projeto.

Dentro do painel do Vercel Postgres, crie uma tabela com base no esquema definido neste repositório.

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

Em seguida, app/api/seed.ts e acerte http://localhost:3000/api/seed para semear o banco de dados com produtos.

Em seguida, copie o arquivo .env.example para .env e atualize os valores. Siga as instruções no arquivo .env.example para configurar seu aplicativo Github OAuth.

npm i -g vercel
vercel link
vercel env pull

Por fim, execute os seguintes comandos para iniciar o servidor de desenvolvimento:

 pnpm install
pnpm dev

Agora você deve poder acessar o aplicativo em http: // localhost: 3000.