LogoFreestyle

Deploying NextJS Projects

How to deploy an NextJS Project to Freestyle

NextJS is the most popular React Framework for building web applications. We support NextJS with a small bit of configuration.

Set NextJS to Standalone mode

NextJS defaults to a serverless bundle we do not support. To make NextJS output a valid NodeJS App, you need to set the output to standalone

import type { NextConfig } from "next";
 
const nextConfig: NextConfig = {
  output: "standalone", 
};
 
export default nextConfig;

Deploying The Project

Build on Freestyle

You can deploy NextJS projects and have them built on Freestyle by sending us the files, and enabling "build": true in the deploy options.

deploy.js
import { FreestyleSandboxes } from "freestyle-sandboxes";
import { prepareDirForDeploymentSync } from "freestyle-sandboxes/utils";
 
// Create a sandboxes client
const sandboxes = new FreestyleSandboxes({
  apiKey: process.env.FREESTYLE_API_KEY!,
});
 
async function deploy() {
  await sandboxes.deployWeb(prepareDirForDeploymentSync("."), {
    // put whatever domains you want here
    domains: ["example.style.dev"],
    build: true, // This automatically detects the framework and configures/builds for you
  });
}
 
deploy();

NextJS must be in standalone mode for this to work.

Next Steps

Now that you can deploy NextJS Apps to Freestyle, you'll probably want to deploy them to custom domains. To deploy to your own custom domains, you can use the UI in the Freestyle dashboard, and to start building self serve to deploy to your users domains you should check out this guide

Previous

Deploying Expo Projects

Next

Deploying Vite Projects

On this page