This is a comprehensive Next.js dashboard application demonstrating modern web development practices, including:

• Server-side rendering with Next.js 15
• Authentication with NextAuth
• Tailwind CSS for styling
• PostgreSQL database integration
• Prisma for database migrations
• TypeScript for type safety

For more information, see the course curriculum on the Next.js Website.

Before getting started, ensure you have the following installed:

• Node.js (recommended version 20.x or later)
• Docker (optional, for database containerization)
• PostgreSQL (if not using Docker)
• OpenSSL (for generating secure tokens)

git clone https://github.com/jesuspinar/nextjs-dashboard.git
cd nextjs-dashboard

Copy the example environment configuration:

cp .env.example .env

Open the .env file and update the following PostgreSQL connection parameters:

# Database Connection
POSTGRES_HOST=localhost
POSTGRES_PORT=5432
POSTGRES_USER=your_username
POSTGRES_PASSWORD=your_secure_password
POSTGRES_DATABASE=your_database_name

# NextAuth Configuration
NEXTAUTH_SECRET=$(openssl rand -base64 32)
NEXTAUTH_URL=http://localhost:3000

For a quick and consistent database setup, use Docker:

# Pull PostgreSQL image
docker pull postgres

# Run PostgreSQL container
docker run --name dashboard-postgres \
  -e POSTGRES_PASSWORD=your_secure_password \
  -p 5432:5432 \
  -d postgres

If you prefer a local PostgreSQL installation:

# Start PostgreSQL service
sudo service postgresql start

# Connect to postgres
psql postgresql://your_user:your_password@localhost:5432

# Create new database
$ CREATE DATABASE your_database_name;

# Focus the new database
$ \c your_database_name

# Adds uuid-ossp extension to new database
$ CREATE EXTENSION IF NOT EXISTS "uuid-ossp";

# Close the connection
$ exit

# Use pnpm, npm, or yarn
npm install
# or
pnpm install
# or
yarn install

# Deploy Prisma schema to the database
npm run schema_to_db

# Run database seed
npm run seed

# Generate a secure random token for NextAuth
openssl rand -base64 32

Copy this generated token into your .env file for AUTH_SECRET.

# Start development server with Turbopack
npm run dev

# Open http://localhost:3000 in your browser

• Ensure all dependencies are installed correctly
• Check PostgreSQL connection parameters
• Verify environment variables are properly set