How to deploy a Next.js app with docker on Zeit now 2

If you’re reading this article it might be because you’re frustrated that you cannot deploy your Next.js app with a custom server on Zeit Now 2 platform.

And if you have been googling around for the answer this is the article to read!

If you want a little background on what’s been going on with Zeit and their platform continue reading.

If you’d like the answer to the problem go straight to the end of the article!

What is Next.js

Next.js is a framework to serve server-side render applications by using Node.js and React.

The goal with Next.js is to serve the user a fast initial load, than serve the rest of the application or site with ReactJS on the client side.

Next.js allows you to customize practically everything such as Webpack, custom server and routing.

But all of that comes already baked into the framework so you spend zero setup time.

They try to let the engineer focus on the UI as much as possible.

This is what makes Next.js pretty awesome.

Zeit Now 2

Back in version 1, deploying your Next.js application with a custom server was as easy as typing 1 word in the command line.

But Now 1 has been deprecated and is recommended to go with Now 2.

Now 2 follows a micro-server architecture, and requires your applications to have a bit of configuration.

This allows you, the engineer, to have a monorepo setup but be able to split your project into it’s own server.

This is an ideal solution, because it reduced cold boot-up times, per-route scaling and resources allocations, and increases security due to less code.

Think of it as code-splitting for your back-end code.

But this comes with a problem for Next.js framework with a custom server.

It doesn’t fit the Now 2 paradigm.

But there is a workaround to make it fit!

Deploy Next.js with custom server to Now 2

First create a Dockerfile in the root of your Next.js project.

NextJS docker file

Now let’s add the following configuration your now.json file.

NextJS docker now file

You can now run now in your terminal.

Happy deployment!

I like to tweet about Next.js and post helpful code snippets. Follow me there if you would like some too!