NextJs creates serverless applications using static HTML files rather than lambdas

Question

NextJs creates serverless applications using static HTML files rather than lambdas

As I work on developing an application using Next.js serverless, I am facing an issue where instead of generating JS files in the designated folder (next/serverless/pages/), my pages are being transformed into static HTML files. This is evident during the build process as indicated by Next.js:

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 how my next.config.js looks like:

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

However, I specifically need them to be in JS file format since I will be utilizing them as modules for performing HTTP requests via firebase functions.

next.js aws-serverless

Answer 1

Answer №1

Beginning with Next.js 9, it implements Automatic Static Optimization as the default setting for static exports.

While static HTML .html is beneficial for performance, if there is a specific need to export files as .js, Next.js 9 also accommodates this through partial static export.

To generate javascript files instead of HTML files, simply include getInitialProps in the pages you intend to export as .js.

class Index extends Component {

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

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

export default Index;

Answer 2

Beginning with Next.js 9, it implements Automatic Static Optimization as the default setting for static exports.

While static HTML .html is beneficial for performance, if there is a specific need to export files as .js, Next.js 9 also accommodates this through partial static export.

To generate javascript files instead of HTML files, simply include getInitialProps in the pages you intend to export as .js.

class Index extends Component {

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

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

export default Index;

NextJs creates serverless applications using static HTML files rather than lambdas

Answer №1

Similar questions

What is the reason behind SyntheticEvent not functioning properly in Next.js with React?

What is the syntax for accessing an element within an array in a function?

After deploying my Next.js app to Vercel, I encountered a problem where the rss.xml file in the public folder was returning

Is there a way to retrieve the API response from Antd's upload action once the upload has been completed?

What is the best way to showcase information retrieved using the getDocs function from Firebase Firestore?

What is the best way to forward a file upload request from a Next.js API to another API?

Is there a way to make a try-catch block pause and wait for a response before moving

I have the ability to see HTTP-only cookies within my web browser

Rearranging components in CrafterCMS Studio

What could be causing React to retain the value in the form input within my modal?

Is there a way to align the line under the hyperlinks to match the text size using CSS?

Check if the user is null using React's useEffect hook and then perform a

I'm having trouble connecting to port 3000 on my Docker container from the browser

Pre-fetch page data in Next.js before rendering it

Does NextJs have a feature or function similar to the createRef() hook found in traditional ReactJs?

The issue persists with re-rendering the component despite implementing shallow in Zustand. Additionally, my custom comparison function does not seem to resolve

The issue of experiencing an infinite loop when updating state on the Next.js router query change

An issue arises when attempting to fetch data using next.js: a TypeError occurs indicating that

Top method for setting a cookie in the App router server component using NextJS

The Next.js middleware, specifically NextRequest.nextUrl.locale, will return an empty string once it is deployed