Conheça o NextJS ! Uma ferramenta que vai melhorar e otimizar seus apps e processo de trabalho.

As vezes pode ser uma tortura começar um projeto Front-end. Principalmente com ReactJS. O ecossistema dessa tecnologia é imenso e ainda existem poucos padrões que ajudam durante o desenvolvimento. A CLI pode ter reduzido bastante as dores de cabeça mas ainda sim pode ser algo trabalhoso.  Nesse artigo eu vou te apresentar o NextJS, uma ferramente muito legal que vai mudar seus projetos React.

O que é o NextJS

O NextJS é uma ferramente mantida pela Zeit e pela comunidade open-sourcer.  Ele tem como objetivo agilizar os processos de desenvolvimentos de Apps React oferecendo soluções como:

Motivação para usar NextJS

Imagine que você é responsável pelo desenvolvimento de um e-commerce onde o front-end será todo em ReactJS consumindo API de uma plataforma. Foi definido no escopo que a loja precisa ter um SEO forte para se destacar dos concorrentes. Aqui temos alguns problemas de SEO:

Além desses problemas existem diversos outros como configurar o ambiente de desenvolvimento usando webpack, sass, etc…

O NextJS resolve esses e outros problemas de forma fácil.

Vamos testar o NextJS?

Não adianta ficar falando as vantagens se você realmente não experimentar a ferramenta. Vamos configurar um projeto simples com algumas rotas.

1 – Abra seu editor de código favorito e comece um novo projeto usando npm ou yarn.

2 – Instale o next, react e react-dom usando npm ou yarn

$ yarn add next react react-dom

3 – Crie uma pasta com nome “pages”. É importante que o nome da pasta seja exatamente esses por que é uma das regras do NextJS. Dentro dela, crie um index.js

import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>Home</h1>

      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas porro maiores doloribus dicta et exercitationem illo sequi consectetur velit, eius cumque veniam sapiente consequuntur explicabo facilis, suscipit perspiciatis ipsa dolorem?</p>
    </div>
  );
};

export default Home;

4 – Agorq que temos uma página home vamos iniciar o servidor. No package.json crie um script “dev” : “next”

e em seguida rode “yarn dev”

{
  "name": "next",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "next": "^9.3.1",
    "react": "^16.13.0",
    "react-dom": "^16.13.0"
  },
  "scripts": {
    "dev": "next"
  }
}

Você vai ver seu app rodando no localhost:3000.

5 – Vamos add mais uma página e vamos navegar entre elas. Crie mais um arquivo com o nome “sobre.js” dentro da pasta pages.

import React from 'react';

const Sobre = () => {
  return (
    <div>
      <h1>Sobre</h1>

      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas porro maiores doloribus dicta et exercitationem illo sequi consectetur velit, eius cumque veniam sapiente consequuntur explicabo facilis, suscipit perspiciatis ipsa dolorem?</p>
    </div>
  );
};

export default Sobre;

Se você acessar o localhost:3000/sobre você verá a nova página. Isso por que o Next configura a rota de acordo com o nome do arquivo.

6 – Você pode navegar entre as rotas usando o componente Link do Next. Vamos criar um menu de navegação.

Na raiz do projeto crie uma pasta components, dentro dela crie “Menu.js” com esse conteúdo.

import React from 'react';
import Link from 'next/link';

const Menu = () => {
  return (
    <nav>
      <Link href="/">
        <a>Home</a>
      </Link>
      <Link href="/Sobre">
        <a>Sobre</a>
      </Link>
    </nav>
  );
};

export default Menu;

Note que o <a> está dentro de <Link> dessa forma <a> herda a propriedade Href.

Agora basta importar o menu para suas páginas e ver a mágica.

Finalizando…

Tenho certeza que o NextJS vai ter ajudar muito na hora de desenvolver seu próximo app. Essa foi uma pequena demonstração do que ele é capaz, ainda tem muita coisa para mostrar que fica para outras postagens. Você pode explorar e contribuir com o projeto. Conta nos comentários o que você achou.