How to Deploy a Next.js Static Site to Render.com

Vercel is excellent. It’s also tightly coupled to Next.js in ways that can create lock-in, and its pricing scales fast once you’re managing multiple client sites. Render.com gives you a clean static hosting environment, a dead-simple deploy API, and predictable pricing. If you’re running an agency or building sites for clients you need to manage long-term, it’s worth knowing how to deploy Next.js there.

This is the full setup, start to finish.

Prerequisites

Node.js 18+ installed

A GitHub account

A Render.com account (free tier works)

10 minutes

Step 1: Create a Next.js Project with Static Export

npx create-next-app@latest my-site --typescript --tailwind --app
cd my-site

Open next.config.js (or next.config.ts) and add the static export setting:

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

export default nextConfig;

The output: ‘export’ flag tells Next.js to generate a fully static out/ directory instead of a Node.js server. The trailingSlash: true ensures clean URLs that Render handles correctly.

Test it locally:

npm run build

You should see an out/ directory generated. That’s your static site.

Step 2: Push to GitHub

git init
git add .
git commit -m "Initial commit"
gh repo create my-site --public --push --source=.

Or create the repo manually on GitHub and add the remote. Either way, you need the code on GitHub before Render can see it.

Step 3: Create the Render Static Site

Log into render.com and click New → Static Site

Connect your GitHub account if you haven’t already

Select your repo

Configure the service:

Name: my-site (or whatever you want)

Branch: main

Build Command: npm ci && npm run build

Publish Directory: out

Click Create Static Site

Render will kick off the first build immediately. It usually takes 60–90 seconds for a fresh Next.js project.

Step 4: Add a Custom Domain (Optional)

In your Render service dashboard, go to Settings → Custom Domains and add your domain. Render provides the DNS records — typically a CNAME pointing to your-site.onrender.com.

Free SSL is included and provisioned automatically.

Step 5: Set Up Auto-Deploy

By default, Render auto-deploys on every push to main. That’s usually what you want. If you prefer manual deploys (useful for client sites where you want to QA before going live), go to Settings → Auto-Deploy and switch it off.

Handling 404s and Redirects

Create a public/_redirects file in your Next.js project for any custom redirect rules:

/old-page/    /new-page/    301
/blog          /blog/        301

Render supports Netlify-style _redirects syntax. This file gets copied into your out/ directory at build time and Render picks it up automatically.

For a custom 404 page, create app/not-found.tsx in your Next.js app — it will be output as 404.html in the static export, and Render will serve it automatically for unmatched routes.

Environment Variables

If your site uses environment variables at build time (API keys for fetching content, etc.), add them in Render under Settings → Environment Variables before the build runs. They’re available as process.env.YOUR_VAR during next build.

Note: with static export, environment variables are only available at build time, not runtime. Plan your architecture accordingly.

That’s It

Your site is live, auto-deploying on push, with SSL and a CDN. Total time from npx create-next-app to live URL: well under 10 minutes once you’ve done it once.

The Render dashboard also gives you build logs, rollback to previous deploys, and a clean API for automated deployments — which we cover in depth in the post on automating client builds.

Static Signal is published by Neuron Web Development.