Creando la primera página con NextJS
Esta es una serie de artículos que nos ayudará a crear la página de comercio electrónico de Hcode utilizando NextJS, React y JavaScript.
La primera parte de esta serie es la configuración, si aún no la has visto, te recomendamos ver primero:
https://hcode.com.br/#/blog/1-nextjs-introducao
Ahora vamos a abrir el VSCode y crear un archivo llamado index.js dentro del directorio pages creado en el artículo anterior.
Dentro del archivo index.js vamos a crear un componente que será exportado, conteniendo una sintaxis JSX, que permite utilizar comandos HTML y similares dentro de React de forma transparente, nota que tenemos solo una instrucción return dentro de la función y que utiliza paréntesis, así el código JSX es reconocido y puede ser traducido para la aplicación final.
Algo que nos ayudará a escribir componentes y aplicaciones robustas y correctas tiene que ver con el análisis sintáctico que no ocurre con el HTML de manera nativa, aquí en NextJS si olvidas cerrar una etiqueta o cometes un error en alguna regla HTML se mostrará un error, por ejemplo, imagina que no cerramos el signo mayor ">" de la etiqueta Div de cierre, se producirá el siguiente resultado:
Esto en tiempo real, al guardar el archivo ya refleja, falla al compilar, y el motivo ya lo hemos visto, faltó cerrar la etiqueta "jsxTagEnd" ¿No es increíble? Esto es posible porque WebPack está presente y cuenta con Hot Module Replacement integrado. Un tipo de Hot Reload.
¿Vamos a crear otra página para nuestra aplicación? En la carpeta Pages, crea un archivo con el nombre productos.js y similar al archivo index.js vamos a crear un componente y exportarlo.
Para acceder a esta página, solo llámala con la ruta productos: localhost:3000/produtos
Ahora necesitamos crear enlaces entre las páginas, el propio NextJS tiene un recurso de navegación que no actualizará toda la página como el comportamiento estándar del elemento , veremos este componente en el próximo artículo.
¡Hasta entonces!
Glaucio Daniel