nextjs-typescript-and-postgresql

Next.js TypeScript and PostgreSQL is a minimal full-stack TanStack Start boilerplate (despite its name) that combines React 19, Vite, Prisma ORM, PostgreSQL, Tailwind CSS v4, Shadcn UI, Zod, and Auth.js Google OAuth for quickly scaffolding server-rendered web apps. Created by danybeltran, this template is optimized for deployment to Vercel and includes a one-click deploy flow.

What is this template?

Next.js TypeScript and PostgreSQL is an open-source application template that produces a full-stack web app with server-side rendering (SSR), type-safe loaders, a PostgreSQL database layer via Prisma, and Google OAuth login. You provide environment variables for database credentials and OAuth keys, and the template gives you a working app with authentication, data fetching, and a Tailwind-styled UI. It runs on the TanStack Start meta-framework, which is built on Vite rather than Next.js, and the codebase is published on GitHub under the danybeltran account.

Key Features

• Meta-framework — TanStack Start provides a Vite-based architecture with full SSR and hydration, plus type-safe loaders for data fetching.
• Styling — Tailwind CSS v4 is compiled natively using @tailwindcss/vite, so no PostCSS configuration is needed.
• ORM and database — Prisma ORM is preconfigured for PostgreSQL, and the README documents Supabase as the recommended database host, including DATABASE_URL and DIRECT_URL variables.
• Authentication — Auth.js (@auth/core) is wired for Google OAuth, with instructions for setting the authorized redirect URI to http://localhost:3000/api/auth/callback/google.
• UI components — Shadcn UI components are included, giving you copy-paste React components styled with Tailwind.
• Validation — Zod is part of the stack for schema and form validation.
• State management — atomic-utils is used for client-side state caching and data queries.

Who is it for?

Full-stack developers who want a modern React 19 setup that uses Vite and TanStack Start instead of Next.js benefit from this template's ready-to-run auth and database wiring. Teams planning a PostgreSQL-backed product (especially with Supabase) can use it as a foundation for SaaS apps that need Google login from day one. Developers who prefer Bun as their package manager will appreciate the documented bun install, bun run dev, bun run build, and bun run start commands.

What can you do with it?

• Scaffold a SaaS application: Get a preconfigured environment with Google OAuth, Prisma schema, and server-rendered routes so you can add your business logic immediately.
• Prototype a full-stack app: Use the type-safe loaders and data-fetching setup to build a Vite-powered React app with SSR and a PostgreSQL backend.
• Deploy to Vercel: The repository includes a Vercel Deploy button that clones the repo and walks you through setting the required environment variables.

How does this template work?

Clone the repository, create a .env file with DATABASE_URL, DIRECT_URL, NEXTAUTH_SECRET, and Google OAuth credentials, then run bun install and bun run dev to start the development server on port 3000. The dev command automatically runs Prisma generate and push. For production, run bun run build followed by bun run start.

FAQ

Is this template actually Next.js?

No — despite the repository name nextjs-typescript-and-postgresql, the template is built on TanStack Start with Vite, React 19, and Prisma. The name does not match the framework inside.

What do I need for the database?

You need a PostgreSQL database. The README points to Supabase's Prisma integration docs to get DATABASE_URL and DIRECT_URL values.

How do I generate NEXTAUTH_SECRET?

Run openssl rand -base64 32 or python3 -c "import secrets; print(secrets.token_urlsafe(32))" to generate a secure secret.

What is the default development port?

Port 3000, as configured in vite.config.ts.

Does this template support production builds?

Yes, bun run build compiles client and SSR environments, and bun run start previews the production application.