Conoce el framework de React llamado Next.js con un ejemplo practico

Tecnología
  
Programación Web
  
Javascript
  
Bootstrap
  
Desarrollo Web
  
React
    27 Febrero, 2021   Regresar el blog
Compartir:

Next.js, un framework basado en React para el lado servidor

Next.js es un framework que llega para ayudarnos con la creación de páginas dinámicas del lado del servidor y que nos ofrece una solución muy potente para trabajar con React. Next.js es una herramienta que nos ayuda en la misión de realizar el “render-side rendering”, es decir, el renderizado de las páginas o pantallas de la aplicación directamente en el servidor. De esta manera, el “peso” del procesamiento y creación de páginas lo volcamos principalmente al lado servidor. Esta técnica también resulta adecuada cuando pensamos en el posicionamiento en los buscadores (SEO), ya que posee un muy eficiente manejo de rutas para las URLs que conformen nuestro proyecto.

Para conocer más sobre Next.js podremos ingresar en el sitio Web: https://nextjs.org/


Para comenzar, debemos tener instalado Node.js y sobre la carpeta donde guardamos nuestros proyectos, corremos el siguiente comando:
npm i react react-dom next


En el archivo package.json debemos asegurarnos tener las siguientes líneas:
{"scripts":{
"dev": "next",
"build": "next build",
"start": "next start"
}
}


Para este ejemplo usaremos como framework de css Bootstrap https://getbootstrap.com/docs/5.0/getting-started/introduction/, adicional instalaremos un modulo loader
npm i bootstrap react-loader-spinner

Creamos una carpeta llamada public que es donde colocaremos por decir los .js con las rutas como lo hariamos con PHP, asi de facil es Next.js


Dentro de public para este ejemplo crearemos 4 rutas (Home, About, Services y Contact)



Componentes

Pero antes vamos a crear una carpeta llamada components y crearemos 3 componentes (Item.js, Layout.js, Navigation.js)


components/Navigation.js
import Link from "next/link";
const Navigation = () => {
  return (
    <nav className="navbar navbar-expand-lg navbar-light bg-dark">
      <div className="container-fluid container">
        <Link href="/">
          <a className="navbar-brand fw-bold text-light">Next.js Tutorial | 
        </Link>
        <a target="_blank" className="text-danger" href="https://hive.blog/@jfdesousa7">Jfdesousa7 | 
        <a target="_blank" className="text-info" href="https://tupaginaonline.net" >tupaginaOnline
        <button
          className="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span className="navbar-toggler-icon" />
        </button>
        <div className="collapse navbar-collapse" id="navbarNav">
          <ul className="navbar-nav ml-auto">
            <li className="nav-item">
              <Link href="/about">
                <a className="nav-link  text-light">About</a>
              </Link>
            </li>
            <li className="nav-item">
              <Link href="/services">
                <a className="nav-link  text-light">Services</a>
              </Link>
            </li>
            <li>
              <Link href="/contact">
                <a className="nav-link  text-light">Contact</a>
              </Link>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  );
};
export default Navigation;


components/Layout.js
import Navigation from "./Navigation";
import ´bootstrap/dist/css/bootstrap.min.css´
const Layout = (props) => {
  return (
    <div>
      <Navigation />
      <div className="container py-2">
        <h1 className="py-3 text-primary">Conoce el framework de React llamado Next.js con un ejemplo practico</h1>
        {props.children}</div>
    </div>
  );
};
export default Layout;


components/Item.js
import { useState, useEffect } from "react";
import Loader from "react-loader-spinner";
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
function Item({ id }) {
  if (!id) return <h1>Select the Product</h1>;
  const [singleItem, setSingleItem] = useState({});
  const [loader, setLoader] = useState(true);
  useEffect(() => {
    fetch(`https://fakestoreapi.com/products/${id}`)
      .then((result) => result.json())
      .then((d) => {
        setSingleItem(d);
        setLoader(false);
      });
    return () => {
      console.log("Unmount");
      setLoader(true);
    };
  }, [id]);
  return (
    <>
      <h2>Item</h2>
      {loader ? (
        <div className="sticky-top text-center">
          <Loader type="Bars" color="#00BFFF" height={80} width={80} />
        </div>
      ) : (
        <div className="card text-center sticky-top">
          <center>
            <img
              src={singleItem.image}
              style={{ width: "120px" }}
              className="card-img-top rounded-sm"
              alt={singleItem.title}
            />
          </center>
          <div className="card-body">
            <h5 className="card-title">{singleItem.title}</h5>
            <p className="card-text">{singleItem.description}.</p>
          </div>
          <ul className="list-group list-group-flush">
            <li className="list-group-item">{singleItem.price}</li>
          </ul>
          <div className="card-body">
            <a href="#" className="card-link">
              Buy
            </a>
          </div>
        </div>
      )}
    </>
  );
}
export default Item;



Rutas

En home vamos a consumir una API de https://fakestoreapi.com/products/ que nos proveera de productos para nuestro ejemplo
pages/index.js
import Layout from "../components/Layout";
import Head from "next/head";
import Item from "../components/Item";
import { useState } from "react";
const index = ({ stars }) => {
  const [id, setId] = useState(null);
  return (
    <>
      <Head>
        <title>Next | Index</title>
      </Head>
      <Layout>
        <div className="row">
          <div className="col-md-6">
            <h2>Products</h2>
            {stars.map((i) => (
              <div key={i.id} className="list-group">
                <a
                  className="list-group-item list-group-item-action"
                  style={{ cursor: "pointer" }}
                  onClick={() => setId(i.id)}
                >
                  <div className="d-flex w-100 justify-content-between">
                    <h5 className="mb-1"> {i.title} </h5>
                    <img style={{width:´60px´}} src={i.image} className="img-fluid rounded-3 w-10" />
                  </div>
                  <p className="mb-1">${i.price}</p>
                </a>
              </div>
            ))}
          </div>
          <div className="col-md-6">
            <Item id={id} />
          </div>
        </div>
      </Layout>
    </>
  );
};
index.getInitialProps = async (ctx) => {
  const res = await fetch("https://fakestoreapi.com/products");
  const json = await res.json();
  // console.log(json);
  return { stars: json };
};
export default index;


pages/about.js
import Layout from "../components/Layout";
import Head from "next/head";
const about = () => {
  return (
    <>
      <Head>
        <title>Next | About</title>
      </Head>
      <Layout>
        <h1>About</h1>
        <p>Text here!!!</p>
      </Layout>
    </>
  );
};
export default about;


pages/contact.js
import Layout from "../components/Layout";
import Head from "next/head";
const contact = () => {
  return (
    <>
      <Head>
        <title>Next | Contact</title>
      </Head>
      <Layout>
        <h1>Contact</h1>
        <p>Text here!!!</p>
      </Layout>
    </>
  );
};
export default contact;


pages/services.js
import Layout from "../components/Layout";
import Head from "next/head";
const services = () => {
  return (
    <>
      <Head>
        <title>Next | Services</title>
      </Head>
      <Layout>
        <h1>Services</h1>
        <p>Text here!!!</p>
      </Layout>
    </>
  );
};
export default services;


Para ver este ejemplo en vivo, click en el enlace https://next-app-tutorial.herokuapp.com/


Y con esos amigos llegamos al final del tutorial, espero que lo hayan disfrutado y ¡hasta la próxima!


Visite mi sitio web oficial para presupuestos y mucho más

TupaginaOnline.net

654 vistas
Compartir:


Autor
Jose Fuentes

- Web Developer -

 


0 COMENTARIO(S)
Contesta
Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *
Comentario *
Nombre *
Correo electrónico *
Sitio web

Articulos Relacionados
Articulos recientes

Desarrollos en venta

$ usd dólar 600