Next.js on Firebase Functions with Typescript

Question

I'm trying to deploy a Next.js app to Firebase Functions .

import next from 'next'
import {https} from 'firebase-functions'

const server = next({
  dev: process.env.NODE_ENV !== 'production',
  conf: {distDir: '.next'}
})

const nextjsHandler = server.getRequestHandler()

exports.app = https.onRequest(async (req, res) => {
  await server.prepare()
  return await nextjsHandler(req, res)
})

The problem is that Typescript complains in the following two places:

1. For the line conf: {distDir: '.next'} it shows the following error (which is strange as I find in Next.js source that NextConfig should accept distDir ):

   Type '{ distDir: string; }' is not assignable to type 'NextConfig'.

2. For the line return await nextjsHandler(req, res) , specifically the res :

   Type error: Argument of type 'Response<any>' is not assignable to parameter of type 'ServerResponse'. Property 'req' is optional in type 'Response<any>' but required in type 'ServerResponse'.

I would really appreaciate any help on resolving the two. Thanks!

Answer 1

• After looking at your code I believe you are following either this blog or this github link to deploy your Next JS application to Firebase Function.
• I followed both of them and at first got an error in the function code as the code uses const isDev = process.env.NODE_ENV;== 'production'; but after following the blog I observed that there was no environment variable in the application, which was causing the error in the code.
• So I added an empty .env file and a .env.sample file as mentioned here in the application and after that I could deploy the function without any error.
• So except the above I don't see any error in the code you have provided.