Introduccion a NextJS

Notas del curso de NextJs de Jonathan Alvarez. Link

Requisitos previos para instalar Next

• Node

• Git

• Browser

Como instalar Next

De forma Automatica

 yarn create next-app

De forma manual

crear carpeta del proyecto y abrir la consola dentro de la carpeta

npm init -y
yarn add next react react-dom

Cambiar los scripts que necesita Next en el package.json

"dev": "next",
"build":"next build",
"start": "next start"

Crear carpeta "pages" dentro del proyecto

Ahora podemos inicializar con "yarn dev". Si accedemos al localhost:3000 nos marcara un 404 porque todavia no hay paginas en el proyecto pero ya esta corriendo en Next.

Routes

• Dinamicas

Ej: La pagina de user es adaptado a cada usuario

• Estaticas

Ej : la pagina de About es siempre la misma

Crear el home como ruta estatica

Vamos a crear un archivo index.js en la carpeta pages y vamos a colocar nuestro primer componente de React

import React from 'react'

const Home = () => {
    return (
        <div>
            <h1>Hola Mundo</h1>
        </div>
    );
};

export default Home;

Si accedes de nuevo al localhoost:3000 veras la pagina de home, NextJS toma el archivo index como el home por defecto. Ahora cada archivo javascript que creemos en la carpeta pages sera una ruta para nuestra pagina. Si creamos un archivo llamado about.js con un componente similar al del home:

import React from 'react'

const About= () => {
    return (
        <div>
            <h1>Este es el about</h1>
        </div>
    );
};

export default About;

Podremos acceder a la ruta localhoost:3000/about directamente y nos mostrara ese texto.

Hasta ahora tenemos el index y el about como paginas estaticas. Ahora veamos una pagina dinamica como seria los detalles de un producto.

Si la ruta seria /product/[idDelProducto] primero tengo que crear la carpeta de product y dentro de la carpeta crear un archivo js con el nombre entre corchetes [ ].

• Creamos entonces el archivo [id].js en la carpeta product.

Dentro del archivo [id].js creamos un componente, y presta atencion a la palabra id del query.

import React from 'react';
import { useRouter } from 'next/router'

const ProductItem = () => {

    const router = useRouter();
    return (
        <div>
            <h1>Este es el producto {router.query.id}</h1>
        </div>
    );
};

export default ProductItem;

Como mencionaba el id del query representa el nombre del archivo js entre corchetes. Si el nombre era [idProduct].js entonces el query seria router.query.idProduct.

Ahora podemos escribirlo mas simple destructurando el useRouter();

import React from 'react';
import { useRouter } from 'next/router'

const ProductItem = () => {

    const { query : { id },} = useRouter();
    return (
        <div>
            <h1>Este es el producto {id}</h1>
        </div>
    );
};

export default ProductItem;

Implementando enlaces con el componente Link

Next nos ofrece el componente Link para que la navegacion sea mas rapida, esto se debe a que la navegacion se lleva a cabo del lado del cliente (SPA) y no del servidor. Entonces las paginas no se vuelven a recargar cada vez que nos movemos entre paginas.

El componente Navbar que iria en cada pagina seria:

import React from 'react'
import Link from 'next/link'

const Navbar = () => {
    return (
        <nav>
            <menu>
                <Link href="/">
                    <a >Home</a>
                </Link>
                <Link href="/about">
                    <a >About</a>
                </Link>
            </menu>
        </nav>
    );
};

export default Navbar;