Entendiendo los Sistemas de Rutas y Componentes compartidos en NextJS
Esta es una serie de artículos que nos ayudará a crear la página de e-commerce de Hcode utilizando NextJS, React y JavaScript.
La primera parte de esta serie es la configuración, si aún no la has visto, recomendamos verla primero, luego creamos la primera página y entonces aprendemos a navegar con el componente Link:
- https://hcode.com.br/#/blog/1-nextjs-introducao
- https://hcode.com.br/#/blog/2-nextjs-criando-a-primeira-pagina-com-nextjs-react-e-javascript
- https://hcode.com.br/#/blog/3-nextjs-navegando-entre-paginas
En este artículo hablaremos más sobre cómo está estructurado el sistema de rutas de NextJS, con este sistema podemos crear rutas y enlaces de forma dinámica, siendo muy útil para contenido generado dinámicamente, donde su URL se forma por elementos provenientes de una base de datos u otra fuente externa. ¿Vamos?
Rutas en NextJS
NextJS tiene un mecanismo de rutas basado en el concepto de páginas, y utiliza la carpeta pages como base raíz de las rutas, siendo subcarpetas un mecanismo automático para generar rutas anidadas.
Cuando un archivo se agrega a la carpeta pages, automáticamente se genera una ruta con el nombre de este archivo.
Usando el directorio pages como referencia, solo tienes que agregar los archivos y subdirectorios desde este directorio, mira en el ejemplo a continuación que index.js dentro de la carpeta pages hará que la ruta principal llame a este archivo.
- Dada la carpeta pages con el archivo index.js dentro de ella, será la ruta raíz: pages/index.js → /
- Las subcarpetas serán rutas anidadas dentro de la carpeta pages: pages/blog/index.js → /blog
Componentes Compartidos
Podemos crear componentes que pueden ser reutilizados en otras páginas, como la parte superior de un sitio, o otro componente que puede ser reutilizado por otros componentes.
Crearemos un directorio llamado components (que podría recibir cualquier otro nombre excepto public y pages) para almacenar los componentes que creamos, y reutilizarlos dentro de otros componentes.
Dentro de esta carpeta crearemos los archivos Menu.js y Header.js
Crearemos la carpeta public para assets como imágenes y otros recursos globales. Dentro de esta carpeta creamos la carpeta images que contendrá el logo de hcode que puedes descargar a continuación, agrega el archivo png en la carpeta public\images.
El archivo Menu.js contendrá la estructura de menú. Importaremos el recurso Link para la navegación entre las páginas.
Crearemos dos constantes layoutLink y layoutMenu para dar formato a los hiperenlaces y los elementos del menú de navegación,
Para crear el menú de navegación, utilizamos un array llamado categories que almacena la etiqueta, es decir, el texto a mostrar, el enlace de la ruta destino y un logotipo del enlace.
import Link from 'next/Link'
const layoutLink = {
color: '#333',
textDecoration: 'none'
}
const layoutMenu = {
display: 'inline-block',
minWidth: '150px',
fontFamily: 'calibri',
color: '#333'
}
let categories = [
{
label:'JavaScript',
link:'/javascript',
icon: '../public/images/js.png'
},
{
label:'PHP 7',
link:'/php',
icon: '../public/images/php.png'
},
{
label:'HTML5',
link:'/html5',
icon: '../public/images/html5.png'
},
{
label:'Bootstrap 4',
link:'/bootstrap',
icon: '../public/images/bootstrap.png'
}
]
const Menu = props => (
<nav>
<ul>
{
categories.map(items =>(
<li style={layoutMenu}>
<Link href={items.link}>
<a style={layoutLink} >{items.label}</a>
</Link></li>
))
}
</ul>
</nav>
)
export default Menu
El archivo Header.js contendrá el componente Menu.js creado anteriormente, además de una imagen de logotipo que ya debe estar en la carpeta public, nota que no es necesario apuntar a la carpeta public, incluso si está en directorios diferentes como en el caso del archivo Header.js a continuación que está en la carpeta components. Esto se debe a que el archivo index.js que es raíz de la aplicación está fuera de la carpeta components.
import Menu from "./Menu";
const Header = props => (
<div>
<img src="images/logo-hcode.png" className="img" />
<Menu />
{props.content}
<style jsx>{`
div {
display: flex;
justify-content: space-around;
}
.img {
height: 40px;
}
`}</style>
</div>
);
export default Header;
En el Archivo index.js importaremos el componente Header.js que a su vez también importará Menu.js, mostrando un menú de navegación.
import Header from '../components/Header'
export default function Index(){
return (
<div>
<Header />
<p>Comenzando con Next.JS</p>
</div>
)
}
Cada uno de los archivos que componen la ruta del Menú, puede ser un archivo separado dentro del directorio pages. Por ejemplo: la ruta /javascript llamará al archivo javascript.js dentro de pages, como ejemplo el archivo javascript.js podría tener el contenido a continuación, y así podrá crear los respectivos: html5.js; bootstrap.js; php.js
Archivo: javascript.js
import Header from '../components/Header'
export default function Javascript(){
return (
<div>
<Header />
<h1>JavaScript</h1>
</div>
)
}
Estilizando Componentes
En los ejemplos anteriores mostramos dos formas de estilizar componentes, una de ellas creando constantes o variables con los estilos en formato de objetos, y la otra utilizando una estilización JSX directamente en el componente con Template String y un par de llaves antes del Template String, aún veremos otras maneras de estilizar componentes a lo largo de la serie.
El resultado hasta el momento será similar a la imagen a continuación:
En el próximo artículo aprenderemos a crear páginas dinámicas usando NextJS.
Esperamos que te haya gustado, ¡nos vemos en el próximo artículo!
Hasta Luego
Glaucio Daniel