How to deploy a Next JS Application in Choreo platform by WSO2 / Step by step tutorial - 2025

 

A few weeks ago, I shared an A-Z guide on how to deploy a React(Vite) application in Choreo. Today, I'm going to show you how to deploy a Next.js application in Choreo by WSO2.

First, if I explain a bit about Choreo, it's an AI-Native internal developer platform (IDP). This system enables the simplification and acceleration of cloud-native application development, deployment, and management. It provides a unified platform for both platform engineers and software developers, offering a range of services through a single interface.

Now, let's get back to our main topic. This is one way to deploy Next.js applications on Choreo. So, as I explained in my previous article, on choreo, we can't directly import things from envs like in the example below. 

❌ const apiUrl = process.env.NEXT_PUBLIC_API_URL

We should configure all these variables from the window configs. This window config is a custom global object that developers (or a framework/platform) inject into the browser at runtime to expose configuration values to client-side code. So when you build the project, make sure to access the service API URLs through the window configs. In this tutorial, I centralize all my axios calls using the base URL.
First, I create a runtimeconfig.jsx file in my utils folder and add window configs there.

In the above block of code, you can see 2 export functions. The first one exports the window configs, if they exist; otherwise, it returns a JSON block where we can add the configs for the local development environment. 

The second method returns apiUrl from the configurations, so I can access the URL anywhere in my project. You can see the code block below where I access the base URL for my axios create method. If I access the base URL like this, I can use my axios client through api from my util folder.

Here is one example of accessing the axios client. Make sure you import api from the utils folder.

import api from "@/utils/axios";

If you're done with this configuration, you're almost done. Now the only thing is deploying the Next.js application on Choreo. This is very straightforward. You can follow the same deployment steps I showed in my previous React(Vite) application deployment tutorial. 

Visit here to follow the next deployment steps

📢😁👉 Follow Deployment Steps

Thank you!