NextJS - Create Web applications rendering on the Server Side with React and JavaScript
Just like PHP, we have a Back-End application that receives a request, processes it, and returns a response, we can use the NextJS Lib that allows us to use React and JavaScript on the Server Side, to render a lot of information and return to the Front-End application an optimized code, among other advantages we have:
- An intuitive route-based system (including support for dynamic routes)
- Automatic optimization of static pages
- Server-side page rendering, analyzing and filtering requests.
- Improvement in website loading
- Client-side routing for page optimization
- Support for native CSS and CSS-in-JS libraries
- Webpack-based system with Hot Module Replacement (HMR) enabled.
- API routing system to create your own API with serverless functions.
- Customizable with plugins created by the community or your own Babel or WebPack configuration.
NextJS is cross-platform, which means it will work very well on Windows, Linux, and MacOS. Like many modern web resources, you will only need to have NodeJS installed to start using it.
Let's create a directory hcode-ecommerce and access that directory. Then, we will start a configuration file for NPM called package.json to store the project settings.
Within the hcode-ecommerce directory, create a directory called pages
Next, we will install React, React-Dom, and NextJS while storing the installation settings in Package.json. Open the generated package.json file in the project, in a text editor (IDE) we recommend Visual Studio Code (VSCode)
On line 6 of the mentioned file, we have the property "scripts", replace that section with:
This way, whenever we run the command npm run dev, Node will execute the next command.
It is possible that the operating system will request permission to execute NodeJS, just click on Allow access.
Then you think, did I do something wrong, why did a 404 error page appear... lol is the first trick... everything is fine.
I mean, if a 404 error appeared, that’s correct; if not, take another look at the instructions and see if you missed any steps, like creating the pages folder... it's very common to get this point wrong.
Now that the NextJS setup is finished, shall we create our first page? In the next article, see you there.
Glaucio Daniel