Next.js - How To Use Next.js as a Static Site Generator

View this thread on: d.buzz | hive.blog | peakd.com | ecency.com
·@devpress·
0.000 HBD
Next.js - How To Use Next.js as a Static Site Generator
In this post, we see how to use Next.js to create a static site. These static sites can be used for landing page  and many other use cases. You can also run minor dynamic content through such type of the sites. 

Previously, I have covered how to create static site using two other static site generators. 

- [11ty How to Create a Static Site](https://hive.blog/hive-122108/@devpress/11ty-how-to-create-and-deploy-11ty-website)
- [Gatsby How to Create a Static Website](https://hive.blog/hive-122108/@devpress/gatsby-how-to-create-a-static-website)

If you are interested you should take a look at the above two posts if you want. I think I have covered some of the good basics through them. It'd be lot easier to pick up on next.js if you have completed the tutorials on previous two other frameworks. 

So let's talk about Next.js? 

Next.js is a react based static site framework. This framework can be used for creating blogs, dynamic forms, sites with limited amount of API options. So learning about this framework would be a good option for you to create static site and also the static content based pages. Even leofinance uses the next.js in the background. 

You can check out the Next.js video tutorial below for the step by step instructions. You can find the tutorial that creates the static site in 15 minutes. It'd be fun to complete the tutorial during the weekend. 

https://www.youtube.com/watch?v=Ios-GyzzZBc

If you want to check out on the text based instructions on how to install Next.js and use it for creating the project. You can check the below instruction. 


![hive.png](https://images.hive.blog/DQmctzDtyBW92NdMBfuv3cDGmpzt1WcT8PJao5vvm8Qcfo1/hive.png)

You can check the above instructions and get the static site installed as a "myblog". You can access the content of the project in the port 3000. Now from this point onwards you can create site as you please. It can be for the landing page and the types of site that you want. 

### What type of the Projects You Can Make with Next.js?
---
Next.js is a good framework. That is one of the reason even the leofinance use it as an backend interface for the content. You can see it is being used for every backend features within the hive blockchain. I am pretty sure a lot of projects on the hive blockchain are making use of the next.js framework for the usage. 

It is possible that you can find the next.js framework being used in many web3 projects. Lot of them use it because it's easy to deploy your smart contract based projects and the sites. It's pretty much easier to create and deploy as well. 

### Where to deploy the Next.js websites?
---
Most of the folks find it easier to use the Netflify for the deployment. By default the next.js has the home at the Vercel. Which is also a good host for hosting the static site projects. Another good option is render and porter. Both of those can get your project properly installed on the web and the VPS based hosts as well. 

I think there are some of the deployment based CMS too. You can make use of the CMS based deployment to the places like digitalocean and other VPS based hosting services. I think it can make it easier for you to use the next.js to design and deploy over there. 

I have mostly used the vercel and the netlify which is easy to use and also lot easier to work with for the deployment. Also for those who are in search of the design based projects to use and simply deploy can use vercel so I recommend it. 

If you have the git based deployment options you can easily get it to many VPS or the heroku like sites where it can be added, deployed and updated on easier way. Lot easier to maintain as well. 


I hope this post gets you to learn the Next.js  for setup and also deploy on the web.
👍 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,