Access api from a CMS in Next.js

Question

Im trying to access an endpoint in next.js from a headless cms proxy in node.js and i cant get it to work. I want to redirect me to a site but instead i get the following error:

For help, see: https://nodejs.org/en/docs/inspector (node:8549) UnhandledPromiseRejectionWarning: Error: Request failed with status code 500 at createError (/home/george/Documents/Coding/NodeJs/node-server/node_modules/axios/lib/core/createError.js:16:15) at settle (/home/george/Documents/Coding/NodeJs/node-server/node_modules/axios/lib/core/settle.js:17:12) at IncomingMessage.handleStreamEnd (/home/george/Documents/Coding/NodeJs/node-server/node_modules/axios/lib/adapters/http.js:236:11) at IncomingMessage.emit (events.js:322:22) at endReadableNT (_stream_readable.js:1187:12) at processTicksAndRejections (internal/process/task_queues.js:84:21) (node:8549) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2) (node:8549) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code. (node:8549) UnhandledPromiseRejectionWarning: Error: Request failed with status code 500 at createError (/home/george/Documents/Coding/NodeJs/node-server/node_modules/axios/lib/core/createError.js:16:15) at settle (/home/george/Documents/Coding/NodeJs/node-server/node_modules/axios/lib/core/settle.js:17:12) at IncomingMessage.handleStreamEnd (/home/george/Documents/Coding/NodeJs/node-server/node_modules/axios/lib/adapters/http.js:236:11) at IncomingMessage.emit (events.js:322:22) at endReadableNT (_stream_readable.js:1187:12) at processTicksAndRejections (internal/process/task_queues.js:84:21) (node:8549) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 4)

Proxy localhost:4000

app.get("/test", (req, r, next) => {
  Axios.get('http://localhost:3000/api/hello').then((res)=>{

  })
});

Next.js endpoint hello.js localhost:3000

export default (req, res) => {
  res.statusCode = 200;
  res.redirect('https://youtube.com');
};

Nico Nico · Accepted Answer · 2020-08-03T14:23:32

Put your code inside a try/catch block and probably you will get this error : res.redirect is not a function. Which version of next are you using? are you sure that redirect response helper is supported in your version? (i think is avaible only in last version - 9.5)

By the way you should still able to use writeHead instead:

res.writeHead(302, {
  Location: "https://youtube.com",
})
res.end()

Edit

If you want to redirect in your Proxy you can do something like this:

Next.js endpoint hello.js localhost:3000

export default (req, res) => {
 res.json({url : "www.youtube.com"})
};

Proxy localhost:4000

app.get("/test", (req,res) => {
  Axios.get('http://localhost:3000/api/hello').then((result)=>{
     let {url} = result
     if(url){
        res.redirect(url)
     }
  })
});

Edit2

I never used preview mode but from what I understood preview mode is just an utility to override satic generation and fetch data from your cms at request time instead that a build time, not a proxy server.
Image that you create a new post in your headless cms, you want to preview your new blog post but next will fecth that data only at build time, with preview mode you can override this and get a preview of your post so the page will be rendered on request time. You can see the preview visiting preview url, or embedd the url in an iframe (i guess). Note this makes sense only if you pre-render your page with getStaticProps.
With getServerSideProps you dont need any preview (you will already fetch the data on every request), but your visitors will fetch content everytime and is not really necessary, so you can use getStaticProps along with preview api only for seeing your post draft before publishing.
So i think is a different scenario from your original question.

Access api from a CMS in Next.js

1 Answers