Como eu inicio um projeto com NextJS, TypeScript e TailwindCSS!
Tags: nextjs, javascript, react, typescript
Published: 2022-01-07 09:13:31

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:

```bash
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](https://github.com/vercel/next.js/tree/canary/examples)!*

### 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:

```bash
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:

![Estrutura inicial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hkbfxixrm1mwha6q681s.png)

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: 

![Nova estrutura](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ghrg63qn4fnuknomvue.png)

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:

```js
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](https://nextjs.org/docs/basic-features/typescript#existing-projects).

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.

```bash
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:

![Resultado final](https://res.cloudinary.com/practicaldev/image/fetch/s--bTn3MmmS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ew9wpvmnz8trn1n7jcj.png)

## 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!