Como Evitar Problemas ao Configurar um Ambiente Nextjs + Antd + Tailwind + Typescript: Pensamento Sistêmico para Programadores

Configurar um ambiente de desenvolvimento pode ser um desafio, especialmente para programadores iniciantes. Muitas vezes, a solução não está apenas em seguir tutoriais ou documentações, mas em adotar uma abordagem de pensamento sistêmico. Vamos explorar os passos e considerações fundamentais para evitar problemas ao configurar um ambiente de desenvolvimento, por exemplo, onde se utilizam muitos recursos de pacotes e configurações; como no caso para subir um ambiente front-end simples  utilizando Next.js, Ant Design, TypeScript e TailwindCSS.

Compreender os Componentes da Stack

Antes de começar a instalação e configuração, é necessário que você entenda cada componente da stack que você pretende usar:

• Next.js: um framework React para aplicações web com renderização do lado do servidor e rotas automáticas.
• Ant Design (antd): um conjunto de componentes UI para React, que fornece uma experiência de design consistente.
• TypeScript: um superset de JavaScript que adiciona tipagem estática opcional.
• TailwindCSS: um framework CSS utilitário que permite a criação rápida de layouts personalizáveis.

Leitura e Entendimento da Documentação

Você não é digitador de códigos, é um programador. Remova o comportamento de querer ir direto para a codificação. Cada um desses componentes possui uma documentação robusta. Investir tempo na leitura da documentação oficial de cada um ajuda a entender suas filosofias, funcionalidades e requisitos e lhe economizará diversas horas:

• Next.js Documentation: entenda os conceitos básicos, como rotas, renderização do lado do servidor e configuração.
  • Next.js Documentation
• Ant Design Documentation: aprenda sobre os componentes disponíveis, personalização de temas e integração. Tem uma infinidade de tipos de componentes que podem ser utilizados desta biblioteca que serão muito úteis para você não ficar reinventando a roda.
  • Ant Design Documentation
• TypeScript Documentation: familiarize-se com a sintaxe, configurações e benefícios da tipagem estática. É o TypeScript que vai lhe obrigar a escrever os seus códigos mais semânticos e tolerantes a falha desde a suas primeiras linhas.
  • TypeScript Documentationa
• TailwindCSS Documentation: explore como utilizar classes utilitárias para estilizar seus componentes. Se seu foco é componentização, você vai ganhar muita velocidade na estilizaçãao das suas telas com recursos muito bem definidos e lhe poupando de escritas enorme de estilos CSS.
  • TailwindCSS Documentation

Entendo que a pressa para codificar e ver resultados rápidos é tentadora, mas, antes, consulte a documentação oficial de cada ferramenta que você utilizará. Veja o que cada uma tem que vai agregar na solução que você está desenvolvendo no momento. Por mais que você não vá utilizar tudo agora, mas vai ficar resquícios de informações na sua memória, onde será super útil quando você for desenvolver coisas novas. Não fazer isso pode levar a muitos problemas que poderiam ser evitados com uma leitura cuidadosa.

Compatibilidade de Versões

Verificar a compatibilidade das versões dos pacotes que serão utilizados é parada obrigatória. Muitos dos problemas que você encontrará, está relacionado a Incompatibilidades, que podem causar erros inesperados. Perguntas a considerar e planejar para começar as instalações:

• Qual a versão do Next.js instalada?
• Qual a versão do TypeScript? É compatível com a versão do Next.js?
• A versão do Ant Design é compatível com o Next.js e TypeScript?
• A versão do TailwindCSS é compatível com os demais componentes?

Ferramentas de Build e Transpilação

Tudo o que será gerado nos seus códigos, por exemplo, utilizando jsx e typescript, serão de alguma forma buildados e transpilados.

Imagine que você escreve uma frase em inglês moderno cheia de gírias. O transpilador é como um amigo que reescreve essa frase de um jeito que todas as pessoas entendam, mesmo aquelas que não conhecem as gírias.

Um transpilador é uma ferramenta que pega o código-fonte escrito em uma linguagem de programação ou uma versão da linguagem e o converte para outra linguagem ou versão, mantendo a mesma funcionalidade. No contexto do desenvolvimento web, o transpilador mais comum é Babel.

Entender quais ferramentas de build e transpilação serão necessárias vai lhe poupar algumas horinhas do seu tempo:

• Transpiladores: se está utilizando ES6 ou ES6+, será necessário um transpilador como Babel.
• Build Tools: certifique-se de que as configurações do Next.js para build e desenvolvimento estão corretas.

Tenha em mente que, quando você escreve código moderno, o transpilador garante que ele funcione em qualquer navegador, novo ou velho também.

Gerenciador de Dependências

Escolha um gerenciador de dependências (os mais conhecidos são npm e yarn) e verifique a compatibilidade das versões dos pacotes com o gerenciador escolhido. Assegure-se de que as versões das dependências sejam consistentes em todo o projeto.

Configurações e Arquivos de Configuração

Os arquivos de configuração (como next.config.js, tsconfig.json, tailwind.config.js) são o que vão gerar a integração dos componentes. Alguns funcionam como adaptadores para que as bibliotecas possam trabalhar juntas em harmonia. Verifique se:

• As configurações do Next.js estão corretamente definidas para suportar Ant Design e TailwindCSS.
• O tsconfig.json está configurado para suportar o ambiente de desenvolvimento desejado.
• O tailwind.config.js está configurado para personalizações necessárias.

Instalação de Tipos

Quando se trabalha com TypeScript, uma das grandes vantagens é a verificação de tipos estática, que ajuda a evitar erros comuns em tempo de desenvolvimento. No entanto, muitas bibliotecas e pacotes populares do ecossistema JavaScript foram originalmente escritos em JavaScript puro, sem suporte a tipos. É aí que entram os pacotes @types

• Tipos do React (@types/react)
• Tipos do Next.js (@types/next)
• Tipos do Ant Design (@types/antd), se disponíveis.

Mensagens de Erro e Depuração

Aprenda a ler e entender mensagens de erro. Elas são uma fonte valiosa de informação para identificar onde está o problema. Familiarize-se com a base do JavaScript e dos frameworks para interpretar essas mensagens.

Normalmente você encontra muita coisa nas documentações oficiais ou nos repositórios, por exemplo do Github. Além disso, outros sites comuns como Stackoverflow serão seu amigo inseparável.

Pensamento Sistêmico

É aqui que a maioria dos programadores iniciantes pecam. Falta de habilidades com o pensamento sistêmico. Adotar um pensamento sistêmico significa considerar como cada parte do sistema interage com as outras. Para nosso exemplo, ao configurar um ambiente de desenvolvimento devemos:

1. Identificar os Componentes Principais: entenda o papel de cada componente na stack.
2. Analisar suas Interações: como os componentes interagem entre si através dos arquivos de configuração e dependências.
3. Verificar as Compatibilidades: certifique-se de que todas as versões e configurações são compatíveis.
4. Prepare-se para Problemas: pense em possíveis problemas antes de executar comandos. Questione cada etapa do processo.

Passos para Configurar um Projeto Next.js com TypeScript, Ant Design e TailwindCSS

0. Verificar Versões do Node e Gerenciadores de Dependências

Costumo incluir o passo zero. Antes de começar, verifique se as versões do Node.js e dos gerenciadores de dependências estão corretas. Execute os seguintes comandos no terminal:

node -v

# Saída esperada: v18.17.0

npm -v

# Saída esperada: 10.2.4

npx -v

# Saída esperada: 10.2.4

1. Criação do Projeto Next.js com TypeScript

Crie um novo projeto Next.js utilizando TypeScript:

npx create-next-app@latest nextjs-app --typescript

cd nextjs-app

Verifique se a versão do Next.js foi instalada corretamente:

npm list next

Saída esperada no console (pode variar conforme o SO):

nextjs-app@ /home/seu-user/nextjs-app

└─┬ next-with-less@3.0.1

  └── next@14.2.4

2. Instalação das Dependências

Instale as dependências necessárias para Ant Design, TailwindCSS, PostCSS, Autoprefixer, e Less:

npm install antd @ant-design/icons next-with-less tailwindcss postcss autoprefixer less less-loader

3. Configuração do TailwindCSS

Inicialize o TailwindCSS com PostCSS:

npx tailwindcss init -p

4. Configuração do `tailwind.config.js`

Edite o arquivo `tailwind.config.js` para incluir os diretórios de seu projeto:

/** @type {import('tailwindcss').Config} */

module.exports = {

  content: [

    './src/app/**/*.{js,ts,jsx,tsx}',  // Inclui todos os arquivos no diretório src/app

    './src/components/**/*.{js,ts,jsx,tsx}',  // Inclui todos os arquivos no diretório src/components

  ],

  theme: {

    extend: {},

  },

  plugins: [],

};

“`

5. Verifique o `postcss.config.js`

Verifique se o arquivo `postcss.config.js` foi gerado corretamente e está configurado para usar TailwindCSS e Autoprefixer:

module.exports = {

  plugins: {

    tailwindcss: {},

    autoprefixer: {},

  },

};

6. Configuração do `next.config.js`

Edite o arquivo `next.config.js` ou `next.config.mjs` para configurar o suporte a Less com Ant Design:

import withLess from "next-with-less";

/** @type {import('next').NextConfig} */

const nextConfig = withLess({

  lessLoaderOptions: {

    lessOptions: {

      modifyVars: {

        "@primary-color": "#1DA57A",

      },

      javascriptEnabled: true,

    },

  },

  reactStrictMode: true,

  swcMinify: true,

});

export default nextConfig;

7. Importação de Estilos no `layout.tsx`

Importe os estilos necessários no arquivo `layout.tsx` ou `_app.tsx` (Dependendo da versão do Nextjs):

import 'antd/dist/reset.css';

import '../styles/globals.css';

function MyApp({ Component, pageProps }) {

  return <Component {...pageProps} />;

}

export default MyApp;

Verifique se o arquivo `globals.css` contém as linhas do TailwindCSS:

@tailwind base;

@tailwind components;

@tailwind utilities;

8. Teste com um Componente Simples do Ant Design + TailwindCSS

Edite o arquivo `src/app/page.tsx` e adicione um componente simples utilizando Ant Design e TailwindCSS:

import { Button } from 'antd';

import { SmileOutlined } from '@ant-design/icons';

const Home = () => (

  <div className="min-h-screen flex items-center justify-center bg-gradient-to-r from-green-400 to-blue-500">

    <div className="bg-white p-10 rounded-xl shadow-xl text-center">

      <h1 className="text-4xl font-bold mb-4 text-gray-800">Welcome to Next.js with TailwindCSS and Ant Design</h1>

      <p className="text-lg mb-6 text-gray-600">A modern setup for your web projects</p>

      <Button type="primary" icon={<SmileOutlined />} size="large">

        Get Started

      </Button>

    </div>

  </div>

);

export default Home;

Finalmente, execute o projeto para ver o resultado utilizando npm ou yarn de acordo com o utilitário escolhido:

npm run dev

Saída do comando habilitará uma url http://localhost:3000 para você testar o projeto, ao acessar vai aparecer a seguinte informação no console e no browser (navegador) escolhido:

No browser:

Conclusão

Chegou a hora de sermos sinceros. Se você quer ser um desenvolvedor competente e respeitado, precisa parar com a mentalidade imediatista e preguiçosa. Configurar um ambiente de desenvolvimento não é apenas seguir tutoriais rápidos ou copiar e colar código sem entender o que está fazendo. É fundamental que você:

1. Leia a Documentação: parar de evitar a documentação oficial. É a fonte mais confiável e completa de informações. Ignorar a documentação só prolonga seus problemas e atrasa seu aprendizado.
2. Entenda o Que Está Fazendo: pare de procurar soluções rápidas e comece a entender a fundo cada ferramenta e tecnologia que está usando.
3. Pratique a Depuração: depurar código é uma habilidade fundamental. Aprenda a usar as ferramentas de depuração do seu navegador e editor de código. Interprete mensagens de erro e resolva os problemas com base nas informações fornecidas.
4. Seja Proativo: não espere que alguém resolva seus problemas. Pesquise, estude, faça perguntas nas comunidades certas, e documente suas descobertas. A preguiça intelectual não tem lugar na programação.
5. Comprometa-se com a Qualidade: não se contente com o mínimo. Esforce-se para escrever código limpo, eficiente e bem documentado. Seu futuro como desenvolvedor depende da qualidade do trabalho que você faz hoje.

Se você realmente quer se destacar, precisa abandonar a mentalidade de atalhos e se comprometer com um aprendizado profundo e contínuo. O caminho pode ser mais longo, mas os resultados valem a pena. Seu crescimento como desenvolvedor depende do esforço que você está disposto a investir agora. Então, levante-se, pegue a documentação, e comece a entender realmente o que está fazendo. Sem desculpas.

Confiança Sempre!!!