Next.js, a React-based framework for the server side

Next.js is a framework that comes to help us with the creation of dynamic pages on the server side and that offers us a very powerful solution to work with React.

Next.js is a tool that helps us in the mission of performing the “render-side rendering”, that is, the rendering of the application pages or screens directly on the server. In this way, the "weight" of the processing and creation of pages is mainly turned over to the server side. This technique is also suitable when we think about search engine positioning (SEO), since it has a very efficient route management for the URLs that make up our project.

To learn more about Next.js we can enter the website: https://nextjs.org/

To begin, we must have Node.js installed and on the folder where we save our projects, we run the following command:

 npm i react react-dom next

In the package.json file we must make sure we have the following lines:

 {"scripts": {

"dev": "next",

"build": "next build",

"start": "next start"

}

}

For this example we will use as css framework Bootstrap https://getbootstrap.com/docs/5.0/getting-started/introduction/, additionally we will install a loader module

 npm i bootstrap react-loader-spinner

We create a folder called public which is where we will place by saying the .js with the routes as we would with PHP, that is how easy it is Next.js

Within public for this example we will create 4 routes (Home, About, Services and Contact)

Components

But first we are going to create a folder called components and we will create 3 components (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 </a>
         </Link>
         <a target="_blank" className="text-danger" href="https://hive.blog/@jfdesousa7"> Jfdesousa7 </a> |
         <a target="_blank" className="text-info" href="https://tupaginaonline.net"> tupaginaOnline </a>
         <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"> Get to know the React framework called Next.js with a practical example </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 lt;/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;

Routes

At home we are going to consume an API from https://fakestoreapi.com/products/ that will provide us with products for our example

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;

And with those friends we reached the end of the tutorial, I hope you enjoyed it and until next time!

Visit my official website for quotes and much more

TupaginaOnline.net