# Deploy a Next.js App

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.

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

- [Deploy a web service](web-services) for a full Next.js app with server-side logic.
- [Deploy a static site](static-sites) 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](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](https://github.com/render-examples/nextjs-hello-world/tree/master) on GitHub.
1. 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).
1. Create a new *Static Site* on Render, and give Render permission to access your new repo.
1. 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.

```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`

---

##### Appendix: Glossary definitions

###### web service

Deploy this *service type* to host a dynamic application at a public URL.

Ideal for full-stack web apps and API servers.

Related article: https://render.com/docs/web-services.md

###### static site

Deploy this *service type* to host a static website (HTML/CSS/JS) over a global CDN at a public URL.

Related article: https://render.com/docs/static-sites.md