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访问该应用程序。