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.

We also don't support binaries, and therefore don't support Sharp (NextJS's image optimization library), so we disable the image optimization features of NextJS.

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

Prepare a Production Build

First, you need to build your NextJS project. You can do this by running the following command:

npm run build

This guide will work with bun, yarn, pnpm or npm. However, it relies on your lockfile, so make sure to copy the correct lockfile for the package manager you are using.

Then, you need to copy the package lock, public files, and static files in:

cp -r public .next/standalone/public
cp -r .next/static .next/standalone/.next/static
 
# This is for use with npm, replace with any lockfile you want.
cp package-lock.json .next/standalone/package-lock.json

Deploy to Freestyle

Via the CLI

First, you need to install the Freestyle CLI:

npm i freestyle-sh

Then, you can deploy your project by running:

cd .next/standalone
npx freestyle deploy --web server.js --domain something.style.dev

Via the SDK

First, install the Freestyle Sandboxes SDK:

npm i freestyle-sandboxes

Then, you can deploy your project by running:

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(".next/standalone"), {
    entrypoint: "server.js",
    // put whatever domains you want here
    domains: ["example.style.dev"],
  });
}
 
deploy();

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.

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

Deploying NextJS Projects

Set NextJS to `Standalone` mode

Deploying The Project

Prepare a Production Build

Deploy to Freestyle

Via the CLI

Via the SDK

Build on Freestyle

Next Steps

On this page