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)
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! |