Next.js

This guide walks you through deploying a Next.js application on Out Plane using Git-driven deployment with a Dockerfile.

Prerequisites

• An Out Plane account
• A GitHub account
• Node.js 18+ installed on your machine
• Git installed on your machine

Create the Next.js App

Create a new Next.js project:

npx create-next-app@latest my-nextjs-app
cd my-nextjs-app

When prompted, select your preferred options. This guide works with both App Router and Pages Router.

Configure for Production

Open next.config.js (or next.config.mjs) and enable standalone output:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone',
};

module.exports = nextConfig;

Create the Dockerfile

Create a file called Dockerfile in your project root:

FROM node:20-alpine AS deps
WORKDIR /app
COPY package*.json ./
RUN npm ci

FROM node:20-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npm run build

FROM node:20-alpine AS runner
WORKDIR /app

ENV NODE_ENV=production

COPY --from=builder /app/public ./public
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static

EXPOSE 3000

ENV PORT=3000
ENV HOSTNAME="0.0.0.0"

CMD ["node", "server.js"]

Create a .dockerignore file:

node_modules
.next
.git
.env*
*.md
.DS_Store

Test Locally

Run the development server to verify your app works:

npm run dev

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

To test the production build:

npm run build
npm start

Push to GitHub

Initialize a Git repository and push to GitHub:

git init
git add .
git commit -m "Initial commit"
git remote add origin [email protected]:YOUR_USERNAME/my-nextjs-app.git
git branch -M main
git push -u origin main

Replace YOUR_USERNAME with your GitHub username.

Deploy on Out Plane

Step 1: Install GitHub App

1. Go to console.outplane.com
2. Navigate to Applications from the sidebar
3. Click Deploy Application
4. If prompted, click Install GitHub App
5. Select which repositories Out Plane can access
6. Click Install and you'll be redirected back

Step 2: Select Repository

1. Find your repository in the list
2. Click to select it
3. Choose the branch to deploy (default: main)
4. Set Root Directory to /

Step 3: Configure Build

Step 4: Select Resources

Next.js apps typically need more memory for building. Choose an appropriate instance:

Step 5: Configure Scaling

• Min Scale: Set to 1 for always-on (recommended for SSR)
• Max Scale: Set based on expected traffic

Step 6: Environment Variables

Click Add Variable to add environment variables:

For client-side variables, use the NEXT_PUBLIC_ prefix:

Step 7: Deploy

1. Review your configuration
2. Click Create Application
3. Wait for the build to complete (typically 3-5 minutes for Next.js)

Step 8: Access Your App

Once the deployment status shows Ready:

1. Go to the application Overview tab
2. Find your domain: my-nextjs-app.outplane.app
3. Click to open your live application

Automatic Deployments

Push to your branch to trigger automatic deployments:

git add .
git commit -m "Add new feature"
git push origin main

Database Connection

To connect to a PostgreSQL database, add the connection string as an environment variable:

1. Create a database in the Databases section
2. Copy the connection string
3. Add it as DATABASE_URL in your app's environment variables

Example with Prisma:

// lib/prisma.ts
import { PrismaClient } from '@prisma/client';

const globalForPrisma = globalThis as unknown as { prisma: PrismaClient };

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

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

Troubleshooting

Build fails with memory error

If your build fails with a memory error, add this environment variable:

Or select a larger instance type.

Static files not loading

Ensure your Dockerfile copies both standalone and static directories correctly.

Next Steps

• Add a custom domain
• Connect a database
• Set up monitoring