Download Docker Desktop we are going to need it.
- Step 1: Go into your IDE and create a new NEXT App
npx create-next-app@latest
Name your App anything and take all the default settings.
- Step 2: Now we have to create a Dockerfile and docker-compose.yml file in our root folder of the NEXT App.
-
Step 3: Now we have to make our docker image for our NEXT app.
Open the Dockerfile in your root folder & copy these commands which help us to make the docker image.
# Use the Node.js 18 Alpine Linux image as the base image
FROM node:18-alpine
# Set the working directory inside the container to /app
WORKDIR /app
# Copy package.json and package-lock.json files into the working directory
COPY package*.json ./
# Install the dependencies specified in package.json
RUN npm install
# Copy all the files from the local directory to the working directory in the container
COPY . .
# Build the project (typically used for building front-end assets)
RUN npm run build
# Copy the .next directory to the working directory in the container (if needed for a Next.js app)
COPY .next ./.next
# Run the application in development mode
CMD ["npm", "run", "dev"]
Note if you want to build in production please look at the NEXT.JS tutorial for docker container
- Step 4: Open the docker-compose.yml file and copy this yaml script in the file.
# Use Docker Compose file format version 3.9
version: '3.9'
services:
# Define the service named 'app'
app:
# Build the Docker image using the Dockerfile in the current directory
build:
context: .
dockerfile: Dockerfile
# Name the container 'nextjs14-container'
container_name: nextjs14-container
# Map port 3000 on the host to port 3000 in the container
ports:
- '3000:3000'
# Avoid mounting node_modules from the host to the container
volumes:
- /app/node_modules
- Step 5: Now, our NEXTJS App is dockerized and we can run the
docker-compose up –build -d
Once finished our image now becomes a container.
docker ps
Using docker ps we can check if our container is running.
Note: Running containers are also shown and can be managed via the docker desktop application instead of CLI.
Now that NextJS is dockerized we can start to implement the postgres database.
-
Step 1: Create a .env file in the root folder and also add it in the .gitignore file.
Contents of .env file:
DATABASE_URL="postgresql://postgres:example@localhost:5432/postgres"
-
Step 2: Now we have to install the drizzle adapters
You can learn more about drizzle here
npm i drizzle-orm postgres
npm i -D drizzle-kit
Also install ZOD
npm i zod
-
Step 3: Create folder named lib in src directory and
env.tsfile in the lib folder.
Contents of env.ts zod environment variable validation
import {z} from 'zod'
const envSchema = z.object({
DATABASE_URL:z.string().url()
})
export const env = envSchema.parse(process.env)
-
Step 4: Create a folder named db in src directory and
index.ts&schema.tsfiles in it.
Contents of index.ts with zod schema imported from the env.ts file
import { drizzle } from 'drizzle-orm/postgres-js';
import postgres from 'postgres';
import {env} from '@/lib/env'
import * as schema from './schema'
const pg = postgres(env.DATABASE_URL)
const db = drizzle(pg,{schema})
export {db,pg}
Contents of schema.ts
import { pgTable,serial,text, timestamp } from "drizzle-orm/pg-core";
export const Posts=pgTable('posts',{
id:serial("id").primaryKey().notNull(),
title:text('title').notNull(),
body:text('body').notNull(),
createdAt:timestamp('createdAt',{
withTimezone:true,
mode:"date"
}).notNull().defaultNow(),
updatedAt:timestamp('updatedAt',{
withTimezone:true,
mode:"date"
}).notNull().defaultNow()
})
Note: Make your own required schema here this is just for demo.
The resulting file structure will look like this:
- Step 5: Go into package.json and add this under scripts:
"db:studio": "npx drizzle-kit studio --config=drizzle.config.ts",
"db:push": "npx drizzle-kit push --config=drizzle.config.ts"
for that we just need to add this extra setup in the docker compose file which takes an already built postgres image which will be our container.
drizzle-db:
image: postgres
restart: always
container_name: drizzle-db
ports:
- 5432:5432
environment:
POSTGRES_PASSWORD: example
PGDATA: /data/postgres
volumes:
- postgres:/data/postgres
volumes:
postgres:
Your docker-compose file will look like this now:
-
Last few steps:
Create the docker container make sure docker desktop is running:
> docker compose up –build -d
Migrate the database schema:
npm run db:push
Now you can interact with your database using drizzle orm
If you guys liked the blog connect with me on LinkedIn
Subscribe To Our Newsletter
Enter your email address to subscribe
