SSL Certificate Error in Next.js Layout Page for HTTPS API Calls During SSR

[raina02]

Summary

I am encountering an SSL certificate issue when making HTTPS API calls from the layout.tsx file in a Next.js application during server-side rendering (SSR). The API endpoint uses a valid self-signed certificate, and the same endpoint works perfectly when accessed via the browser or client-side code. However, during SSR, the request fails with an SSL error.

Context:
Next.js Version: 14.2.26
Node.js Version: 24.4.1
Environment: Running on local development/GCP
Error: The request fails with an SSL certificate error during SSR in the layout.tsx file.

Observations:
The API endpoint is accessible via the browser and returns the expected JSON response.
The same API call works in client-side components but fails during SSR.
The SSL certificate is self-signed and valid for the domain.
Setting NODE_TLS_REJECT_UNAUTHORIZED=0 temporarily resolves the issue but is not a production-ready solution.

Steps to Reproduce:
Create a Next.js app with an app/layout.tsx file.
Make an HTTPS API call to an endpoint with a self-signed certificate during SSR.
Observe the SSL error during SSR, while the same endpoint works in the browser.

Questions:
Is there a recommended way to handle self-signed certificates in Next.js during SSR without disabling SSL verification globally?
Could this be related to how Node.js handles SSL certificates in the SSR environment?
Are there any Next.js-specific configurations or middleware that can help resolve this issue?

Additional information

async getProperty():Promise<Property>
{
        const result = await this.httpClient.get(`/api/property`);
        return result.data  as Property;
}
and the response from Swagger endpoint is
{
  "property1": true,
  "property2": true
}

Example

No response

[icyJoseph]

I guess the real question is, how do we tell Node.js to trust these? Do you have access to them? if so I think you can pass an Agent, although TS might complain:

import { readFileSync } from 'fs';
import https from 'https';

const ca = readFileSync('./your-root-ca.pem'); // or process.env. something something

const agent = new https.Agent({
  ca, 
  rejectUnauthorized: true
});

export default async function Home() {
  //@ts-expect-error agent is not typed
  const res = await fetch('https://httpbin.dev/uuid', { agent });
  console.log(await res.text());
  return <div>Hello</div>
}

Read a bit more here, nodejs/undici#1483

[raina02]

Hi Joseph! Is there any other way possible without modifying certificates to indicate Node.js to trust this API call?
No I don't have access to them. Tried out the way creating httpAgent but it didn't work. Found a similar discussion sharing the link below.

#44062

Based on this, tried adding cache: no-store in fetch API call but started facing DNS resolution issues (ENOTFOUND).