NextJs builds serverless app with static HTML files instead of lambdas

Question

I am trying to build an application with next serverless, but instead of outputting JS files in the expected folder (next/serverless/pages/), my pages become static HTML files, nextjs even says so when building;

Compiled successfully. 

Page            Size     Files  Packages                                                                                
┌   /_app       2.04 kB    195         0                                                                                
├   /_document                                                                                                          
├   /_error     7.58 kB    230         0                                                                                
├ ⚡ /About      420 B      196         0                                                                                
└ ⚡ /Index      420 B      196         0                                                                                                                                                                                                        
λ  (Lambda)       page was emitted as a lambda (i.e. getInitialProps)                                                   
⚡  (Static File)  page was prerendered as static HTML  

This is my next.config.js:

module.exports = {
  target: "serverless",
  distDir: "../../dist/functions/next"
};

The output of the build with two pages (About and Index) is:

dist/functions/next/serverless/pages/
  _error.js
  404.html
  About.html
  Index.html

I need them to be JS files because I require them as modules later for HTTP requests through firebase functions

Answer 1

Starting from Next.js 9 it uses Automatic Static Optimization by default when you are doing a static export.

Static HTML .html is good for performance, however, for some reason if you wish to export certain files as .js Next.js 9 also supports that partial static export.

Just include getInitialProps in the pages that you wish to export as .js then it will output the javascript file instead of the HTML file.

class Index extends Component {

  // just have to add this line into any of your `pages/any-file.js`
  static getInitialProps(ctx) {
    return {};
  }

  render() {
    return (
      <div>
        <h1>Index Page</h1>
      </div>
    );
  }
}

export default Index;