Actividad 3.5. Prototipado en Next.js

Actividad 3.5

Prototipado en next.js

Unidad 3. Next.js – El Framework de React para producción

Profesora: FLORES GUERRERO MARISOL

Alumno: JUAN CARLOS GUILLEN SILVA

Primer paso

Instalamos Next.Js

Realizamos la instalación de Next.Js. Abrimos el CMD y colocamos el siguiente comando npx create-next-app@latest

Lista la instalación de Next.Js

Proyecto en proceso

Abrimos en la consola con el siguiente comando code .

Como podemos ver ya se encuentra toda la estructura del proyecto donde trabajaremos.

Next.Js

Corremos en la terminal con el siguiente comando npm run dev.

Instalacion completa de Next.js

En el http://localhost:3000/ nos abrirá la siguiente ventana.

Estilos y Listas

En mi proyecto Next.js, en la carpeta llamada styles tengo mis estilos de manera ordenada. Dentro de esta carpeta, tengo varios archivos CSS, como home.css, socials.css y footer.css. por mensionar algunos. Para darle un estilo más llamativo al sitio.

Estilos y Listas

Las listas representan tres bandas de rock diferentes junto con información sobre cada una de ellas. Cada elemento de la lista incluye el nombre de la banda (stage-title) y una descripción breve (stage-descr) que destaca algunos detalles distintivos sobre la banda. En este caso, las descripciones proporcionan información sobre la historia y el legado de cada banda.

Componentes

IMPORTACION

En este código se importan diversos componentes y herramientas de Next.js en la aplicación web. Esto incluye elementos como la barra de navegación, imágenes optimizadas, iconos y enlaces de desplazamiento . También se incorporan funcionalidades para el envío de correos electrónicos.

Componentes

En componentes cree varios archivos modulares para poder realizar el proyecto del sitio, como lo es Index.tsx, Projects.tsx y Socials.tsx para poder naverga entre ellas en el sitio.

Paso de datos sobre componentes

Next.js nos demuestra cómo los componentes pueden compartir datos utilizando el estado y propiedades.

Rutas del proyecto

En Next.js, las rutas del proyecto se encuentran en la carpeta pages. Estas rutas son esenciales ya que definen la estructura de navegación de nuestra aplicación.

Rutas del proyecto

En el proyecto de Next.js, las rutas se manejan principalmente a través de los archivos dentro del directorio pages. Cada archivo en este directorio corresponde a una ruta.

Rutas del proyecto

En mi proyecto, index.tsx representa la página principal de la aplicación y se corresponde directamente con la ruta raíz, /. Es la primera página que los usuarios encuentran al acceder al sitio web." "Además, contiene paginas como about.js y contact.js, las cuales son accesibles mediante las rutas /about y /contact, respectivamente.

Diseño y Maquetado

Proyecto

La navegación en la aplicación se caracteriza por su fluidez, resultado de la precisión en la programación con Next.js. El diseño y la maquetación cumplieron las espectativas.

Eventos

En el formulario, he añadido un evento que se activa cuando haces clic en el botón de enviar el mensaje. Ahora, al hacer clic en ese botón, se ejecutará la función específica.

Referencias

Bibliografía

Curso de Next.js #03 Rutas, Link, Image y Metadatos (SEO). (2021, julio 9). Curso de Next.js #04 - Layout y Estilos en CSS (módulos). (2021, julio 14). Curso de Next.js #05 - getStaticProps (Consumiendo una API). (2021, julio 19). Fundamentos de Next.Js framework react. (s/f). Github.Io. Recuperado el 25 de abril de 2024, de https://bluuweb.github.io/nextjs/01-fundamentos/ (S/f). Recuperado el 25 de abril de 2024, de http://ttps://stackoverflow.com/questions/76318569/creating-a-next-js-app-in-vs-code-does-not-have-pages-or-styles-folder

Development

GRACIAS