fix Image when used with --experimental-https

packages/next/src/cli/next-dev-args.ts

@@ -9,6 +9,7 @@ export const validArgs: arg.Spec = {
   '--experimental-https': Boolean,
   '--experimental-https-key': String,
   '--experimental-https-cert': String,
+  '--experimental-https-ca': String,
   '--experimental-test-proxy': Boolean,
   '--experimental-upload-trace': String,
 

packages/next/src/cli/next-dev.ts

@@ -15,7 +15,10 @@ import loadConfig, { getEnabledExperimentalFeatures } from '../server/config'
 import { findPagesDir } from '../lib/find-pages-dir'
 import { fileExists, FileType } from '../lib/file-exists'
 import { getNpxCommand } from '../lib/helpers/get-npx-command'
-import { createSelfSignedCertificate } from '../lib/mkcert'
+import {
+  SelfSignedCertificate,
+  createSelfSignedCertificate,
+} from '../lib/mkcert'
 import uploadTrace from '../trace/upload-trace'
 import { initialEnv, loadEnvConfig } from '@next/env'
 import { trace } from '../trace'
@@ -254,6 +257,7 @@ const nextDev: CliCommand = async (args) => {
           ...((initialEnv || process.env) as typeof process.env),
           TURBOPACK: process.env.TURBOPACK,
           NEXT_PRIVATE_WORKER: '1',
+          NODE_EXTRA_CA_CERTS: options.selfSignedCertificate?.rootCA,
         },
       })
 
@@ -287,15 +291,17 @@ const nextDev: CliCommand = async (args) => {
           'Self-signed certificates are currently an experimental feature, use at your own risk.'
         )
 
-        let certificate: { key: string; cert: string } | undefined
+        let certificate: SelfSignedCertificate | undefined
+
+        const key = args['--experimental-https-key']
+        const cert = args['--experimental-https-cert']
+        const rootCA = args['--experimental-https-ca']
 
-        if (
-          args['--experimental-https-key'] &&
-          args['--experimental-https-cert']
-        ) {
+        if (key && cert) {
           certificate = {
-            key: path.resolve(args['--experimental-https-key']),
-            cert: path.resolve(args['--experimental-https-cert']),
+            key: path.resolve(key),
+            cert: path.resolve(cert),
+            rootCA: rootCA ? path.resolve(rootCA) : undefined,
           }
         } else {
           certificate = await createSelfSignedCertificate(host)

packages/next/src/lib/mkcert.ts

@@ -10,6 +10,12 @@ const { fetch } = require('next/dist/compiled/undici') as {
 
 const MKCERT_VERSION = 'v1.4.4'
 
+export interface SelfSignedCertificate {
+  key: string
+  cert: string
+  rootCA?: string
+}
+
 function getBinaryName() {
   const platform = process.platform
   const arch = process.arch === 'x64' ? 'amd64' : process.arch
@@ -66,7 +72,7 @@ async function downloadBinary() {
 export async function createSelfSignedCertificate(
   host?: string,
   certDir: string = 'certificates'
-) {
+): Promise<SelfSignedCertificate | undefined> {
   try {
     const binaryPath = await downloadBinary()
     if (!binaryPath) throw new Error('missing mkcert binary')
@@ -98,7 +104,7 @@ export async function createSelfSignedCertificate(
       { stdio: 'ignore' }
     )
 
-    const caLocation = execSync(`${binaryPath} -CAROOT`).toString()
+    const caLocation = execSync(`${binaryPath} -CAROOT`).toString().trim()
 
     if (!fs.existsSync(keyPath) || !fs.existsSync(certPath)) {
       throw new Error('Certificate files not found')
@@ -121,6 +127,7 @@ export async function createSelfSignedCertificate(
     return {
       key: keyPath,
       cert: certPath,
+      rootCA: `${caLocation}/rootCA.pem`,
     }
   } catch (err) {
     Log.error(

packages/next/src/server/lib/start-server.ts

@@ -3,6 +3,7 @@ import '../node-polyfill-fetch'
 import '../require-hook'
 
 import type { IncomingMessage, ServerResponse } from 'http'
+import type { SelfSignedCertificate } from '../../lib/mkcert'
 
 import fs from 'fs'
 import path from 'path'
@@ -38,10 +39,7 @@ export interface StartServerOptions {
   envInfo?: string[]
   expFeatureInfo?: string[]
   // this is dev-server only
-  selfSignedCertificate?: {
-    key: string
-    cert: string
-  }
+  selfSignedCertificate?: SelfSignedCertificate
   isExperimentalTestProxy?: boolean
 }
 

packages/next/src/server/next-server.ts

@@ -530,9 +530,9 @@ export default class NextNodeServer extends BaseServer {
 
           if (this.isRenderWorker) {
             const invokeRes = await invokeRequest(
-              `http://${this.fetchHostname || 'localhost'}:${this.port}${
-                newReq.url || ''
-              }`,
+              `${getRequestMeta(req, '_protocol')}://${
+                this.fetchHostname || 'localhost'
+              }:${this.port}${newReq.url || ''}`,
               {
                 method: newReq.method || 'GET',
                 headers: newReq.headers,