Deploying TurboRepo with Next.js Frontend and Express.js Backend on Vercel

[TRegourd]

Summary

I am currently building a basic proof of concept for a monorepo using TurboRepo, featuring a Next.js front-end and an Express.js backend with Prisma ORM.

I can run my project locally without issues, but I would like to deploy it on Vercel. I am aware that Vercel now supports Express server deployment, but I haven't found helpful information on deploying both an Express server and a Next.js app within a TurboRepo monorepo.

Could anyone provide guidance on how to properly configure and deploy a TurboRepo with both a Next.js front-end and an Express.js backend on Vercel? Any help or pointers to relevant resources would be greatly appreciated.

Here is the link to the POC

Thank you!

Additional information

No response

Example

No response

[versecafe]

@TRegourd Deploying a project inside a turborepo should be the same as doing so outside, if you need a vercel config for a project put it in the projects top dir so apps/api/vercel.json for example, and when going to deploy on vercel don't select the top tier there should be file drop downs, drop down until you reach apps/api and select it, add any needed configuration that you would have when deploying without turbo repo, and then you should be all good. If you have any issues with those steps I'm happy to help.

Little confused why you'd split express from Next instead of just using server actions & RSCs with server side data fetching or Nexts API but I'm sure you have a reason such as experience with express and needs to expose the API out to others

[TRegourd]

So if I understand correctly, I have to perform 2 deploys in two separate projects. One for the NextJs app and one for the Express server ?

About splitting Express from Next and not using Next API , I want to be able to expose the API to other apps in the future, like an Expo mobile app in the same turboRepo.
I managed to do it in an other POC using trpc , but I don’t really like the magic and the tight coupling trpc involves.
I usually like to lower dependencies and separate responsibilities as much as possible.

But if you have ideas or example , I would be interested in digging into them.

Thanks

[versecafe]

Correct, project per port essentially, also you can expose a NextJS API out to the open network just like express

[cSarcasme]

Hi, i amreally interesting how you do it? i have try the model kitchen sink and with docker i have isall my nextjs application perfecly but i am block on the express part if you have some config file to show me or exlinme how you do it i am here.

I thank you by advance

[TRegourd]

Chose "other" in Framework preset, and put a vercel.json file int the api directory.
Here is the one I put for the apps/api package
{ "version": 2, "builds": [ { "src": "src/main.ts", "use": "@vercel/node" } ], "routes": [ { "src": "/(.*)", "dest": "src/index.ts", "methods": [ "GET", "POST", "PUT", "DELETE" ] } ] }
Make sure also to change the root folder in Vercel dashboard (example : 'apps/api'), and depending on your config, build command ('turbo run build') and install command ('pnpm install').

For the NextJs app, it's pretty striaghtforward, no need of vercel.json file.