2

I'm wondering if it makes sense to deploy my NextJS application on Vercel with an Express api on Heroku for heavier api work.

I'm building an application that works with image manipulation. Vercel's serverless functions lack a large enough payload size limit and function timeout time, therefore I'm tempted to move my api to Heroku to bypass this.

Is this a logical solution or would anybody suggest a better way to bypass these issues? Or is it maybe a better idea to have the Express api on Heroku only for these heavier jobs?

flava
  • 31
  • 4
  • Related: https://stackoverflow.com/questions/63208960/vercel-creates-new-db-connection-for-every-request/63219571#63219571 – paulogdm Mar 05 '21 at 00:01
  • Did you end up hosting an API on Heroku that you then access from your NextJS app? I'm running into this same problem now, too, and am wondering how you solved yours? – Zetrick Mar 27 '23 at 00:49

1 Answers1

4

My answer is based on my personal experience. I myself also run Next.js with Express.js API on the backend. I believe that it is also a logical proposition to host your front-end with Vercel and your custom API with Heroku, as Heroku can accept bigger payloads and is dedicated to host your API, unlike Vercel which only serves the front-end (and Next.js serverless API, if available).

However, you might need to adjust your authorization (if there is any) so it suit your use-cases. Remember that cookies cannot be sent across domains. In other words, sending a cookie from Heroku backend straight to Next.js frontend is impossible unless you do several workarounds, none of which I am aware of right now.

My workaround is that you can actually use Next.js Serverless API as a proxy to send your authorized requests to your custom API.

For example, I am going to give my way of logging a user in, to showcase how to implement cross-domain cookies with Next.js's Serverless API and your custom API. I am going to assume that you are going to use JWT as a method to authenticate a user.

// auth.js -> in your custom server

const userToken = await yourAuthorizationFunction();

// Send the token as an API response to your Next.js Serverless proxy.
res.status(200).json({
  status: 'success',
  token: userToken,
});

And here is how you would get a cookie from your Next.js API.

// web/pages/myAuthentication.js -> your Next.js serverless API

import axios from 'axios';
import Cookies from 'cookies';

export default async (req, res) => {
  // 1. Receive the cookies here.
  const response = await axios.post(YOUR_ENDPOINT_TO_GET_COOKIES);  

  // 2. Set the JWT (or your token) to be used in the front-end.
  const cookies = new Cookies(req, res);
  cookies.set('jwt', response.data.token, {
    httpOnly: true,
    expires: new Date(Date.now() + 24 * 60 * 60 * 1000),
    sameSite: 'lax',
  });

  // 3. Send success, cookie has been set.
  res.status(200).json({
    status: 'success',
  });
};

If you want to make a POST request, you can simply get the cookie from your front-end (if you do not set the cookie method to httpOnly or if you use withCredentials set to true), or you can make another call to your proxy API that will deliver all of the data to your custom server.

Nicholas
  • 2,800
  • 1
  • 14
  • 21