En este tutorial, vamos a trabajar en la funcionalidad de listar las guitarras en el Proyecto NEXT JS GuitarLA. Este proyecto es una aplicación web de comercio electrónico de guitarras, donde los usuarios pueden explorar y comprar una variedad de guitarras de diferentes marcas y modelos.
En esta parte del proyecto, nos vamos a enfocar en mostrar la lista de guitarras disponibles en la tienda. Para ello, utilizaremos Next.js, un framework de desarrollo web basado en React que nos permite construir aplicaciones web de forma rápida y eficiente.
Paso 1: Configuración inicial
Antes de empezar con la funcionalidad de listar guitarras, asegúrate de tener Node.js y npm instalados en tu computadora. Para crear un nuevo proyecto de Next.js, puedes ejecutar el siguiente comando en tu terminal:
npx create-next-app@latest guitarlaEsto creará un nuevo directorio llamado guitarla con la estructura inicial de un proyecto de Next.js.
Paso 2: Crear la estructura de datos
Para simular una base de datos de guitarras, crearemos un archivo guitars.json dentro de un directorio data en la raÃz del proyecto. Este archivo contendrá la información de las guitarras en formato JSON:
{
"guitars": [
{
"id": 1,
"brand": "Fender",
"model": "Stratocaster",
"price": 999
},
{
"id": 2,
"brand": "Gibson",
"model": "Les Paul",
"price": 1499
},
{
"id": 3,
"brand": "PRS",
"model": "Custom 24",
"price": 1999
}
]
}Paso 3: Crear la página de listado de guitarras
Dentro del directorio pages en la raÃz del proyecto, crea un nuevo archivo llamado guitars.js. Este archivo será la página de listado de guitarras y será accesible en la ruta /guitars.
En este archivo, importa los datos de guitarras desde el archivo guitars.json que creamos anteriormente y utiliza un componente de React para mostrar la lista de guitarras:
import guitarsData from '../data/guitars.json';
const GuitarsPage = () => {
return (
<div>
<h1>Listado de guitarras</h1>
<ul>
{guitarsData.guitars.map(guitar => (
<li key={guitar.id}>
<p>{guitar.brand} {guitar.model}</p>
<p>${guitar.price}</p>
</li>
))}
</ul>
</div>
);
}
export default GuitarsPage;Paso 4: Agregar estilos CSS
Para darle estilo a la página de listado de guitarras, crea un archivo guitars.module.css en el mismo directorio que el archivo guitars.js. En este archivo, puedes agregar estilos CSS para personalizar la apariencia de la lista de guitarras:
ul {
list-style-type: none;
padding: 0;
}
li {
border: 1px solid #ccc;
margin-bottom: 10px;
padding: 10px;
}
p {
margin: 0;
}Paso 5: Ejecutar el proyecto
Para ver la página de listado de guitarras en acción, puedes ejecutar el proyecto de Next.js utilizando el siguiente comando en tu terminal:
npm run devEsto iniciará el servidor de desarrollo de Next.js y podrás acceder a la página de listado de guitarras en tu navegador en http://localhost:3000/guitars.
¡Y listo! Ahora tienes una página de listado de guitarras en tu aplicación web de GuitarLA construida con Next.js. Puedes personalizar y agregar más funcionalidades a esta página según tus necesidades y requisitos del proyecto. ¡Disfruta codificando!
