#4 - NextJS - Entendendo o Sistemas de Rotas e Componentes Compartilhados com NextJS

1 de agosto de 2022

Ronaldo B.

JavaScript React Next.js

Entendendo o Sistemas de Rotas e Componentes compartilhados no NextJS

Essa é uma série de artigos que nos ajudará a criar a página de e-commerce da Hcode utilizando NextJS, React e JavaScript.

A primeira parte dessa série é o setup, se você ainda não viu, recomendamos ver primeiro, em seguida criamos a primeira página e então aprendemos a navegar com o componente Link:

Neste artigo falaremos mais sobre como está estruturado o sistema de rotas do NextJS, com este sistema podemos criar rotas e links de forma dinâmica, sendo muito útil para conteúdo gerado dinamicamente, onde a sua URL é formada por elementos vindos de um banco de dados ou de outra origem externa. Vamos lá?

Rotas no NextJS

NextJS possui um mecanismo de rotas baseado no conceito de páginas, e utiliza a pasta pages como base raiz das rotas, sendo subpastas um mecanismo automático para gerar rotas aninhadas.

Quando um arquivo é adicionado a pasta pages, automaticamente uma rota com o nome deste arquivo é gerada.

Usando o diretório pages como referência, basta adicionar os arquivos e subdiretórios a partir desse diretório, veja no exemplo abaixo que index.js dentro da pasta pages fará com que a rota principal chame este arquivo.

Dada a pasta pages com o arquivo index.js dentro dela, será o caminho raiz: pages/index.js → /
As subpastas serão caminhos aninhados dentro da pasta pages: pages/blog/index.js → /blog

Componentes Compartilhados

Podemos criar componentes que podem ser reutilizados em outras páginas, como o topo de um site, ou outro componente que pode ser reutilizado por outros componentes.

Criaremos um diretório chamado components (que poderia receber qualquer outro nome com exceção de public e pages) para armazenar os componentes que criamos, e reutilizá-los dentro de outros componentes.

Dentro desta pasta criaremos os arquivos Menu.js e Header.js

Criaremos a pasta public para assets como imagens e outros recursos globais. Dentro desta pasta criamos a pasta images que conterá o logo da hcode que você pode baixar abaixo, adicione o arquivo png na pasta public\images.

O arquivo Menu.js conterá a estrutura de menu. Iremos importar o recurso Link para navegação das páginas.

Criaremos duas constantes layoutLink e layoutMenu para formatar os hiperlinks e os itens do menu de navegação,

Para criar o menu de navegação, utilizamos um array chamado categories que armazena o label, ou seja o texto a ser exibido, o link da rota destino e um logotipo do link.


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

O arquivo Header.js conterá o componente Menu.js anteriormente criado, além de uma imagem de logotipo que já deve estar na pasta public, repare que não é necessário apontar a pasta public, mesmo que esteja em diretórios diferentes como no caso do arquivo Header.js abaixo que está na pasta components. Isso se deve uma vez que o arquivo index.js que é raiz da aplicação está fora da pasta 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;

No Arquivo index.js iremos importar o componente Header.js que por sua vez também importará Menu.js, exibindo um menu de navegação.

import Header from '../components/Header'

export default function Index(){
    return (
        <div>
            <Header />
            <p>Começando com Next.JS</p>
        </div>
    )
}

Cada um dos arquivos que compõem a rota do Menu, pode ser um arquivo separado dentro do diretório pages. Por exemplo: a rota /javascript chamará o arquivo javascript.js dentro de pages, como exemplo o arquivo javascript.js poderia ter o conteúdo abaixo, e assim poderá criar os respectivos: html5.js; bootstrap.js; php.js

Arquivo: javascript.js

import Header from '../components/Header'

export default function Javascript(){
    return (
        <div>
            <Header />
            <h1>JavaScript</h1>
        </div>
    )
}

Estilizando Componentes

Nos exemplos acima mostramos duas formas de estilizar componentes, uma delas criando constantes ou variáveis com os estilos no formato de objetos, e a outra utilizando uma estilização JSX diretamente no componente com Template String e um par de Chaves antes do Template String, ainda veremos outras maneiras de estilizar componentes no decorrer da série.

O resultado até o momento será semelhante a imagem abaixo: