Como eu inicio um projeto com NextJS, TypeScript e TailwindCSS!

Olá, hoje pretendo mostrar como eu inicio meus projetos utilizando NextJS, TypeScript e TailwindCSS. Eu gosto bastante de utilizar essa stack para projetos pessoais simples e que quero desenvolver em um curto espaço de tempo. Lembrando que estou escrevendo aqui hoje como uma forma de fixar conhecimento além de compartilhar o que sei, não sou nenhum perito em programação, mas acredito que posso falar sobre isso.

Ambiente de Desenvolvimento

Eu estou utilizando yarn na versão 1.22.15 e o node versão 16.13.1, que no momento é a versão LTS.

Projeto

1. Iniciando o projeto

Primeiramente criei a aplicação next tradicional utilizando o yarn create e passei um parâmetro example para ele já iniciar com uma configuração do TailwindCSS.

Então o comando ficou assim:

yarn create next-app my-project --example with-tailwindcss

OBS: Você pode achar todos os exemplos deles em um repositório da própria vercel aqui!

2. Reestruturando o projeto

Após iniciar, eu acesso a pasta criada, e mudo um pouco a estrutura inicial do projeto, motivo? Gosto de tentar manter uma lógica no diretório em que cada arquivo está presente.

Vamos lá então, vou abrir o projeto no vscode utilizando a linha de comando:

code my-project

OBS: Observe que como parâmetro eu passo o nome da pasta, que no nosso caso é o mesmo do projeto.

A estrutura inicial vem mais mais ou menos assim:

Vamos entender a função de cada pasta e cada arquivo.

public - É a pasta onde vão ficar todos nossos arquivos públicos, por exemplo, logos, favicons, assets, etc... Ou seja, arquivos estáticos.

pages - É onde vão ficar nossas páginas, onde nossa aplicação ganha vida e fica pronta para o usuário.

styles - Aqui ficam os estilos presente em nossa aplicação, geralmente eu ainda crio subpastas dentro dela para deixar ainda mais organizado.

postcss.config.js - É a configuração do compilador de tailwindcss, onde definimos algumas configurações sobre como ele vai funcionar.

tailwindcss - São as configurações do tailwindcss em si, onde definos estilos, cores, temas e tudo relacionado ao funcionado do mesmo.

Comecei removendo tudo que tem dentro de /public e a pasta /pages/api pois não utilizo serverless de começo.

Em seguida crio uma pasta chamada src na raiz do projeto, e movo a pasta pages e styles para dentro dela, o resultado fica assim:

Para finalizar, temos que alterar uma configuração do tailwindcss, onde dizemos onde e quais os arquivos que vão ser compilados.

No arquivo tailwind.config.js devemos alterar o content. Ele vai ficar assim:

module.exports = {
  content: [
    './src/pages/**/*.tsx',
    './src/components/**/*.tsx',
  ],
  ...
}

OBS: Lembrando que como vamos adicionar typescript ainda, eu já deixei a extensão dos arquivos como tsx.

3 Adicionar TypeScript

Acredito que essa seja a parte mais fácil, pois o next já tem uma documentação para isso, que você pode acessar aqui.

Ele fala o passo a passo a seguir, porém eu faço de uma forma um pouco diferente, eu apenas adiciono as dependências recomendadas e rodo o projeto, com isso ele cria o arquivo tsconfig.json com todas as configurações iniciais.

yarn add --dev typescript @types/react @types/node

Para finalizar esta etapa, temos que renomear as extensões de todos os arquivos de .js para .tsx.

Com isto, temos o seguinte resultado:

Agradecimentos

Este foi meu primeiro post, então, perdão se em algum momento eu desviei da minha proposta inicial, se minha escrita não foi tão legal ou se eu errei em algum ponto. Mas meu objetivo com ele é tentar fixar meus conhecimentos além de compartilhar eles com a comunidade, que foi como eu aprendi e agradeço a todos que tiverem um feedback.

Um abraço a todos e até a próxima!