Next.JS What is it?

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, Web pack 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.

node -v // BY EXECUTING THIS COMMAND WILL RETURN US SOMETHING LIKE
v8.10.0 // WHAT IS THE VERSION CURRENTLY INSTALLED

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.

cd Escritorio //HE PLACES US ON THE DESK.
mkdir Next //CREATE THE CALLED FOLDER Next
cd Next //WE ARE POSITIONED INSIDE THE FOLDER.
  • 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.

npm init -y

Después de ejecutar este comando, procederemos a descargar e instalar todas las dependencias de React.js y Next.js.

npm install --save next react react-dom

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.



{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

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.

El router lo que busca es el mismo nombre del la ruta (path) que tenemos en la carpeta /pages. En pages crearemos un archivo llamado index.js dentro del cual agregaremos todo lo que nuestra aplicación necesita.

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

import React from'react';
import Link from'next/link';export default class extends React.Component {
  render() {
    return (
        <div>
        <h1>Hello welcome</h1>
        <Link href="/about">
        <a>About Page</a>
        </Link>
        <style jsx>{`
        a{
            color:grey;
            text-decoration:none;
        }
       `}</style>
    </div>
    )
  }  
}

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

import React, { Component } from 'react';
import Link from 'next/link';

class About extends Component{
    static async getInitialProps() {
        return { name: 'Imanol' };
    }
    render() {
        return (
            <div>
                <h1>About {this.props.name}h1>
                <Link prefetchhref="/">
                    <a>Return to home <a>
                Link>
            <div>
        );
    }
}
export default About;

If we return to our main page and now we click on About the page we 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.


Source: medium.com

Recent Posts

See All

Python 3 Network Packet Sniffer

A simple pure-Python network packet sniffer. Packets are disassembled as they arrive at a given network interface controller and their information is displayed on the screen. This application maintain