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 · Accepted Answer · 2020-08-03 17:50:01Z

0

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.

edited Aug 3, 2020 at 17:50

answered Aug 3, 2020 at 14:23

Nico

7,2764 gold badges26 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

George Paouris Over a year ago

You are right, i updated next.js to 9.5 and i dont get this error.But redirection still not happening. Any ideas? How a redirection can happen from a proxy? If i hit the next api from browser, redirection works.

Nico Over a year ago

@GeorgePaouris Of course redirect works only on Api routes and not in your client or server. Why you should redirect after an api call? what you want to achieve? if you are trying to make a reverse proxy this is not how you should do.

George Paouris Over a year ago

I agree with your approach. If you go here nextjs.org/docs/advanced-features/…, it says something about accessing the preview api from a headless CMS and i figure that it meant a proxy server and thats why i did the above example. So what the docs mean by saying accessing the api from a CMS?

George Paouris Over a year ago

LIke you said "You can see the preview by visiting preview url", how you can visit the url except from the browser itself? It doesnt give an example with a proxy

Collectives™ on Stack Overflow

Access api from a CMS in Next.js

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related