Deployment

Last Updated:

⚠️This guide assumes you know git/hub or atleast know how to create a repository.

In a Continuous Deployment (CD) environment, it's common to upload the full project, including the source code, to the service provider for building and deploying. And it's the preferred method. However you can choose not to or you may don't have the source code (Basic package). This documentation covers both approaches.

Vercel

Requires no additional configuration. Simply import the git repository and follow the on-screen steps.

Netlify

TODO

Cloudflare Pages

Import the project in the workers and pages dashboard, select the Next.js framework preset, add a environment variable, save and deploy. You'll Then need to add a compatability flag for both production and preview deployment. In project settings, go to Functions -> Compatibility flags -> configure and add the following flag:

After adding the flag, redeploy the project. For more detailed information, please refer to the official guide.

Please note that the built-in image loader won't work here, you can use third party services or the one provided by Cloudflare (recommended).

The below sections requires some advanced knowledge!

Standalone/Docker

Need to change the output mode to standalone in :

Then run , which will create a folder called in the .next/ folder. Copy the public folder to this folder, and also copy the .next/static folder to .next/standalone/.

This standalone folder can then be deployed to a Node server without any installation or build:

Refer here for more info

CDN/Full Static

Need to change the output mode to export in :

Then run , which will create an folder. The contents of this folder can be deployed to any CDN. However the builtin image optimization will not work anymore thus most image will failed to load.

You can either use third party services like Cloudinary, Imgix etc. Alternatively, you can opt out of the image optimization feature, although this is not recommended:

For more information on using third-party image loaders, please refer to the example loader configuration in the Next.js documentation.

Deploying without Source Code

This approach allows you to deploy the pre-built bundle directly without the need for a build process, which is not possible without the source code (/src).

This is applicable to the basic package, where the build artifacts are already included in the bundle, is not gitignored and will be pushed (uploaded) to GitHub or the service provider of your choice.

We have to skip the step because there is nothing to build. The project comes preconfigured to handle this scenario. You don't have to do anything.

Previous

Deployment

Next

Deployment

Appropriate Ad