Automatic Static Optimization in Next.js

Next.js can create static HTML pages at build time. Static HTML pages can then be deployed in CDNs to improve page performance. Using next export command, we can create a static HTML site from a Next.js site.

Even without using next export, Next.js does automatic static optimization by generating HTML files for pages. If a page contains getServerSideProps or getInitialProps, Next.js will switch to render the page on-demand or per-request (meaning Server-Side Rendering). If both getServerSideProps and getInitialProps are NOT present, Next.js automatically create a static HTML file.

In my Next.js project, I created a new page for about. It contains following code.

export async function getStaticProps(context) {
  return {
    props: {
      name: "Joby",
      age: 35,
    },
  };
}

export default function About({ name, age }) {
  return (
    <div>
      <h1>About Page</h1>
      <span>
        {name} is {age} years old
      </span>
    </div>
  );
}

As you can see, in the above code getServerSideProps and getInitialProps are not present. Now when I run next build, I could see about.html generated under .next/server/pages/.

If there is getServerSideProps in the page, then, instead of about.html, Next.js creates about.js. The about.js is then executed in a node server like a normal Node.js application.