Deployment

Introduction

You can deploy your app to any hosting provider that supports Next.js, such as Vercel, Cloudflare and Zeabur.

In this example, we will be deploying to Zeabur (opens in a new tab).

Create Account

1. First, create a Zeabur account (opens in a new tab) if you don't already have one. Creating an account will require your Github account.

Deploy Project

2. In the Zeabur dashboard, click + New Project. Then choose a region. The free regions won't have any plan (like Team Plan or Developer Plan) associated with them. For our example, we will choose Frankfurt, Germany.
3. Next, it will ask you how you want to deploy your app. You can deploy it from a Github repository (recommended) or from a local project.
   • Note: If you choose to deploy from a Github repository, you will need to create a Github repository and push your code to there first.
4. When you reach the Build Plan Preview page, click the Deploy button.
5. It should redirect you to the project's page. Here, scroll down to Networking and open it. Next, click either + Generate Domain to generate a domain (from Zeabur) or click + Custom Domain to use a custom domain (of your own). Afterwards, fill in the domain name and save. For our example, we will be generating a domain.
6. Now, scroll up to Variable and open it. Click Edit Raw Variables. Go to your .env.local file in your app and copy & paste all the contents into the Edit Raw Variables text box. Be sure to replace the BASE_URL value with the domain name you generated in the previous step. Also, make sure that the BASE_URL value starts with https://. Afterwards, click Save.
7. Now redeploy your Zeabur app by clicking Redeploy in the popup that appears, or by scrolling up and clicking the 3 vertical dots in the latest deployment and clicking Redeploy.
   • Note: If you deployed by uploading a local project, and clicking Redeploy doesn't work, click Reupload and upload your local project again.
   
8. It should take a few minutes for the deployment to finish. Once it's done, you can go to your app's domain name to view your deployed app.

Update Logto Config

9. Your Logto config now needs to be updated with the domain name of the deployed app. Log in to your Logto account and go to the Applications page. Click on the Traditional Web application.
10. In the Settings section, go to Redirect URIs and add your deployed domain name to the list. Make sure that it is followed by /callback.
11. Do the same for Post sign-out redirect URIs. Make sure there isn't any trailing backslash.
12. Finally, click Save Changes.

Next Steps

🚀 Congratulations, you successfully deployed your app! Proceed to the next page to continue with setup.