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

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.

[colin-bethea]

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

[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.