Next.js: [Next 9.5.5] res.setPreviewData only available in routes under /pages/api but not /api

[colin-bethea]

Bug report

Describe the bug

The example for preview mode indicates to test using res.setPreviewData, and go to /api/preview in the browser.

Currently, if your API folder is /api, and not /pages/api, this method does not work (returns TypeError: res.setPreviewData is not a function), and you get a 502 error.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Clone this create-next-app repository (https://github.com/teamcandor/preview-data-replication)
2. Observe that the API folder is ./api instead of ./pages/api
3. Run vercel dev, navigate to http://localhost:3000/api/preview to encounter the error

Alternatively, I've deployed the repository as well here.

Expected behavior

1. An error message in the terminal (TypeError: res.setPreviewData is not a function)
2. The method res.setPreviewData itself returns undefined if logged

Screenshots

System information

• OS: macOS Catalina
• Browser: Chrome
• Version of Next.js: 9.5.5
• Version of Node.js: 14.12.0

Additional context

Attempting to use Preview Mode in our application, example code fails - likely due to some failure to extend the res object.

[jamesmosier]

API routes need to be within the pages/api/* directory structure, therefore I would not expect a folder named api living outside of the pages directory to work.

[colin-bethea]

API routes need to be within the pages/api/* directory structure, therefore I would not expect a folder named api living outside of the pages directory to work.

This is actually super interesting - we've been running a NextJS application with an external api folder for a few months now (no /pages/api/*), surprised that it works if this is the case.

Is it possible to have endpoints in both /pages/api/* and /api/*?

[jamesmosier]

Not to my knowledge. The code looks at the route to determine if the requested url contains api or not and then routes the request based on that.

But Next only uses the pages folder to determine what is a route and what is not, so I am not sure how your API folder outside of pages works.

Do you have any rewrites/redirects setup through Next or a custom server?

[colin-bethea]

We just realized it could be a discrepancy between Vercel and NextJS - eg: I think Vercel may be handling our API endpoints as of now instead of NextJS (https://vercel.com/docs/serverless-functions/introduction#an-example-node.js-serverless-function), but lacks the helper method for the res object.

We don't have any rewrites/redirects through Next or for any customer server.

In terms of best practice for using NextJS on Vercel, I imagine moving our api folder to pages/api might be the better option?

[jamesmosier]

Correct, it would certainly be best while using a Next project to follow the convention of pages/api. I'm not certain of the underlying infrastructure for allowing both a Next app and serverless function to be run from the same project, but I can imagine it might lead to some more unexpected consequences eventually (similar to now with the lack of setPreviewData being available in the Vercel serverless function).

And additionally more feature may one day come to Next's API routes and you'd likely miss out on those too being outside of the current directory structure requirements.

[colin-bethea]

Makes a lot of sense, will be migrating our system over to /pages/api instead. Thanks for the help James!