nextjs postgres nextauth tailwindcss template

Next.js 14 template dasbor admin

Dibangun dengan router aplikasi berikutnya

Demo · klon & penyebaran

Ringkasan

Ini adalah templat pemula menggunakan tumpukan berikut:

• Framework - Next.js (App Router)
• Bahasa - TypeScript
• AUTH - AUTH.JS
• Database - Postgres
• Penyebaran - Vercel
• Styling - Tailwind CSS
• Komponen - Shadcn UI
• Analytics - Vercel Analytics
• Pemformatan - Prettier

Template ini menggunakan router aplikasi selanjutnya. Ini termasuk dukungan untuk tata letak yang ditingkatkan, colocation komponen, tes, dan gaya, pengambilan data tingkat komponen, dan banyak lagi.

Memulai

Selama penyebaran, Vercel akan meminta Anda untuk membuat database Postgres baru. Ini akan menambah variabel lingkungan yang diperlukan ke proyek Anda.

Di dalam dasbor Vercel Postgres, buat tabel berdasarkan skema yang ditentukan dalam repositori ini.

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

Kemudian, app/api/seed.ts dan tekan http://localhost:3000/api/seed untuk menyemai database dengan produk.

Selanjutnya, salin file .env.example ke .env dan perbarui nilainya. Ikuti instruksi dalam file .env.example untuk mengatur aplikasi github oauth Anda.

npm i -g vercel
vercel link
vercel env pull

Akhirnya, jalankan perintah berikut untuk memulai server pengembangan:

 pnpm install
pnpm dev

Anda sekarang harus dapat mengakses aplikasi di http: // localhost: 3000.