Some time ago I started to investigate and try Next.js and discovered how awesome is this wonderful Framework that allows us to create our views from the server side. Next.js is based on React, Webpack and Babel. It allows us to start a project in a very simple way, since we do not have to configure anything and we only have to execute simple commands so that the project is ready.
Next.js is inspired by PHP and benefits from a great system of JavaScript modules, which allows us to export the components of our application, which allows us to perform individual tests for each component, as well as download thousands of components or modules from npm
When we talk about applications in Next.js, we have to talk about a CSS system called styled-jsx, this system was specially created to work with Next.js, this system allows us to work with all the power of CSS directly in our JS Files.
Styled-jsx gives us certain benefits, for example, when we represent the components we only generate the CSS that is being used and, once the component is no longer used, it automatically removes the CSS, which means that we will never have unnecessary CSS.
Deploy
Usually when we make an application, the final idea is to share it with everyone! This with Next.js is super easy! Since we have a next build command that generates a .next folder with all the code ready for production, once loaded on the server we just have to execute next start and that’s it, our application is running🤯🤯.
Installing NextJS
The installation of Next is simple, the only requirement is to have installed NodeJS and NPM. If you do not have it installed, go to https://nodejs.org/es/ and download the stable version (LTS). After installation, open the console and enter the following to confirm that it has been installed correctly.
After installing and corroborating that NodeJS was installed correctly, we will position ourselves on the desktop and create a folder called Next, you can do it from the console with the following commands.
- Command 1: we move to our desk
- Command 2: Create the folder called Next
- Command 3: We position ourselves inside the folder.
Once placed in the folder, we execute the following command that will help us to configure the package.json with some predefined configurations from scratch, through this file we can control and manage all the npm packages that we will use in different projects.
After executing this command, we will proceed to download and install all the dependencies of React.js and Next.js.
Cool! We have already installed our dependencies and also our package.json, now we can start to create our first application.
In our favorite editor we open the folder and the package.json file, in which we will add the scripts to run our project both in development and in production.
Now let’s go to the most entertaining part! Our first sight! We will create a folder called pages, Next will automatically search all pages in this folder.
The router you are looking for is the same name of the route (path) that we have in the folder /pages. In the pages we will create a file called index.js in which we will add everything our application needs.
In React, each component must return a single HTML object.
Example:
GET/ Show the file in: /pages/index.js
GET/medium_ Show the file in: /pages/medium.js
In our index.js file we will add the following code
Now we execute the following command in the terminalnpm run dev y en localhost:3000 We will have our home page.
The command npm run dev start a default HTTP server in localhost: 3000, if we enter we will see a welcome message in color grey and a link to /about, which when you try to access it, will return a 404 error.
Next_ it has its own 404 page, which can be modified by creating a file called _error.js within the pages of the folder.
Now we will create in the pages a new file called about.js`in which we will enter the following code
If we return to our main page and now we click on About the pagewe can see that we enter our About page that has our name, and as we can read in the code, we include an asynchronous method called getInitialProps`.
This method is executed during the rendering process on the server, to obtain the necessary data to display on the page, and also once a route change is made, it is executed to obtain the data in the browser itself.
In general, this data comes from an API external to the server that processes it. What allows us to scale our API and our server separately.
I recommend that you read about now.sh so that the implementation is done faster and you can share a self-generated URL. This service allows you to send production applications created with Node.js, static files, among others, the best thing Now is that it guarantees that the applications automatically adjust to our needs.
🤓 You can follow me on Twitter or find me on GitHub by visiting my website
Top comments (0)