Uncategorized

Conheça o Next.js 10

NeXTJS10 Slogan

Depois daquele clássico tempo sem escrever nada, porque profissional de TI de verdade nunca tem tempo porque faz o que gosta então não faz mais nada. Eu resolvi compartilhar com vocês o porque vocês deveriam conhecer o Next.JS 10 e começar a trabalhar com ele.

Eu mesmo não uso tanto o NextJS mas isso vai mudar com certeza à partir de agora. Os caras realmente se superaram e poliram esta ferramenta a um nível muito alto. Tudo muito bem pensado, muito bem planejado.

Pra começar a integração criada pela Vercel do Github com a plataforma deles consegue te entregar uma esteira de desenvolvimento de sistema completa, completa mesmo, Com Deploy em produção, stage e dev, rodando sua aplicação, tudo de graça. Isso mesmo. Os caras te dão um laboratório automatizado de graça pra você testar sua aplicação !

Vou mostrar aqui um exemplo. É coisa simples. Cria lá no seu Github (se você não sabe do que eu estou falando é porque está no Blog errado) então clone ele para sua máquina (se se empolgar depois muda ele o deleta e faz outro). Clonou? Então blz!

Uma vez clonado vamos abrir no seu Editor de Código predileto e vamos criar um projeto nextjs nele. Roda aí…

npx create-next-app
# ou
yarn create next-app

Daí é aquelas perguntas padrão de quando criamos um projeto né. Qual o nome (lembre-se que não pode ser camel case os nomes agora) e ele vai instalar tudo.

Você vai reparar que ele possui o comando “yarn dev” e é ele que vai rodar o projeto no servidor de desenvolvimento dele. Esse atalho, está sendo executado lá o “package.json” dele. e nada mais é que o comando “next dev”.

Agora explicando rapidamente aqui a estrutura dele. O Next.JS salva todas as suas páginas dentro da pasta “pages“. Você sempre deve salvar suas páginas lá dentro e o Next entende que cada uma dessas páginas é uma rota de seu sistema então você não precisa se preocupar com isso.

https://nextjs.org/docs/basic-features/pages

https://nextjs.org/learn/basics/navigate-between-pages/pages-in-nextjs

Sai declarando que a navegação é com ele, muito massa isso né. Mas deve se atentar que isso só ocorrerá automaticamente se for feito na pasta “pages”.

Por exemplo se no seu projeto você criar uma pasta chamada “menu” e dentro dela criar um arquivo chamado “menu.js”. Na sua URL localhost default do projeto esta página vai ficar… http://localhost:3000/menu/menu

O NextJS o navegador não carrega a página inteira e a navegação do lado do cliente funciona em seu estado DOM. Então por exemplo. Se você colocar um fundo amarelo em uma página (componente no caso) no inspetor de elementos do navegador e navegar nela indo para outra página e voltando vai perceber que quando voltar a cor que injetou no inspetor persiste. Mas atenção, é necessário usar os elementos do NextJS. Por exemplo se você usasse a tag “a” ao invés da tag do NextJS para navegar, a “Link” perderia a cor porque ele carregaria a página inteira novamente. Não se esqueça que “a” é um tag do HTML que dispara um comportamento nativo do HTML junto ao browser.

fonte: https://nextjs.org/learn/basics/navigate-between-pages/client-side

Outra coisa muito legal quando se trabalha com NextJS (e cara, o velho modelo estático vai voltar com tudo na minha opinião) é que carregar apenas o código da página solicitada também significa que as páginas ficam isoladas. Se uma determinada página gerar um erro, o restante do aplicativo ainda funcionará.

No caso do "className" do React. Se você adicionar ou quiser ou precisar usar ele precisará fazer isso externamente usando a clássica tag "<a>". Você não deve usar className com o NextJS. 
Exemplo:

import Link from 'next/link' 

export default function LinkClassnameExample() {
  // To add attributes like className, target, rel, etc.
  // add them to the <a> tag, not to the <Link> tag.
  return (
    <Link href="/">
      <a className="foo" target="_blank" rel="noopener noreferrer">
        Hello World
      </a>
    </Link>
  )
}

Além disso, um Sistema rodando em produção com Next.js,
sempre que o componente possuir a tag “Link” carregar no navegador
o Next.js pré-busca automaticamente o código para a página vinculada
por trás dos panos. Quando você clicar no link, o código da página de destino já estará carregado em segundo plano e a transição da página será quase instantânea!

Outra coisa é quanto o arquivo “_app.js”. Nele você deve colocar sua importação de CSS, seja Bootstrap, seja um tema personalizado de alguma library escolhida.

https://nextjs.org/docs/basic-features/built-in-css-support

https://github.com/vercel/next.js/tree/canary/examples/basic-css

Nele também existirá a configuração padrão da Aplicação retornando o componente principal (que pode ser manipulado e personalizado) e as propriedades desta componente que importa todo conteúdo incluído na index ou qualquer outro componente da aplicação. Ele funciona como um componentes de todos os componentes incluídos na pasta “pages”. Isso também é muito bom porque você poderá “esconder” seus componentes encapsulados pelo Javascript.

O Estilo global é importado no _app.js

A pasta “.next”, assim como a pasta “.node_modules” não deve ser enviada para seu repositório e apenas por curiosidade ela possui a pasta de rotas do projeto “cuspida” pelo NextJS na compilação de sua aplicação digamos “dev” dentro do projeto. Em “public” que segue o mesmo conceito do ReactJS possui os ítens como imagens públicas como favicon, e logos.

O resto é como manda a canja de sempre. Pasta Styles, etc.

Você também pode usar o StyledComponents se desejar:
https://github.com/vercel/next.js/tree/canary/examples/with-styled-components

Ou também usar o TailwindCSS:
https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss

Uma informação importante é que quando você cria CSS modulares você precisa finalizar ele com “.module.css”. Por exemplo: “footer.module.css”

https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css

Os Módulos CSS  geram automaticamente nomes de classe exclusivos . Contanto que você use os Módulos CSS, você não precisa se preocupar com conflitos de nomes de classe.

Além disso, o recurso de divisão de código do Next.js também funciona em módulos CSS . Isso garante que a quantidade mínima de CSS seja carregada para cada página. Isso resulta em tamanhos de pacote menores.

Os módulos CSS são extraídos dos pacotes JavaScript no momento da construção e geram .cssarquivos que são carregados automaticamente pelo Next.js.

“_APP.JS”

Uma curiosidade sobre o “_app.js” é que você pode ativar a renderização dinâmica (eliminando a estática) usando o método “getInitialProps”. Então apenas a Otimização estática automática será desativada, porque se você estiver usando “getInitailProp”, significa que a página não é estática (requer dados adicionais do servidor para renderizar), então Next não pode gerar um arquivo html estático para isso. Então cuidado em suas decisões para que você não tenha uma aplicação React dentro do NextJS só ali firulando e perdendo o propósito principal do NextJS que é justamente gerar páginas estáticas no lado cliente, carregando absurdamente mais rápido que aplicações de base dinâmica. Neste caso aconselho usar mesmo um VueJS ou o ReactJS mesmo. Veja o exemplo abaixo, básico de implementação:

  MyApp.getInitialProps = async (appContext) => {
    	calls page's `getInitialProps` and fills `appProps.pageProps`
    const appProps = await App.getInitialProps(appContext);
  
    return { ...appProps }
  }

https://nextjs.org/docs/advanced-features/custom-app

NextJS 10 agora manipula imagens, se aproximando do Gatsby mas na minha opinião está melhor. Você joga uma imagem de alta resolução e principalmente se você estiver usando o ambiente da Vecel com sua aplicação ele trata a imagem deixando ela otimizada para qualquer dispositivo mostrando uma imagem para cada dispositivo reconhecido.

Um exemplo básico de implementação de imagem no NextJS 10 é o abaixo:

import Image from 'next/image'

function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src="/me.png"
        alt="Picture of the author"
        width={500}
        height={500}
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

export default Home

Um exemplo pode ser visto na documentação oficial:

https://nextjs.org/docs/basic-features/image-optimization

Não é meu objetivo aqui ficar explanando muito sobre o NextJS 10 mas mostrar uma implementação básica e colocar em produção real disponível com esteira de produção profissional mas vou deixar uns links mastigados da documentação mostrando várias vantagens e novas implementações do NextJS. Neste link tem tudo que vc precisa pra aprender rapidinho…

https://nextjs.org/docs/getting-started

https://nextjs.org/docs/api-reference/cli

Você também poderá pegar um tutorial oficial pra aprender na prática. Eu mesmo fiz e é top demais.

https://nextjs.org/learn/basics/create-nextjs-app

CONTINUANDO NOSSA IMPLEMENTAÇÃO…

Mas vamos voltar a nossa festa. Pega essa aplicação que criou em NextJS e faz o push (espero que hoje não seja sexta, 18 da tarde…). Não esqueça de dar push no branch principal “main”.

Com esta aplicação criada e push feito, vamos seguir para o próximo passo que é criar uma conta no site da Vercel.

https://vercel.com/signup

Eu aconselho você fazer o login usando sua conta do github porque facilita demais. Não se preocupe que não vai ter de pagar nada que é “Fair Use”.

Depois de se logar ele vai te pedir pra escolher o formato de criação do projeto, escolha o github. O Quadro do lado esquerdo:

No quadro seguinte você deve copiar a URL do seu repositório lá na barra de URL do browser (ou no clone) e colar no campo:

Depois confirma sua conta (pessoal ou outra, dependendo de quantas contas tem) e esta escolha vai se repetir no quadro seguinte, é pessoal então nem vou mostra nada.

No quadro seguinte você deve escolher a permissão e escolher no outro quadro se você vai liberar acesso para todos os repositórios ou só pro desse nosso post. Eu aconselho escolher a segunda opção até mesmo por ser mais seguro. “Only select repositories”. Ali você escolher o repositório que criamos.

Agora é só mandar instalar …Ele vai mostrar o quadro onde ele informará que reconheceu uma aplicação NextJS. Daí manda vê clicando no Deploy.

Agora vem o mais bacana. Não vai zapear agora porque ele vai te mostrar o deploy de sua aplicação no repositório em tempo real. E vai ser muito rápido, isso é, sua aplicação já está fazendo deploy pra produção.

Uma vez finalizada (viu. Nem deu tempo de zapear…). Vc vai receber a página de congratulação que tudo deu certo.

Quando nesta página você vai reparar que ele te mostra dois botões. Um pra visitar a página online (Site mesmo) da sua aplicação disponível e otimizada pra qualquer lugar do mundo e também o Dashboard da sua aplicação. Cara, o que dizer tá tudo pronto!

Uma coisa muito massa é que se vc criar outro branch como por exemplo, branch “dev”. Ele também fará o mesmo processo para ele. Você não passará por problemas de indispobilidade pois se você subir branchs novos ele não vai tirar nada do ar pra subsituir. Só quando terminar a o novo estiver 100% é que ele vai trocar, de forma invisível. Os outros branchs terão outros endereços assim você poderá tratar sua aplicação de forma individualizada por feature.

Você ainda pode pensar que essa solução mesmo sendo de graça não vai te entregar performance mas vai. Eles fizeram testes à rodo na solução deles com milhares de cargas por muito tempo e ele aguentou sem botar a língua pra fora. Pode acreditar que vai ficar top.

Eu vou deixar aqui um vídeo do Youtube do amigo Felipe Deschamps que faz um processo semelhante que também é o mesmo processo da documentação oficial do NextJS. Caso você seja meio preguiçoso de ler mas amigo, deixa essa preguiça de lado e vai lá na documentação oficial. Nada é melhor que a documentação oficial das soluções. Principalmente neste caso que foi feita de um jeito tão divertido pelo time do NextJS.

Boa diversão…Provavelmente Feliz ano Novo porque não vou ter tempo de fazer outro post nesse Ano ainda. Fui!

Padrão