Nesse artigo, falarei um pouco sobre o Next.js e o Typescript, a dupla que estou utilizando em meus novos projetos.
Indice
- Introdução
- Next.js
- Aprenda mais sobre o Next
- Typescript
- Aprenda mais sobre o Typescript
- Criando e configurando a aplicação
- Criando um projeto Next.js
- Organizando e limpando a estrutura
- Finalizando
Introdução
Nesse artigo, falarei um pouco sobre o Next.js e o Typescript, a dupla que estou utilizando em meus novos projetos.
Começarei contextualizando sobre as tecnologias citadas e recomentando conteúdos nos quais você poderá se aprofundar. Recomendo que posteriormente você revise o artigo, acessando os materiais recomendados.
Por fim, vamos criar e configurar um projeto com o Next.js e o Typescript.
Next.js
O React é uma biblioteca Javascript para construção de interfaces, e não apenas para ambientes web. É possível utilizar o React em aplicações mobile com o React Native, desktop com ElectronJS, e até mesmo em aplicações de Realidade Virtual com o React VR.
O Next é considerado um framework pois adiciona várias funcionalidades em cima do React e algumas delas são:
- SSR (Server Side Rendering): Torna a aplicação mais performática para o usuário final e resolve o que pode ser um problema em algumas aplicações, que é a indexação do conteúdo da aplicação por motores de busca, como o Google.
-
SSG (Static Site Generation): Uma das features mais legais do Next, ele consegue gerar paginas dinâmicas de maneira estática.
Quando estamos usando SSR, sempre que acessamos uma página, ela é gerada novamente pelo servidor, então, mesmo que você tenha uma página que mude uma vez por dia, ainda que seja acessada 1.000 vezes, será renderizada 1.000 vezes pelo servidor. Ou, ainda, se ela acessa o banco de dados, irá acessar 1.000 vezes também.
Com o SSG, podemos configurar o Next para gerar uma página estática e revalidá-la em um intervalo de tempo. Dessa forma, configuramos a nossa página, que muda uma vez por dia, para ser recriada em um intervalo de 24h. Assim, mesmo que ela tenha 10.000 acessos, só será criada uma vez e só fará uma chamada ao banco de dados. Isso é uma funcionalidade incrível.
Para ter mais informações sobre essa feature, deixarei um link de um vídeo da Rockeseat, em que o Diego explora mais essa funcionalidade.
Essa feature fez o Next.js ser o framework mais popular | Code/Drops #59
SPA (Single Page Application): Mesmo com essas features de Backend que vimos até agora, nós não perdemos uma das funcionalidades mais importantes que surgiram com essa onda mais atual de se criar aplicações web.
File System Routing: Em uma aplicação tradicional com React precisamos de uma biblioteca como a react-router-dom para fazer o roteamento das páginas. Por outro lado, o Next, por padrão, cria um roteamento baseado em sistema de arquivos, em que cada arquivo que está dentro da pasta pages automaticamente vira uma rota da aplicação.
Otimização de imagens: O Next tem um componente interno que podemos utilizar para importar imagens de maneira otimizada, com isso podemos obter as imagens com diversos tamanhos e qualidades, prevenindo a importação de imagens pesadas desnecessariamente.
Essas são só algumas das funcionalidades que o Next traz e há um mundo delas para explorar, como Suporte à Internacionalização, Configurações otimizadas, Suporte embutido para CSS e SASS, Envio de arquivo estático, entre outras.
Aprenda mais sobre o Next
No site da Vercel, empresa por trás do Next, temos disponível uma documentação incrível e também um guia com um passo a passo para aprender sobre o framework.
No canal Código Fonte TV, há um vídeo falando sobre o Next.js:
O conteúdo mais legal que eu já vi na internet sobre o Next é uma playlist que o Filipe Deschamps criou no canal dele, você precisa assistir depois que acabar de ler esse post:
E pra quem gosta de ler, tem dois artigos bem interessantes que eu achei enquanto estudava mais para escrever o meu artigo:
Também vou deixar aqui alguns canais que tem conteúdos sobre Next.js, você nunca pode ter uma única fonte de estudos, ainda mais se tratando de programação:
Por fim, não deixe de se inscrever no meu canal. Em breve irei trazer muito conteúdo sobre Next.js e outros tópicos.
Typescript
O Typescript é um conjunto de funcionalidades adicionadas ao Javascript e a principal é trazer a tipagem estática para a linguagem.
O JS é uma linguagem de tipagem fraca, e isso é muito legal, pois te dá muita liberdade para sair programando e traz facilidade para quem está começando a programar. Porém o JS acaba dando liberdade até demais e isso possibilita a criação de erros enquanto programamos, justamente pela tipagem fraca.
Obs: é importante que você saiba JS antes de aprender TS, pois este não é um substituto e sim um complemento.
Quando vi o Typescript pela primeira vez, não gostei nem um pouco dele, eu pensei: como assim ele vai estragar uma das coisas mais legais do JS que é a tipagem fraca. Mas... não é bem por aí.
Quando comprei o Bootcamp da Rocketseat, fui obrigado a estudar Typescript, pois ele estava presente em basicamente todos os módulos. Depois de alguns dias utilizando-o nos estudos, voltei a usar JS nos projetos que estava trabalhando, e então tive um choque de realidade. Foi aí que comecei a perceber na prática como o TS facilitava muito mais a minha vida e, apesar da pequena curva de aprendizado no início, comecei a sentir falta das tipagens sempre que voltava pro JS, principalmente a funcionalidade do autocomplete.
E é aí que entra os pontos mais legais do Typescript:
- Autocomplete: como estamos tipando as propriedades que nossos componentes recebem ou as nossas chamadas a APIs, ao acessar um objeto podemos simplesmente usar o CTRL+ESPAÇO para que o autocomplete do VS Code nos ajude a achar a propriedade que queremos. É por meio dele que podemos fazer uma checagem para garantir que não acessaremos um recurso que não existe, e isso é excelente.
-
Tipagem nas Bibliotecas: em diversos momentos, importamos bibliotecas e nem sempre o autocomplete funciona bem. Usando o Next, por exemplo, em alguns momentos você vai usar uma função padrão que tem métodos ou propriedades pré-definidas.
Nesses casos, podemos importar um conjunto de tipagens de dentro da biblioteca, e ela já vai fornecer todos os métodos e propriedades que aquela função ou objeto tem, o que vai facilitar muito a nossa vida.
Evitar erros de digitação: erro de digitação é algo que é extremamente comum entre os programadores iniciantes, acontecendo até mesmo com programadores mais experientes. O TS vai checar as suas variáveis durante o desenvolvimento, vai identificar todos os possíveis erros e te sinalizar sempre que possível.
Componentes mais consistentes: isso é uma das coisas mais legais. Como podemos tipar as propriedades que um componente vai receber, podemos dizer se elas serão obrigatórias ou não, garantindo que você nunca vai passar uma propriedade errada para dentro de um componente, nem mesmo vai conseguir renderizá-lo com uma propriedade obrigatória faltando.
Resumindo, minha experiência com o TS tem sido incrível. Recentemente tive que fazer modificações em um projeto em javascript de uma cliente e, como fazia um tempo que não tinha contato com ele, tive que primeiro me encontrar no projeto. Com o TS seria bem mais simples de identificar as informações, comportamentos e fazer as alterações necessárias.
Aprenda mais sobre o Typescript
Diferente do que eu imaginava, você não precisa tipar tudo sempre com o TS, ele tenta tipar boa parte das variáveis e retornos de funções. Você consegue deixar muita coisa sem tipar, embora isso não seja o ideal, mas isso ajuda muito nos primeiros projetos, pois você pode ir aprendendo a tipar as coisas aos poucos, que é justamente um dos temas abordados nesse podcast que vou deixar a seguir:
Separei um post para você ler sobre typescript. Não deixe de pesquisar por outros se tiver interesse:
E também alguns vídeos:
- TypeScript // Dicionário do Programador
- TypeScript - O que é e quais os seus benefícios? | Diego Fernandes
- TypeScript, o início, de forma prática | MasterClass #07
Pra fechar, separei dois cursos gratuitos de Typescript que estão no Youtube e você pode fazer de graça:
Criando e configurando a aplicação
Existe mais de uma maneira de criar uma aplicação com o Next.js, seguiremos com a recomendada pela Vercel na documentação do Next.
Criando um projeto Next.js
Assim como no CRA, temos um pacote que gera uma aplicação Next configurada para começarmos a programar.
Com o Terminal aberto vamos executar o seguinte comando:
yarn create next-app app-name --typescript
# Caso esteja usando o npm:
npx create-next-app app-name --typescript
Esse comando vai criar uma aplicação com typescript pronta para sairmos programando. Assim que finalizar a criação do projeto, abra ele no seu editor, eu estou usando o vscode.
No terminal, podemos executar o comando yarn dev ou npm run dev para executar um servidor local de desenvolvimento. Depois de executá-lo, ele vai imprimir no console que o projeto esta disponível no localhost:3000. Podemos clicar no link segurando a tecla CTRL ou digitar esse caminho na barra de endereços do navegador.
Organizando e limpando a estrutura
A primeira coisa que eu faço sempre que inicio um projeto é limpar a estrutura dele.
Vamos começar apagando:
- O README.md, que está na raiz do projeto.
- Os arquivos que estão dentro da pasta styles.
- A pasta api que esta dentro da pasta pages.
- Vamos apagar também o arquivo vercel.svg de dentro da pasta public e em outro momento iremos substituir o arquivo favicon.ico
Agora criaremos uma pasta src na raiz do projeto e movemos para dentro dela a pasta pages e styles que está na raiz do projeto.
Obs: a pasta pages é rastreada automaticamente pelo Next e os dois únicos lugares que ela pode estar são a raiz ou dentro de src.
Em seguida, precisamos apagar as referências aos arquivos que deletamos.
- Dentro de src/pages/_app.tsx apagaremos a importação do CSS.
- Dentro de src/pages/index.tsx, apagaremos todas as importações e iremos retornar da função Home apenas um
<h1>Hello World</h1>
Como fizemos muitas alterações nos arquivos, vamos reiniciar o servidor que está rodando. Para isso, é só usar o atalho CTRL+C para parar de executá-lo e depois iniciá-lo novamente.
Ao acessar a página no endereço localhost:3000, você deve estar vendo o Hello World que colocamos no arquivo index.
Finalizando
E isso é tudo, pessoal! Muito obrigado por ter me acompanhado até aqui. Não deixe de conferir os links que eu deixei ao longo do artigo, tem muita coisa legal para se consumir.
Espero que esse artigo tenha somado para você de alguma forma. Você pode entrar em contato comigo para me passar um feedback ou trocar uma ideia pelo Linkedin ou Instagram.
E não deixe de me seguir lá no GitHub, sempre estou trabalhando em alguma coisa, você verá meu perfil sem repositórios, mas isso tem um motivo e em breve criarei um post para explicar melhor isso.
Top comments (0)