nextjs postgres nextauth tailwindcss template

next.js 14管理儀表板模板

使用next.js應用程序路由器構建

演示·克隆和部署

概述

這是使用以下堆棧的啟動模板：

• 框架 - next.js（應用程序路由器）
• 語言 - 打字稿
• auth -auth.js
• 數據庫 - Postgres
• 部署 - Vercel
• 造型 - 尾風CSS
• 組件 - shadcn UI
• 分析 - Vercel Analytics
• 格式化 - 更漂亮

該模板使用新的Next.js應用程序路由器。這包括對增強佈局，組件的托置，測試和样式，組件級數據獲取等的支持。

入門

在部署期間，Vercel將提示您創建一個新的Postgres數據庫。這將為您的項目添加必要的環境變量。

在Vercel Postgres儀表板中，創建基於此存儲庫中定義的模式的表。

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

然後，Uncomention app/api/seed.ts並擊中http://localhost:3000/api/seed用產品播種數據庫。

接下來，將.env.example文件複製到.env並更新值。按照.env.example文件中的說明進行操作，以設置您的github oauth應用程序。

npm i -g vercel
vercel link
vercel env pull

最後，運行以下命令以啟動開發服務器：

 pnpm install
pnpm dev

現在，您應該能夠通過http：// localhost：3000訪問該應用程序。