Additional menu

Code Leaks

Your go-to place for programming guides

Next JS as a Static Site Generator
You are here: Home / JavaScript / Next JS as a Static Site Generator – How to Use IT

Next JS as a Static Site Generator – How to Use IT

Last Updated On By

In this article, we will go through how to create next js as a static site generator by super-simple steps.

 

What is Next JS?

“Next is a framework which we can use to build React sites with Server Side Rendering or generate static pages from our react code. All that configured for us by Next itself.”

next js
Let’s create a NEXT.js app to produce static sites.

Type in the following command

npx create-next-app
created the app
Once you have created the app, you can try running your build by the following command
npm run build
created the app

you can try editing your pages and play around with the structure of the next.js app. Let’s try changing the index.js file in the pages folder.

const Home = () => {
  return (
    <p>
      Hello CodeLeaks!
    </p>
  )
}
export default Home;
Then run your build with the same command. You will be able to visit the localhost IP address from your browser. Or you can run the following command to run without having to build
npm run dev
local host server
You will get the following default page of Next js through the following IP http://localhost:3000/. But after changing the content
local host 3000 work
Welcome Next js

When provided with content, the build will be rendered on runtime and through getStaticProps function, we can have the static properties of the page.

export const getStaticProps = () => {
  return {
    props: {
      buildTimestamp: Date.now()
    }
}
}
no restriction in js
We can add different data sources from different location there is no restriction in NEXT.js You will get the following results which will have a built timestamp to change very second
display render
You can develop your application all you want in the conventional way and then can export the application as a static website. Then run the following command to build and export your website. 
next build && next export
Add the script in package.jason file in the root directory like this.
"scripts": {
  "build": "next build && next export"
}

Now run the command to export the following site to a static site.

npm run build
npm run build
You will find your static site in the out folder created by the export build command as default. This will output each page you’ve created in the pages folder as correspondence with a static page. You would have HTML pages for all the files you have created with the same name and .html extension.
html extension

Conclusion

You can develop your application in a dynamic way with the entire conventional powerful tool and have your HTML pages generated for you. This is easier and cheaper to host your website with static pages with really fast response as it’s only a bunch of HTML tags.

Learn more about which Hosting is best for static website or application.
https://www.codeleaks.io/static-site-hosting-for-application/