Run your Next.js SSR app on Deno Deploy
Next.js is a powerful metaframework built on top of React that simplifies the process of building server-rendered or statically generated web applications. You can use Next.js in Deno, but what about getting it to work on Deno Deploy, our globally distributed serverless JavaScript platform?
Until now, only static Next.js sites (SSG) could be deployed into Deno Deploy. Today we are announcing the additional support for server-side rendering of Next.js apps! In this blog post, we’ll show you how to deploy a Next.js app with SSR on Deno Deploy from both linking a GitHub repo and via the command line:
🚨️ Deno 2.1 was just released, with first-class Wasm support, Long Term Support, improved package management, and more. Tune into our livestream tomorrow at 8am PT / 11am ET / 4pm UTC where the Deno team demos and discusses the biggest updates in 2.1.
Connect a GitHub repo
Linking your GitHub repo is the easiest way to deploy any project to Deno Deploy.
If you have your Next.js app as a GitHub repo, you can follow these steps to get that published to Deno Deploy. Deno Deploy will automatically detect and build Next.js apps configured with both the default and the “standalone” output.
ℹ️ If your app uses the default output configuration, Deno Deploy will use
jsr:@deno/nextjs-start
as entrypoint, which callsnext start
with the options exposed as env variables
- Fork this template or use an
existing Next.js app with
output: "standalone"
configured innext.config.ts
. - Go to https://dash.deno.com/new_project. If you do not have a Deno Deploy account, you will asked to sign up with your GitHub account for free.
- Search for your Next.js project in the repository in the dropdown menu. Deno Deploy will automatically detect that you are using Next.js and prepare the necessary build configuration.
- Click “Deploy project”. Deno Deploy will commit to your repository and run
the new
deploy.yml
action, which will build and deploy your project on every push to the main branch. Note that afterwards you are free to customize the action by editing the.github/workflows/deploy.yml
file. - Your project is now live!
deployctl
From the command line with If you prefer managing deployments from the command line, you can also use
deployctl
. This CLI can manage the
entire deployment lifecycle of your projects, from creating a
new project, tail streaming logs, promoting a previous deployment to production,
and more. It also enables you to interface with Deno Deploy from a build
environment like CI.
- If you don’t yet have
deployctl
, you can download it with the following command:
deno install -gArf jsr:@deno/deployctl
- In the root of your Next.js project, build your app:
deno task build
Deno recognizes package.json
.
Learn more about Deno’s Node and npm compatibility.
- Finally, deploy to Deno Deploy:
deployctl deploy --include=.next --include=public jsr:@deno/nextjs-start/v15
The deploy command uses the JSR package
jsr:@deno/nextjs-start/v15
, which enables
the use of next start
in Deno Deploy. If you are running Next.js version 14,
then you can use jsr:@deno/nextjs-start
.
- Your project is now live!
deployctl deploy --include=.next --include=public jsr:@deno/nextjs-start/v15
⚠ No project name or ID provided with either the --project arg or a config file.
ℹ Provisioning a new access token...
ℹ Authorization URL: https://dash.deno.com/signin/cli?claim_challenge=sj_eanwPi9woFjoXKbX51mh9IuOrEOTjoCJ7mf8sj8o
✔ Token obtained successfully
✔ Created new project 'cold-owl-38'
ℹ You can always change the project name with 'deployctl projects rename new-name' or in https://dash.deno.com/projects/cold-owl-38/settings
✔ Deploying to project cold-owl-38.
ℹ The project does not have a deployment yet. Automatically pushing initial deployment to production (use --prod for further updates).
ℹ Uploading all files from the current dir (/private/tmp/nextjs)
✔ Found 96 assets.
✔ Uploaded 97 new assets.
✔ Production deployment complete.
✔ Created config file 'deno.json'.
View at:
- https://cold-owl-38.deno.dev
- https://cold-owl-38-ge5wzec92q25.deno.dev
Note that if you prefer to use the standalone
output and want to deploy via
command line, you can
follow these steps.
What’s next
Now that your Next.js app is on Deno Deploy, there is much more you can do:
- Add persistent data storage with a database or an ORM like Drizzle or Prisma
- Write some tests to ensure your app is production ready
- Use Deno queues to manage async tasks or cron jobs
🚨️ Deno 2.1 was just released 🚨️
- first-class Wasm support
- Long Term Support release branch
- improved package management with
deno outdated
- support for embedding assets with
deno compile
and much more!
Tune into our livestream tomorrow at 8am PT / 11am ET / 4pm UTC where the Deno team demos and discusses the biggest updates in 2.1.