Next.js Automatic Static Optimization

In this article, we will learn about Automatic static optimization in NextJS.

NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windows, Linux, and mac. The linking of dynamic paths helps in rendering your NextJS components conditionally. Automatic Static Optimization is a feature of NextJS with the help of which we can create hybridized pages that can be rendered server-side as well as client-side depending on the content.

In NextJS, if the page has no blocking data requirements then the page will be rendered client-side by nextjs and if the page contains getServerSideProps or getInitialProps then the page will be rendered server-side. This method helps us to create hybrid apps in nextjs which contains both server-side and client-side rendered pages.

Create NextJS Application: You can create a new NextJS project using the below command:

npx create-next-app gfg

Project Structure: It will look like this.

Creating Statically Optimized Page: Now we are going to create a new javascript file that will not contain any getServerSideProps or getInitialProps. Next.js will statically optimize this page automatically by prerendering the page to static HTML

Add the below content in the file created above.

static.js

import React from 'react'

export default function Static() {
    return (
        <div>
            This file is statically generated
        </div>
    )
}

Now if you run the below code in the terminal then nextjs will build an optimized production build for your app in which you can see the static.js file is converted into static.html and this file is statically generated and will be rendered client-side.

npm run build

Output:

My Personal Notes arrow_drop_up

Save