Ahmed Ashraf
Ahmed Ashraf

Reputation: 23

Cannot set headers after they are sent to the client NextJS redirect res.writeHead getInitialProps

I have error when redirect to link from NextJS -> _app.js -> getInitialProps am try to cached last user lanuage in Cookies and redirect to it when reload page it's worked and user is redirect but I have a bugs in terminal

I have this bug, I don't understand what is his mean for (cannot set headers after they are sent to the client)

Error [err_http_headers_sent]: cannot set headers after they are sent to the client

at new nodeerror (node: internal/errors:372:5)
at serverresponse. Setheader (node: _http_outgoing:576:11)
at setheadersfromobject (c: \users\ahmed\desktop\amazon-clone- 
nextjs - server- 
side\node_modules\next\dist\compiled\compression\index. Js:46:680)
at serverresponse. Setwriteheadheaders (c: 
\users\ahmed\desktop\amazon-clone-nextjs - 
server-side\node_modules\next\dist\compiled\compression\index. 
Js:46:914)
at serverresponse. Writehead (c: \users\ahmed\desktop\amazon-clone- 
nextjs - server- 
side\node_modules\next\dist\compiled\compression\index. Js:46:121)
at function. Myapp. Getinitialprops (webpack-internal: ///. 
/pages/_app. Jsx:94:21)
at object. <anonymous> (c: \users\ahmed\desktop\amazon-clone-nextjs 
- server- 
side\node_modules\next\dist\shared\lib\utils. Js:75:33)
at generator. Next (<anonymous>)
at asyncgeneratorstep (c: \users\ahmed\desktop\amazon-clone-nextjs 
- server- 
side\node_modules\@swc\helpers\lib\_async_to_generator. Js:23:28)
at _next (c: \users\ahmed\desktop\amazon-clone-nextjs - server- 
side\node_modules\@swc\helpers\lib\_async_to_generator. Js:12:17) {
code: 'err_http_headers_sent'
}

error - Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after 
they are sent to the 
client

at new NodeError (node:internal/errors:372:5)
at ServerResponse.setHeader (node:_http_outgoing:576:11)
at NodeNextResponse.setHeader (C:\Users\Ahmed\Desktop\Amazon-clone- 
NextJs - Server- 
side\node_modules\next\dist\server\base-http\node.js:59:19)
at DevServer.renderToResponseWithComponents 
(C:\Users\Ahmed\Desktop\Amazon-clone- 
NextJs - Server-side\node_modules\next\dist\server\base- 
server.js:1039:17)
at async DevServer.renderPageComponent 
(C:\Users\Ahmed\Desktop\Amazon-clone-NextJs - 
 Server-side\node_modules\next\dist\server\base-server.js:1126:24)
at async DevServer.renderToResponse (C:\Users\Ahmed\Desktop\Amazon- 
clone-NextJs - 
Server-side\node_modules\next\dist\server\base-server.js:1145:32)
at async DevServer.pipe (C:\Users\Ahmed\Desktop\Amazon-clone-NextJs 
- Server- 
side\node_modules\next\dist\server\base-server.js:634:25)
at async Object.fn (C:\Users\Ahmed\Desktop\Amazon-clone-NextJs - 
Server- 
side\node_modules\next\dist\server\base-server.js:501:21)
at async Router.execute (C:\Users\Ahmed\Desktop\Amazon-clone-NextJs 
- Server- 
side\node_modules\next\dist\server\router.js:222:36)
at async DevServer.run (C:\Users\Ahmed\Desktop\Amazon-clone-NextJs 
- Server- 
side\node_modules\next\dist\server\base-server.js:612:29) {
code: 'ERR_HTTP_HEADERS_SENT',
page: '/'
}


Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are 
sent to the client

at new NodeError (node:internal/errors:372:5)
at ServerResponse.setHeader (node:_http_outgoing:576:11)
at NodeNextResponse.setHeader (C:\Users\Ahmed\Desktop\Amazon-clone- 
NextJs - Server-            
side\node_modules\next\dist\server\base-http\node.js:59:19)
at DevServer.renderError (C:\Users\Ahmed\Desktop\Amazon-clone- 
NextJs - Server- 
side\node_modules\next\dist\server\base-server.js:1219:17)
at DevServer.renderError (C:\Users\Ahmed\Desktop\Amazon-clone- 
NextJs - Server- 
side\node_modules\next\dist\server\next-server.js:516:22)
at DevServer.run (C:\Users\Ahmed\Desktop\Amazon-clone-NextJs - 
Server- 
side\node_modules\next\dist\server\dev\next-dev-server.js:575:35)
at async DevServer.handleRequest (C:\Users\Ahmed\Desktop\Amazon- 
clone-NextJs - 
Server-side\node_modules\next\dist\server\base-server.js:311:20) {
code: 'ERR_HTTP_HEADERS_SENT'
}

this code

_app.jsx

MyApp.getInitialProps = async ({ ctx }) => {
  const currentLocale = ctx.locale;
  const { cashedLocale } = ctx.req.cookies;

  if (cashedLocale && currentLocale !== cashedLocale) {
    ctx.res.writeHead(307, { Location: `/${cashedLocale + ctx.pathname}` });
    ctx.res.end();
  }

  return {};
};

Upvotes: 1

Views: 1711

Answers (1)

WepDev
WepDev

Reputation: 56

redirect status code is 308 but you added 307

just replace this

ctx.res.writeHead(307, { Location: `/${cashedLocale + ctx.pathname}` });
ctx.res.end();

to this

ctx.res.writeHead(308, { Location: `/${cashedLocale + ctx.pathname}` }).end();

Upvotes: 2

Related Questions