Next.js getServerSideProps results in Internal Server Error

[timohausmann]

Hi, I'm experimenting with deploying Next.js to Firebase and ran into an issue with getServerSideProps – it always results in an Internal Server Error. I actually got SSR like this working with the app router, I'm just wondering what the issue could be – any ideas?

[REQUIRED] Environment info

firebase-tools: 12.1.0

Platform: macOS

next: 13.4.2

[REQUIRED] Test case

In a Next.js project, I have this file src/pages/pages-test/index.tsx:

import { GetServerSideProps } from 'next';

type TestPageProps = {
  title: string;
  body: string;
}

export const getServerSideProps: GetServerSideProps<TestPageProps> = async () => {
  return { props: { title: 'Test', body: 'Hello World' } };
};

export default function TestPage({ title, body }: TestPageProps) {
  return (
    <div>
      <h1>{title}</h1>
      <p>{body}</p>
    </div>
  )
}

[REQUIRED] Steps to reproduce

• npx create-next-app@latest
• firebase init – Next.js was detected and confirmed
• firebase deploy
• Visit the route (https://nerd-iq.web.app/pages-test)

Full repo: https://github.com/timohausmann/nerd-iq

[REQUIRED] Expected behavior

• Fetch data and display it

[REQUIRED] Actual behavior

• Internal Server Error

I see errors in the SSR logs, but I see no useful information there:

{
  "insertId": "647682b400041bc3ab8eb8dd",
  "httpRequest": {
    "requestMethod": "GET",
    "requestUrl": "https://fh-775d910e3c8bdedf---ssrnerdiq-try5wj7aba-ew.a.run.app/pages-test",
    "requestSize": "1636",
    "status": 500,
    "responseSize": "740",
    "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36",
    "remoteIp": "66.249.93.28",
    "serverIp": "216.239.38.53",
    "latency": "0.018877969s",
    "protocol": "HTTP/1.1"
  },
  "resource": {
    "type": "cloud_run_revision",
    "labels": {
      "configuration_name": "ssrnerdiq",
      "location": "europe-west1",
      "project_id": "nerd-iq",
      "service_name": "ssrnerdiq",
      "revision_name": "ssrnerdiq-00015-piv"
    }
  },
  "timestamp": "2023-05-30T23:11:48.249093Z",
  "severity": "ERROR",
  "labels": {
    "instanceId": "004d9db0be088716fdf8bf9f0302ae4f80a406b0bd6c07757c2fab0fe8a29cc65a11fdb8e1dfb59a48e57fb6ff3d3fc4ffadfe6b99a310b911474a6b989a4df2ff",
    "goog-managed-by": "cloudfunctions"
  },
  "logName": "projects/nerd-iq/logs/run.googleapis.com%2Frequests",
  "trace": "projects/nerd-iq/traces/4c5ff7da85f0603d03d5db769150ba2b",
  "receiveTimestamp": "2023-05-30T23:11:48.560534200Z",
  "spanId": "9445199721017580471"
}

[looptheloop88]

Hi @timohausmann, thanks for the report. I was able to reproduce the issue that you encountered. I also confirmed that routes with getServerSideProps return internal server error when deployed to Firebase Hosting.

I will share the details of my investigation with our team and try to bring someone that can provide additional information about the issue.

[WilliamBaltus]

Any updates on this?

[alexastrum]

Hi @WilliamBaltus

This looks like a duplicate of #5934, since it triggers the same Emulator error for me: error uncaughtException: Error [ERR_STREAM_WRITE_AFTER_END]: write after end.

I think we have a fix in #6005 that we plan to include in the firebase-tools v12.5.
In the meantime, please use firebase-tools v12.1 as a workaround.

[alexastrum]

Fixed in https://www.npmjs.com/package/firebase-frameworks/v/0.10.4

[timohausmann]

Fixed in https://www.npmjs.com/package/firebase-frameworks/v/0.10.4

I did npm install -g firebase-tools to get the latest version (12.4.3) and ran firebase deploy again. The error persists. Do I have to update this package manually?

[MtthwBrwng]

Any updates? Still experiencing this issue in 12.4.5 of firebase-tools