Com a popularidade da Single Page Application (SPA), a renderização de conteúdo no lado cliente aumentou. Porém, com ela alguns problemas surgiram e uma boa maneira de evitá-los é com o uso do NEXT.js

Ao utilizar o React de maneira tradicional, o servidor envia uma página em branco com os arquivos JavaScript. Com isso todo o processamento é feito diretamente no navegador, livrando a responsabilidade do servidor de efetuar novos processamentos.

Mas, caso o usuário não use um navegador que efetue o processamento sem travamentos, a experiência de navegação pode não ser muito boa, trazendo desvantagens para o processo.

Além disso, um outro problema é o Search Engine Optimization (SEO), já que o Google afirma em sua documentação que é difícil efetuar o processamento de JavaScript e com isso nem todos os rastreadores são capazes de processar.

Contudo, existem algumas soluções que podem nos auxiliar com esses problemas e uma delas é o NEXT.js.

O que é o NEXT.js?

NEXT.js é um framework React mantido pela Vercel e pela comunidade open-source, com o objetivo de facilitar o desenvolvimento de projetos front-end.

Esse framework contém vários recursos previamente configurados, como:

• Roteamento
• Suporte ao TypeScript
• Renderização Estática
• Renderização no Servidor (SSR)
• E muito mais;

Utilizando o NEXT.js

Desse modo, usar o NEXT.js é bastante simples e para iniciar o projeto basta rodar o seguinte comando:

npm create next-app iteris-nextjs

Assim que executar o comando uma nova pasta será criada chamada “iteris-nextjs”.

Nela você terá uma estrutura de pastas semelhante a imagem abaixo:

O NEXT.js por padrão efetua o gerenciamento das rotas, sem a necessidade de uma biblioteca externa, como react-router-dom. Os arquivos contidos em “pages”, terão os nomes automaticamente mapeados.

Vamos testar?

Na pasta “pages”, crie um arquivo chamado “contact.js”, com o seguinte conteúdo.

import React from 'react';
 
export default function Contact() {
    return <h1>Esta é a página de contato</h1>;
}

Logo após, modifique o arquivo “index.js”.

import React from 'react';
 
export default function Home() {
    return <h1>Esta é a página inicial</h1>;
}

Em terceiro lugar, para navegarmos entre as páginas, vá até a raiz do projeto, crie uma pasta “components” e dentro crie um arquivo “NavLink.js”.

import React from 'react';
import Link from 'next/Link';
 
const NavLink = () => (
    <ul>
        <li>
            <Link href="/">
                <a>Página inicial</a>
            </Link>
        </li>
        <li>
            <Link href="/contact">
                <a>Contato</a>
            </Link>
        </li>
    </ul>
);
 
export default NavLink;

Por último, vamos adicionar o NavLink de forma global para todas as páginas.

Para isso, vá em “pages/_app.js” e faça a seguinte alteração:

import '../styles/globals.css';
import NavLink from '../components/NavLink';
 
function MyApp({ Component, pageProps }) {
    return (
        <>
            <NavLink />
            <Component {...pageProps} />
        </>
    );
}
 
export default MyApp;

Agora, para verificarmos se está tudo ok, vamos executar nossa aplicação no modo de desenvolvimento utilizando o seguinte comando:

npm run dev

Ao acessar o http://localhost:3000 iremos nos deparar com nossa página inicial (“pages/index.js”)

Assim como, ao clicar em “Contato” ou acessar http://localhost:3000/contact, será renderizado o “pages/contact.js”

Renderização no servidor

Numa SPA comum em React, o processamento do HTML exibido ao usuário ocorre no lado cliente (navegador).

Entretanto, ao utilizar o NEXT.js, ao solicitar a visualização de uma página, é o servidor que efetuará o processamento, gerando o HTML apresentado no navegador.

Desse modo, os rastreadores dos motores de busca (SEO) terão maior facilidade de identificar os dados e indexar sua aplicação web.

Para garantirmos que o HTML está sendo processado pelo servidor, vamos realizar mais um teste desabilitando o Javascript do Chrome.

No Chrome, acesse o Developer Tools e clique em ? (Customize and control DevTools), em seguida clique em “More tools” e acesse o “Settings“. Procure a sessão “Debugger” e clique em “Disable Javascript“.

Agora que o Javascript está desativado, acesse novamente o http://localhost:3000 e perceba que a aplicação será renderizada da mesma forma, algo que não aconteceria em uma aplicação React “comum”.

Como resultado, a facilidade de uso destas funcionalidades e a enorme quantidade de soluções prontas do NEXT.js, seu uso tem crescido cada vez mais na comunidade de front-end, se tornando um recurso essencial no desenvolvimento com o React.

Para conhecer mais sobre o framework, confira a documentação oficial que está cheia de funcionalidades e exemplos.