You can deploy a [Next.js](https://nextjs.org/) application on Render in just a few clicks. A sample app for this quickstart is deployed at [https://next-js.onrender.com](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](/content/docs/web-services/index.html) for a full Next.js app with server-side logic.
- [Deploy a static site](/content/docs/static-sites/index.html) for a Next.js [static export](https://nextjs.org/docs/pages/guides/static-exports).

## Deploy as a web service

1. Fork [nextjs-hello-world](https://github.com/render-examples/nextjs-hello-world/tree/master) 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:

|  |  |
| --- | --- |
| **Language** | `Node` |
| **Build Command** | `yarn; yarn build` |
| **Start Command** | `yarn start` |

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

See [Specifying a Node Version](/content/docs/node-version/index.html) if you need to customize the version of Node.js used for your app.

## Deploy as a static site

1. Fork [nextjs-hello-world](https://github.com/render-examples/nextjs-hello-world/tree/master) on GitHub.

2. Modify the code according to the instructions in the [nextjs-hello-world README](https://github.com/render-examples/nextjs-hello-world/blob/master/README.md).

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

4. Use the following values during creation:

|  |  |
| --- | --- |
| **Build Command** | `yarn; yarn build` |
| **Publish Directory** | `out` |

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`
```bash
#!/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`