Deploy a Next.js App – Render Docs

You can deploy a Next.js application on Render in just a few clicks. A sample app for this quickstart is deployed at https://next-js.onrender.com.

Depending on your app, you deploy Next.js either as a Node.js web service or as a static site:

• Deploy a web service for a full Next.js app with server-side logic.
• Deploy a static site for a Next.js static export.

Deploy as a web service

1. Fork nextjs-hello-world on GitHub.

2. Create a new Web Service on Render, and give Render permission to access your new repo.

3. Use the following values during creation:

That's it! Your web service will be live on your Render URL as soon as the build finishes.

See Specifying a Node Version if you need to customize the version of Node.js used for your app.

Deploy as a static site

1. Fork nextjs-hello-world on GitHub.

2. Modify the code according to the instructions in the nextjs-hello-world README.

3. Create a new Static Site on Render, and give Render permission to access your new repo.

4. Use the following values during creation:

That's it! Your static site will be live on your Render URL as soon as the build finishes.

Caching Next.js builds (optional)

Next.js stores the output of its compiler in .next/cache to speed up subsequent builds. Render services do not persist this directory, which means builds do not benefit from the cache by default. If Next.js does not find its cache, it outputs No build cache found in your build logs.

Render does persist the directory specified by $XDG_CACHE_HOME between builds. You can add a build script like the following to your repository that restores .next/cache from $XDG_CACHE_HOME/next before each build, then saves it again to $XDG_CACHE_HOME/next afterward. This enables cache reuse between builds.

build.sh

#!/usr/bin/env bash
set -e

build_with_cache() {
  if [[ -d "$XDG_CACHE_HOME"/next ]]; then
    echo "Copying cached .next/cache"
    mkdir -p .next
    rsync -a "$XDG_CACHE_HOME"/next/ .next/cache
  else
    echo "No cached .next/cache found"
  fi

echo "Building"

yarn build

echo "Done, caching .next/cache"
  rsync -a .next/cache/ "$XDG_CACHE_HOME"/next
}

if [[ "$RENDER" ]]; then
  build_with_cache
else
  yarn build
fi

1. Save this script to a file in your repository root: build.sh

2. Change the permissions to allow the file to be executable: chmod u+x ./build.sh

3. Update your service's Build Command: yarn install && ./build.sh