Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

Next.js Automatic Static Optimization

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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.


import React from 'react'
export default function Static() {
    return (
            This file is statically generated

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


My Personal Notes arrow_drop_up
Last Updated : 05 Jan, 2023
Like Article
Save Article
Similar Reads
Related Tutorials