Next.jsReact后台

nextjs-postgres-nextauth-tailwindcss-template — Next.js 后台模板

作者 vercel

Vercel 官方维护的 Next.js App Router 后台管理模板，集成 Auth.js 登录、Postgres 数据库、Tailwind CSS 与 Shadcn UI，内置商品数据表与增删改查界面，可作为管理后台的起步代码。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图

桌面端首页1 / 2

nextjs-postgres-nextauth-tailwindcss-template · 桌面端首页

访问演示网站在新标签页打开

桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-08查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

基于 Next.js App Router，支持布局嵌套、组件与样式就近放置、组件级数据获取

集成 Auth.js，通过 GitHub OAuth 应用完成登录认证

使用 Postgres 存储数据，仓库内提供 products 表建表 SQL 与种子接口

采用 Tailwind CSS 与 Shadcn UI 构建界面组件

附带 Vercel Analytics 与 Prettier 配置

由 Vercel 官方仓库维护，采用 MIT 许可

模板详细介绍

该模板由 Vercel 发布，定位为后台管理面板的起步项目，使用 Next.js App Router 构建，语言为 TypeScript。技术组合包括 Auth.js 负责认证、Postgres 作为数据库、Tailwind CSS 与 Shadcn UI 负责样式和组件、Vercel Analytics 负责分析、Prettier 负责格式化。

模板自带一个商品管理示例：仓库中给出了 products 表的建表 SQL，包含状态枚举、图片地址、名称、价格、库存和上架时间等字段，并提供 app/api/seed.ts 用于向数据库写入示例商品数据。认证部分通过 GitHub OAuth 应用接入，环境变量示例写在 .env.example 中。

使用前需要自行准备 Postgres 数据库并执行建表语句，同时配置 GitHub OAuth 凭据；部署环节按 README 说明在 Vercel 上创建数据库并拉取环境变量。模板本身不包含业务逻辑之外的完整产品功能，商品表结构、种子数据和页面均以示例形式提供，需按实际需求调整。

Next.jsReact后台

适合你的项目吗？

适用场景

搭建带登录认证的商品管理后台原型
学习 Next.js App Router 与 Postgres、Auth.js 的配合方式
在 Vercel 上快速部署一个可运行的管理面板示例
作为内部数据管理界面的起步代码进行二次开发

适合人群

需要 Next.js 全栈后台起步模板的开发者
希望参考 Auth.js 与 Postgres 集成方式的团队
使用 Vercel 部署并接受其数据库与分析服务的项目

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
部署时按提示创建 Postgres 数据库，并在数据库中执行仓库提供的 products 建表 SQL
2
取消注释 app/api/seed.ts 并访问 /api/seed 可写入示例商品数据
3
复制 .env.example 为 .env，按其中说明配置 GitHub OAuth 应用
4
可通过 vercel link 与 vercel env pull 拉取环境变量，再执行 pnpm install 与 pnpm dev 启动开发服务器
5
演示图片、字体、图标等第三方素材需按各自许可单独核对，数据库、托管等外部服务可能产生费用

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

允许免费使用、修改、商用和分发该版本代码。
分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
使用该模板需要创建并连接 Postgres 数据库，数据库为外部服务，可能产生费用或需要额外账号。
认证功能依赖 GitHub OAuth 应用，需要自行注册并配置 OAuth 凭据（客户端 ID 与密钥）才能登录。
按 README 流程需安装 Vercel CLI 并关联 Vercel 项目以拉取环境变量，涉及 Vercel 平台账号与外部服务。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

During the deployment, Vercel will prompt you to create a new Postgres database.
README 原文

Follow the instructions in the `.env.example` file to set up your GitHub OAuth application.
README 原文

npm i -g vercel vercel link vercel env pull
README 原文

https://github.com/vercel/nextjs-postgres-nextauth-tailwindcss-template/blob/main/LICENSE.md https://github.com/vercel/nextjs-postgres-nextauth-tailwindcss-template/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-08。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料较完整 · 92 / 100
技术栈: Next.js · React
网站类型: 后台

这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间: 2026-01-15
截图检查日期: 2026-10-08

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Next.js。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

审核声明: [email protected] · 2026-10-08

查看当时使用的来源资料

SHA-256: 1ad06223e0f9ad81d0b8b0d6e0d4a5e62d0da997eb82a7b15e7c1885b2e4c036

2026-10-08T11:49:51.720Z

来源文件 / 仓库

<div align="center"><strong>Next.js 15 Admin Dashboard Template</strong></div>
<div align="center">Built with the Next.js App Router</div>
<br />
<div align="center">
<a href="https://next-admin-dash.vercel.app/">Demo</a>
<span> · </span>
<a href="https://vercel.com/templates/next.js/admin-dashboard-tailwind-postgres-react-nextjs">Clone & Deploy</a>
<span>
</div>

## Overview

This is a starter template using the following stack:

- Framework - [Next.js (App Router)](https://nextjs.org)
- Language - [TypeScript](https://www.typescriptlang.org)
- Auth - [Auth.js](https://authjs.dev)
- Database - [Postgres](https://vercel.com/postgres)
- Deployment - [Vercel](https://vercel.com/docs/concepts/next.js/overview)
- Styling - [Tailwind CSS](https://tailwindcss.com)
- Components - [Shadcn UI](https://ui.shadcn.com/)
- Analytics - [Vercel Analytics](https://vercel.com/analytics)
- Formatting - [Prettier](https://prettier.io)

This template uses the new Next.js App Router. This includes support for enhanced layouts, colocation of components, tests, and styles, component-level data fetching, and more.

## Getting Started

During the deployment, Vercel will prompt you to create a new Postgres database. This will add the necessary environment variables to your project.

Inside the Vercel Postgres dashboard, create a table based on the schema defined in this repository.

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

Then, uncomment `app/api/seed.ts` and hit `http://localhost:3000/api/seed` to seed the database with products.

Next, copy the `.env.example` file to `.env` and update the values. Follow the instructions in the `.env.example` file to set up your GitHub OAuth application.

```bash
npm i -g vercel
vercel link
vercel env pull
```

Finally, run the following commands to start the development server:

```bash
pnpm install
pnpm dev
```

You should now be able to access the application at http://localhost:3000.

反馈内容错误