DEV Community

Cover image for Deploy a Next.js static app in Clever Cloud
Arnaud Ambroselli
Arnaud Ambroselli

Posted on

6 2

Deploy a Next.js static app in Clever Cloud

Note: This post is not sponsored by Clever Cloud by any mean, but it's a service I really like : great UX, great support, and made in Europe

Clever Cloud is great, nevertheless it took me a small hour to deploy a static NextJS app the first time. But their support was really efficient and we sorted it out really fast ! Just by setting up the correct environment variables.

Context: We're working on a monorepo, meaning that in a single github repository we have many folders such as api, app, admin, dashboard, etc. So the NextJS app is located in the app folder, that's all we need to know here.

Back in Clever Cloud Console:

  1. Create a new application
  2. Choose "Create from a Github Repository" and select your repo
  3. Step "What kind of application is it ?", select "Static", with a feather 🪶 as an icon
  4. Config your instances as you wish (Autoscalability, Horizontal scaling, Vertical scaling), name it as you wish, choose your region and create it
  5. Then go to "Environment variables" and setup the variables this way:
APP_FOLDER="app"
CC_CACHE_DEPENDENCIES="true"
CC_CGI_IMPLEMENTATION="proxy_fcgi"
CC_NODE_DEV_DEPENDENCIES="install"
CC_PRE_BUILD_HOOK="cd app && npm install --also=dev && npm run build"
CC_WEBROOT="/out"
HOST="0.0.0.0"
NEXT_PUBLIC_ANY_VARIABLES="{variables you defined for your project}"
NODE_ENV="production"
PORT="8080"
Enter fullscreen mode Exit fullscreen mode

And that's it !

Clever Cloud moto is

Vous développez, nous déployons
You code, we deploy

Cannot be more true ! 🥸

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (2)

Collapse
 
jwadulhssn profile image
Jawad UL Hassan •

Thank you !!
It really works !!

Collapse
 
edwbr profile image
Edward •

Thanks you !

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs