Environment Setup

In this section, we'll set up everything you need to start working with databases in Next.js. We'll use Prisma as our ORM (Object-Relational Mapping) tool and SQLite as our database for simplicity.

Prerequisites

Step 1: Create a New Next.js Project

First, let's create a new Next.js project with TypeScript and Tailwind CSS:

npx create-next-app@latest my-database-app --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"
cd my-database-app

Step 2: Install Prisma

Install Prisma CLI and the Prisma Client:

npm install prisma @prisma/client
npm install -D prisma

Step 3: Initialize Prisma

Initialize Prisma in your project with SQLite as the database provider:

npx prisma init --datasource-provider sqlite

This command creates:

• prisma/schema.prisma - Your database schema file
• .env - Environment variables file

Step 4: Configure Environment Variables

Your .env file should contain:

# Database
DATABASE_URL="file:./dev.db"

Step 5: Set Up Prisma Client

Create a database utility file to manage your Prisma client connection:

import { PrismaClient } from '@prisma/client'

const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClient | undefined
}

export const prisma = globalForPrisma.prisma ?? new PrismaClient()

if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma

Step 6: Install Additional Dependencies

For this tutorial, we'll also use Lucide React for icons:

npm install lucide-react

Verification

Let's verify everything is set up correctly. Your project structure should look like this:

my-database-app/
├── prisma/
│   └── schema.prisma
├── src/
│   ├── app/
│   │   ├── globals.css
│   │   ├── layout.tsx
│   │   └── page.tsx
│   └── lib/
│       └── db.ts
├── .env
├── package.json
└── ...other files