Deploy Next.js websites

To run your website on a server or other platform, you need to deploy it. Next.js makes this process straightforward with built-in support for various deployment platforms.

To deploy your website check out the deployment documentation .

The next step after development is deployment. This creates a production-ready version of your application that can later be accessed by users over the internet.

Create a standalone version of your application

I recommend creating the Next.js application as a standalone version. This has the following advantages:

• Independent deployment: The application contains all necessary dependencies and build artifacts, allowing it to run without relying on a global Next.js installation or external Node modules.
• Simplified Docker integration: The standalone folder can be copied directly into a container, reducing setup steps and minimizing image size.
• Optimized for production: Only the files required for server execution are included, improving startup time and reducing potential conflicts.
• Consistent environment: Ensures that the application behaves the same on any server or container, avoiding issues with differing global packages or Node versions.

To generate a standalone version of your application, edit the next.config.js file in your project root and add the following configuration:

import type { NextConfig } from "next";
 
const securityHeaders = [
    //Prevents loading of the page in an iframe and clickjacking attacks
    { key: 'X-Frame-Options', value: 'DENY' },
    // Prevents MIME-type sniffing and forces browsers to render in a standardized mode, prevents exec of scripts hidden as images
    { key: 'X-Content-Type-Options', value: 'nosniff' },
    // Enhances privacy by disabling the ability to track users across sites
    { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
    //Disables browser features like camera and microphone access unless explicitly allowed by the user
    { key: 'Permissions-Policy', value: 'camera=(), microphone=(), geolocation=()' },
];
 
const nextConfig: NextConfig = {
    output: "standalone",
    experimental: {
        serverActions: {
            // Allow server actions to be called from white listed origins only
            allowedOrigins: [
                '<your-domain>',
                'www.<your-domain>',
                //For local development
                'localhost:3000'
            ],
        },
    },
    images: {
        remotePatterns: [
            {
                protocol: 'https',
                hostname: '**.<your-domain>',
            },
        ],
    },
    async headers() {
        return [
            {
                source: '/(.*)',
                headers: securityHeaders,
            },
        ];
    },
};
 
export default nextConfig;

Generate a production build

Finally you can generate a production build of your application. To do this, run the following command in your projects terminal:

npm run build

This compiles your application into optimized JavaScript and CSS bundles. It also pre-renders pages according to your configuration (Static Generation or Server-Side Rendering). In general this command optimizes your application for production by minifying code, splitting bundles, and enabling caching strategies.

Next steps

In my opinion, the best way to host the production build right now is to start it in a Docker container. I’ll go into more detail about that here.

Alternatively, there is also the option of hosting the website with the Node Process Manager. You can find a good guide to hosting with PM2 here .