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:

• Connect a GitHub repo
• From the command line with deployctl
• What’s next?

🚨️ 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 calls next start with the options exposed as env variables

1. Fork this template or use an existing Next.js app with output: "standalone" configured in next.config.ts.
2. 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.
3. 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.

4. 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.
5. Your project is now live!

From the command line with deployctl

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.

1. If you don’t yet have deployctl, you can download it with the following command:

deno install -gArf jsr:@deno/deployctl

2. In the root of your Next.js project, build your app:

Deno recognizes package.json. Learn more about Deno’s Node and npm compatibility.

3. 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.

4. 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.