Introduction

He is a simple way on how to integrate nextjs , drizzle and noen

1 Create Nextjs App

npx create-next-app@latest

2 Install drizzle and noen

npm install @neondatabase/serverless drizzle-orm

3 Create a Schema and Database Connection

// file: src/app/db/schema.ts
import { pgTable, text, timestamp } from 'drizzle-orm/pg-core';

/**
 * This table stores quotes submitted by users.
 */
export const UserMessages = pgTable('user_messages', {
  // This will be the user ID provided by Clerk
  user_id: text('user_id').primaryKey().notNull(),
  createTs: timestamp('create_ts').defaultNow().notNull(),
  message: text('message').notNull()
});

To use Neon’s serverless driver with Drizzle ORM, create a file named src/app/db/index.ts and add the following code. Exporting the Drizzle instance from a file means it’s created on application startup and exported as a singleton that other modules can import and reuse to execute typesafe SQL queries against your Postgres database hosted by Neon.

// file: src/app/db/index.ts
import { neon } from "@neondatabase/serverless";
import { drizzle } from "drizzle-orm/neon-http";
import { Users } from "./schema";

if (!process.env.DATABASE_URL) {
  throw new Error("DATABASE_URL must be a Neon postgres connection string");
}

const sql = neon(process.env.DATABASE_URL);

export const db = drizzle(sql, {
  schema: { Users },
});

Next, create a file named .env.local in the root of the Next.js project directory and add your database URL from the Neon Console as an environment variable named DATABASE_URL.

Should Look Like this

# Copy this from your project dashboard on https://console.neon.tech
DATABASE_URL=postgresql://user:pass@ep-adj-noun-12345.us-east-2.aws.neon.tech/mydatabase?sslmode=require

Start your Application

4 Generate and Apply Database Migrations using Drizzle Kit

Before using Drizzle ORM to perform database operations in your application, you’ll need to generate and apply schema migrations to your database. Drizzle Kit streamlines this process by detecting changes in your schema.ts file and generating the necessary SQL migrations to apply to your database.

To get started, add Drizzle Kit and dotenv to your project’s development dependencies.

npm i drizzle-kit dotenv -D

Next, create a file named drizzle.config.ts at the root of your repository and add the following configuration.

import { config } from "dotenv";
import { defineConfig } from "drizzle-kit";

config({ path: ".env.local" });

export default defineConfig({
  schema: "./app/db/schema.ts",
  out: "./migrations",
  dialect: "postgresql",
  dbCredentials: {
    url: process.env.DATABASE_URL!,
  },
});

Now you can use the generate command from the Drizzle Kit CLI to generate migration files. Run the following command to generate migrations for your user schema.

npx drizzle-kit generate

Now in you project folder you will see a new folder called migration ok that good.

Now you can also view that the table been generated in drizzle studion

npx drizzle-kit studio

Now I finnally you need to migrate the table to the noenserless db

npx drizzle-kit migrate --config=./drizzle.config.ts

Than if you go to your neon dashboard you will see new table been added

resource that i used from Noen Docs

Thanks for you time see you next time