How to Deploy a Next.js App for Free on PandaStack

# How to Deploy a Next.js App for Free on PandaStack

Next.js is one of the most popular React frameworks in 2026 — it handles routing, server-side rendering, API routes, and image optimization out of the box. PandaStack supports two deployment modes for Next.js: static export (for purely static sites) and containerized deployment (for full Next.js features including API routes and server components).

This tutorial walks you through both methods.

Prerequisites

• A Next.js application pushed to a GitHub repository
• A free PandaStack account at [dashboard.pandastack.io](https://dashboard.pandastack.io)
• Node.js 18+ and npm installed locally

Option A: Static Export Deployment

If your Next.js app does not use API routes, server components, or middleware, you can export it as a fully static site.

Step 1: Configure Static Export

Add this to your next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
}
module.exports = nextConfig

Step 2: Verify the Build Locally

npm run build
# Output should be in the 'out' directory
ls out/

Step 3: Deploy via PandaStack Dashboard

1. 1Log in to [dashboard.pandastack.io](https://dashboard.pandastack.io)
2. 2Click New Deployment → Static Site
3. 3Connect your GitHub repository
4. 4Set Build Command: npm run build
5. 5Set Output Directory: out
6. 6Click Deploy

Every push to your main branch will trigger a new deploy automatically.

Step 4: Deploy via CLI

npm install -g @pandastack/cli
panda login
panda deploy --type static --build-cmd "npm run build" --output out

Option B: Container Deployment (Full Next.js)

For Next.js apps that use API routes, server actions, middleware, or server components, you need a container deployment.

Step 1: Create a Dockerfile

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/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./
EXPOSE 3000
CMD ["npm", "start"]

Step 2: Add a .dockerignore File

node_modules
.next
.git
*.md

Step 3: Connect to PandaStack

1. 1Log in to [dashboard.pandastack.io](https://dashboard.pandastack.io)
2. 2Click New Deployment → Container App
3. 3Connect your GitHub repository
4. 4PandaStack detects the Dockerfile automatically
5. 5Set any environment variables (API keys, database URLs)
6. 6Click Deploy

Step 4: Set Environment Variables

Go to your deployment settings and add your environment variables:

NEXT_PUBLIC_API_URL=https://api.yoursite.com
DATABASE_URL=postgresql://...

Sensitive values are encrypted and never exposed in build logs.

Connecting a Custom Domain

Once deployed, go to your deployment → Domains → Add Domain. Point your CNAME to the PandaStack hostname, and SSL is provisioned automatically.

Deploy Button

Add this to your project README for one-click deploys:

[![Deploy to PandaStack](https://pandastack.io/deploy-button.svg)](https://dashboard.pandastack.io/deploy?repo=owner/my-nextjs-app)

Summary

• Use static export for marketing sites, blogs, and documentation
• Use container deployment for apps with API routes, server components, or SSR
• PandaStack handles GitHub integration, SSL, and custom domains automatically

Full docs: [docs.pandastack.io](https://docs.pandastack.io).