Cannot set Content-Type header for api route response (pages router) about next.js HOT 4 CLOSED

Is the issue here that, .json implicitly, sets the header for you though?

• next.js/packages/next/src/server/api-utils/node/api-resolver.ts

  Line 393 in ac46ffe

  apiRes.json = (data) => sendJson(apiRes, data)

That one assigns the sendJson function to the NextApiReponse object, which in turn:

• next.js/packages/next/src/server/api-utils/node/api-resolver.ts

  Lines 120 to 125 in ac46ffe

  	function sendJson(res: NextApiResponse, jsonBody: any): void {
  	// Set header to application/json
  	res.setHeader('Content-Type', 'application/json; charset=utf-8')
  	// Use send to handle request
  	res.send(JSON.stringify(jsonBody))

Forces the header to application/json, somewhat expectedly. I don't see why it wouldn't do that.

To send a pdf, you need to do something different. You can search for a solution, most use a stream to send the chunks to the client.

from next.js.

Thanks for the reply @icyJoseph! 😃

I'm actually not trying to send a pdf. I need to send a custom content-type header, like 'application/hello+json', that will send a json payload. This is because the content type needs to be specific for the BE I'm working with (that I don't control).

Do you know how I would achieve this? How do I get around next js overwriting my setHeader()?

I've searched high and low and found little information on how to do this for the pages router. The docs have very little about it.

from next.js.

Use the send helper:

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from 'next';

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  res.setHeader('Content-Type', 'application/pdf'); 
  res.status(200).send(JSON.stringify({ name: 'John Doe' }));
}

Then again, this will really cause some strange behavior, because a browser might try to actually show a pdf if you go to that endpoint.

from next.js.

Thanks @icyJoseph, that work around does the job! Cheers! 😃

from next.js.