Next.js 15 Admin Dashboard Template

This template is a starter kit for building admin dashboards using the Next.js App Router. It integrates several modern technologies for a full-stack experience:

• Framework: Next.js (App Router)
• Language: TypeScript
• Authentication: Auth.js
• Database: Postgres (via Vercel Postgres)
• Styling: Tailwind CSS
• UI Components: Shadcn UI
• Deployment: Vercel
• Analytics: Vercel Analytics
• Formatting: Prettier

After deploying to Vercel and creating a Postgres database, you must manually create the required tables. Use the following SQL schema to define the products table and the status enum type in your Vercel Postgres dashboard:

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

To set up your local development environment, follow these steps:

1. Copy .env.example to .env and update the values. Specifically, follow the instructions in .env.example to configure your GitHub OAuth application.
2. Use the Vercel CLI to link your project and pull environment variables:

npm i -g vercel
vercel link
vercel env pull

3. Install dependencies and start the development server using pnpm:

pnpm install
pnpm dev

Once running, the application will be available at http://localhost:3000.

To populate your database with initial data, follow these steps:

1. Locate app/api/seed.ts and ensure the code is uncommented.
2. Start your development server.
3. Navigate to http://localhost:3000/api/seed in your browser to trigger the seeding process.

The getProducts function retrieves products from the database. It supports two modes:

1. Search Mode: If a search string is provided, it performs a case-insensitive search (ilike) on the product name. In this mode, it returns up to 1000 results and sets newOffset to null.
2. Pagination Mode: If no search is provided, it uses an offset to fetch products in batches of 5. It returns the products, the totalProducts count, and a newOffset (the next offset to use, or null if no more products are available).

The following members are exported from the authentication configuration in lib/auth.ts:

• handlers: The NextAuth route handlers used to set up the authentication API endpoints.
• signIn: A function to initiate the sign-in process.
• signOut: A function to initiate the sign-out process.
• auth: A function to retrieve the current session (typically used in Server Components, Server Actions, or Middleware).

The products table is defined using Drizzle ORM. It includes the following fields:

• id: serial primary key
• imageUrl: text (not null)
• name: text (not null)
• status: enum ('active', 'inactive', 'archived')
• price: numeric (precision 10, scale 2)
• stock: integer
• availableAt: timestamp

You can use the SelectProduct type for type-safe product objects and insertProductSchema (a Zod schema) for validating new product entries.

The cn utility is used to conditionally join class names and resolve Tailwind CSS class conflicts. It combines clsx for conditional logic and tailwind-merge to ensure that the last class defined in the arguments takes precedence in the final CSS output (e.g., preventing p-2 p-4 from causing unexpected behavior).

Use this function whenever you need to pass dynamic classes to a component or merge custom classes with base styles.