Unable to Deploy Serverless with API Gateway

[karloberas]

We are migrating from @sladg/nextjs-lambda which uses API Gateway to proxy traffic from CloudFront to the Lambda functions at /_server and /_image paths. Due to security restrictions, we have to continue using API Gateway for proxy instead of Lambda function URL as seen in the architecture diagram.

After several rounds of testing and debugging, I can't figure out why my website always redirects from "/" to "/_server". As a result, I could only access the 404 page of my site. Debugging with CloudWatch shows that my Lambda proxy is receiving the path and x-forwarded-path as "/_server/_server."

I tried to set the basePath = "/server" in next.config.js but this only fixes my /api endpoints to not return 404. The "/" path continues to redirect to "/_server" and results in 404. I also had to fix the paths for /_next* to /_server/_next* in CloudFront with this config change.

I'm running out of ideas so hopefully I can get some answers on the feasibility of using API GW with paths /_image proxied to image-optimization-function and /_server proxied to server-function.

[conico974]

First of all, what version of next and OpenNext are you using ? And how are you setting up the IAC for this (cdk, terraform... ) ?
My advice would be to ditch the _server and _image basePath. In Api Gateway, just configure it to proxy _next/image/* to the image function and the rest to the default server function.

If you absolutely need to keep those basePath, you could use a custom wrapper to remove the basePath before passing it to the server function. https://open-next.js.org/inner_workings/components/overview#wrapper.

[karloberas]

I'm on Next.js v14.1.1 and OpenNext v2.3.9. Using Terraform for IaC.

We have to go through a proxy between CloudFront and API GW. The image-optimization-function is not a problem. The issue is with the server-function at root path.

I'm not sure how to configure this wrapper. Would you happen to know an example? I realized wrapper is only in v3.

[conico974]

I'm not sure i understand you setup here.

You have Cloudfront that goes to a lambda proxy and then to Api GW that itself forward stuff to the server function ?
Could you share a bit of your terraform setup ? This would probably be easier to understand.

And yeah the wrapper functionnality is in V3, in V2 you could just create an handler.mjs like that

export const handler = async (event, context) => {
  // Modify the rawPath and url in event here
  const { handler: rawHandler} = await import("./index.mjs");
  return rawHandler(event, context);
};

[karloberas]

I managed to resolve the issue by proxying the root path of the API Gateway to the server lambda thanks to this advice.

My advice would be to ditch the _server and _image basePath. In Api Gateway, just configure it to proxy _next/image/* to the image function and the rest to the default server function.

The proxy is from an API portal to proxy the traffic from external CloudFront to internal API Gateway behind a VPC.