Next.js Template with TypeScript, Tailwind CSS, Shadcn/Ui, PostgreSQL, Drizzle ORM, and Better Auth.

Overview

This Next.js template gives you a solid platform for creating modern, scalable, and high-performance web apps. It includes strong tools such as React, TypeScript, Tailwind CSS, Shadcn/Ui, PostgreSQL, Drizzle ORM, and Better Auth to assist developers in creating efficient, maintainable, and secure apps with ease.

Table of Contents

• Core Technologies
• Key Packages & Integrations
• Development Tools
• Testing and Code Quality
• Project Setup
• Project Structure
• Key Features
• Available Scripts
• Configuration Files
• Environment Variables
• Troubleshooting
• Support and Community
• License

Core Technologies

• Next.js: Next.js is a powerful React framework for creating fast, SEO-friendly, and optimised online applications. It includes server-side rendering (SSR) and static site generation (SSG) by default.
• TypeScript: TypeScript improves JavaScript by introducing static types, enhancing tools, and detecting problems early on, making code easier to maintain.
• React: A popular library for creating dynamic user interfaces. React's component-based structure increases reusability and simplifies development.
• Tailwind CSS: Tailwind is a utility-first CSS framework that makes responsive design easier and speeds up the process of making current web apps that look good.
• Better Auth: This is a complete authentication solution for TypeScript that makes web apps safe and scalable.

Key Packages & Integrations

• Drizzle ORM: Drizzle ORM is a modern, type-safe Object-Relational Mapping (ORM) library that makes it easier to work with databases by cutting down on repetitive code and mistakes.
• React Query: A robust library for requesting, caching, and synchronising data in React, which improves efficiency and consistency.
• PostgreSQL: PostgreSQL is a cutting-edge, open-source relational database system noted for its production-grade stability, data integrity, and scalability.

Development Tools

• pnpm: A fast, disk-efficient package manager for large JavaScript and TypeScript applications that speeds up installation and improves dependency management.
• ESLint: A tool for detecting and resolving issues in JavaScript/TypeScript code, maintaining code quality and consistency.
• Prettier: An automatic code formatter that assists developers in maintaining a consistent code style, boosting readability, and minimising formatting errors.

---

---

Project Setup

Prerequisites

Before getting started, make sure that you have the following tools installed on your system:

• Node.js 20+
• pnpm 9+
• PostgreSQL 16+

Installation Instructions

Follow these steps to set up the project:

1. Clone the repository:

   git clone https://github.com/Its-Satyajit/nextjs-template.git

2. Install dependencies:

   pnpm install

3. Configure environment variables
   Follow the detailed instructions in the Environment Variables section.

4. Initialize the database:

   pnpm db:push

5. Start the development server:

   pnpm dev

Your application will be available at http://localhost:3000.

Project Structure

nextjs-template/
├── src/
│   ├── app/                  # Next.js App Router pages
│   │   ├── (auth)/           # Authentication routes
│   │   ├── (dashboard)/      # Protected dashboard routes
│   │   └── api/              # API routes
│   ├── components/           # React components
│   │   ├── custom/           # Custom components
│   │   ├── providers/        # React providers
│   │   ├── section/          # Layout sections
│   │   └── ui/               # UI components
│   ├── server/               # Server-side code
│   │   ├── Actions/          # Server actions
│   │   └── db/               # Database schemas
│   ├── lib/                  # Utility functions
│   └── styles/               # Global styles
└── [configuration files]     # Various config files

Key Features

Authentication and Authorization

• A complete authentication flow with Better Auth for secure user login and session management.
• Integrated email verification, password reset, and role-based access control (Admin/User).
• Middleware for route protection and limiting sensitive data access to authorised users.

Database Integration

• Type-safe database interactions with Drizzle ORM to prevent errors and assure efficient queries.
• Complete PostgreSQL integration, including automatic migrations and schema versioning for more efficient database management.

UI and Responsive Design

• Create intuitive and accessible user interfaces with Radix UI and shadcn/ui.
• Tailwind CSS is used to create fully responsive designs, with support for dark mode and bespoke theme management for modern web experiences.

Use the following commands to manage development, database, and quality assurance tasks:

# Development
pnpm dev              # Start the development server
pnpm dev:turbo        # Start with Turbo mode
pnpm dr:build:watch   # Watch routing changes

# Database
pnpm db:generate      # Generate database schemas
pnpm db:push          # Push schema changes to the database
pnpm db:studio        # Open the database UI

# Quality Assurance
pnpm check            # Run all checks
pnpm lint:fix         # Fix linting issues
pnpm format:write     # Format the codebase

Configuration Files

Key configuration files for managing project settings:

• next.config.ts - Next.js configuration for routing and optimization.
• drizzle.config.ts - Configuration for Drizzle ORM and database interactions.
• tailwind.config.ts - Tailwind CSS setup for custom styling.
• eslint.config.mjs - ESLint configuration for consistent code quality.

Environment Variables

Make sure to set the following environment variables in the .env file:

#Server 
NODE_ENV=development
DATABASE_URL=postgresql://postgres:password@host:5432/db
BETTER_AUTH_SECRET=secret
BETTER_AUTH_URL=http://localhost:3000
REACT_EDITOR=atom

MAIL_HOST=gmail
MAIL_USERNAME=[email protected]
MAIL_PASSWORD=password
MAIL_FROM=[email protected]
EMAIL_VERIFICATION_CALLBACK_URL=http://localhost:3000

GITHUB_CLIENT_ID=secret
GITHUB_CLIENT_SECRET=secret

#Client
NEXT_PUBLIC_BETTER_AUTH_URL=http://localhost:3000

Troubleshooting

Common Issues

1. Database Connection Problems

   • Ensure PostgreSQL is running and verify the DATABASE_URL.
   • Make sure the specified database exists and can be accessed.

2. Build Failures

   • Run pnpm check to detect and fix any type errors.
   • Clear the .next directory if the build persists with errors.
   • Make sure all dependencies are up to date.

3. Authentication Errors

   • Verify your environment variables, especially those related to authentication and email settings.
   • Clear browser cookies and try again if login issues occur.

Support and Community

• GitHub Repository
• Issue Tracker

License

This project is licensed under the MIT License. See the LICENSE file for more details.