How to Deploy a Next.js Application in 1 Minute

Next.js is the most popular React framework for building full-stack web applications. It supports server-side rendering, static generation, and API routes out of the box. Deploying a Next.js app to production usually means configuring servers, SSL certificates, and build pipelines.

With Out Plane, you can deploy your Next.js application in under a minute — directly from your GitHub repository. No Vercel lock-in, no infrastructure management. This guide shows you exactly how.

What You'll Need

Before starting, make sure you have:

• Node.js 20+ installed on your machine
• A GitHub account
• A Next.js application in a GitHub repository
• A package.json with your dependencies

Don't have Node.js installed? Download it from nodejs.org:

• Windows: Download the LTS installer from nodejs.org
• macOS: Use brew install node or download from nodejs.org
• Linux: Run curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash - && sudo apt install -y nodejs (Ubuntu/Debian)

Once Node.js is installed, create a project folder:

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

If you don't have a Next.js app yet, use our example below.

Quick Start: Sample Next.js Application

Here's a minimal Next.js application you can use. Create a new project with the App Router:

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

Replace app/page.tsx with a simple page:

export default function Home() {
  return (
    <main style={{ padding: "2rem", fontFamily: "system-ui" }}>
      <h1>Hello from Next.js!</h1>
      <p>Deployed on Out Plane</p>
    </main>
  );
}

Add a health check API route at app/api/health/route.ts:

import { NextResponse } from "next/server";

export async function GET() {
  return NextResponse.json({ status: "healthy" });
}

Update next.config.ts for production deployment:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  output: "standalone",
};

export default nextConfig;

The output: "standalone" setting creates a self-contained build that includes only the files needed for production. This is required for Docker-based deployments.

Create a Dockerfile in the project root:

FROM node:20-alpine AS base

# Install dependencies
FROM base AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package.json package-lock.json* ./
RUN npm ci

# Build the application
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npm run build

# Production image
FROM base AS runner
WORKDIR /app
ENV NODE_ENV=production

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000
ENV PORT=3000
ENV HOSTNAME="0.0.0.0"

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

Push this code to a GitHub repository, and you're ready to deploy.

Can I Deploy Next.js Without Vercel?

Yes. While Vercel built Next.js, the framework runs on any Node.js hosting platform. Out Plane supports full Next.js features including server-side rendering (SSR), API routes, and incremental static regeneration (ISR). You get the same capabilities without platform lock-in.

Deploy in 3 Steps

Step 1: Connect Your Repository

1. Go to console.outplane.com
2. Sign in with your GitHub account
3. Select your Next.js repository from the list

Out Plane automatically detects your Next.js application and configures the build process.

Step 2: Configure Your Application

Configure the following settings in the create application form:

Build Method

Select how Out Plane should build your application:

• Dockerfile (Recommended for Next.js): Uses the multi-stage Dockerfile above for optimal image size and SSR support.
• Buildpacks: Automatically detects Node.js and runs npm run build. Works for simpler Next.js applications.

For production Next.js applications with SSR, Dockerfile with output: "standalone" is the recommended approach.

Basic Settings

• Port: Set to 3000
• Branch: Select main or your preferred branch
• Region: Choose the region closest to your users

Environment Variables (Optional)

If your application uses environment-specific configuration, add them here. Next.js uses two types of environment variables:

• Server-only: Standard variables like DATABASE_URL, API_SECRET
• Client-exposed: Prefixed with NEXT_PUBLIC_ to be available in the browser

Add variables using the Add button or Raw Edit for bulk entry:

DATABASE_URL=postgres://user:password@host/database
API_SECRET=your-api-secret
NEXT_PUBLIC_APP_URL=https://your-app.outplane.app

Step 3: Deploy

Click Deploy Application and watch the build process:

1. Queued → Waiting for resources
2. Building → Installing dependencies, running next build
3. Deploying → Starting your Next.js application
4. Ready → Your app is live

Once the status shows Ready, your application is live. You can find your application URL at the top of the deployment page. Click the URL to open your Next.js app in a new tab. SSL is automatically configured.

Production Best Practices

Standalone Output Mode

Always use output: "standalone" in next.config.ts for containerized deployments. This creates a minimal production bundle that doesn't require node_modules:

const nextConfig: NextConfig = {
  output: "standalone",
};

The standalone build copies only the necessary files, resulting in smaller Docker images and faster deployments.

Optimize Images

Next.js Image Optimization works automatically in production. For external image sources, configure allowed domains:

const nextConfig: NextConfig = {
  output: "standalone",
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "your-cdn.com",
      },
    ],
  },
};

Cache and Performance

Next.js automatically handles caching for static pages and ISR. For API routes that need caching, use the revalidate option:

// app/api/data/route.ts
export const revalidate = 60; // Revalidate every 60 seconds

export async function GET() {
  const data = await fetchData();
  return Response.json(data);
}

Environment-Based Configuration

Keep sensitive data out of your codebase:

// Good - read from environment
const apiKey = process.env.API_SECRET;
const dbUrl = process.env.DATABASE_URL;

// Bad - hardcoded values
const apiKey = "sk-12345";

Remember: only variables prefixed with NEXT_PUBLIC_ are exposed to the browser. Server-side variables remain private.

Connecting a Database

Most Next.js applications need a database. Out Plane provides managed PostgreSQL:

1. Go to Databases in the sidebar
2. Click Create Database
3. Select PostgreSQL version and region
4. Copy the connection URL

Add the connection URL as an environment variable:

DATABASE_URL=postgres://user:password@host/database

Use it in your Next.js application with an ORM like Prisma:

// lib/prisma.ts
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;
}

This pattern prevents creating multiple Prisma instances during development hot-reloads.

Custom Domain Setup

Replace the default .outplane.app URL with your own domain:

1. Navigate to Domains
2. Click Map Domain
3. Enter your domain (e.g., app.yourdomain.com)
4. Add the DNS records shown to your domain registrar

Update your NEXT_PUBLIC_APP_URL environment variable to reflect the new domain. SSL certificates are automatically provisioned once DNS propagates.

Monitoring Your Application

After deployment, monitor your Next.js application:

• Logs: View real-time application logs including server-side rendering logs
• Metrics: Track CPU, memory, and network usage
• HTTP Logs: Analyze incoming requests, response times, and status codes

Access these from the sidebar in your application dashboard.

Troubleshooting

Application Won't Start

Check the port configuration. Make sure you set the port to 3000 in the application settings. If using a Dockerfile, ensure EXPOSE 3000 and ENV PORT=3000 are set correctly.

Build Fails with "standalone" Error

Verify next.config.ts includes standalone output. The output: "standalone" setting must be present for Docker deployments:

const nextConfig: NextConfig = {
  output: "standalone",
};

Environment Variables Not Available in Browser

Use the NEXT_PUBLIC_ prefix. Only variables starting with NEXT_PUBLIC_ are bundled into the client-side JavaScript. Server-only variables are not accessible in React components.

# Available in browser
NEXT_PUBLIC_API_URL=https://api.example.com

# Server-only (not in browser)
DATABASE_URL=postgres://...

500 Internal Server Error

Check your application logs. Navigate to Logs in the sidebar to see Node.js error messages and stack traces.

Static Assets Not Loading

Verify the static files are copied in the Dockerfile. The standalone output doesn't include the public folder or .next/static by default. Make sure your Dockerfile copies both:

COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

Slow Cold Starts

Optimize your imports. Heavy dependencies imported at the top level increase cold start times. Use dynamic imports for large libraries:

const HeavyComponent = dynamic(() => import("./HeavyComponent"), {
  ssr: false,
});

Next Steps

Your Next.js application is now deployed and running in production. Here's what to explore next:

• Scale your application: Adjust instance types and auto-scaling settings for higher traffic
• Set up CI/CD: Enable automatic deployments on every git push
• Add monitoring: Integrate with external monitoring tools via Out Plane's metrics export
• Configure caching: Add Redis for session storage and API response caching

Summary

Deploying a Next.js application to Out Plane takes three steps:

1. Connect your GitHub repository
2. Configure port (3000), environment variables, and build method
3. Deploy and get your live URL with automatic HTTPS

No server configuration, no manual SSL setup, no infrastructure management. Full support for server-side rendering, API routes, and static generation.

Ready to deploy your Next.js application? Get started with Out Plane and receive $20 in free credit.