Skip to content

Relatório de Avaliação do Framework Next.js

Introdução

Este relatório visa apresentar uma avaliação do framework Next.js, com o objetivo de identificar seus pontos fortes e fracos para o desenvolvimento de aplicações web, especialmente em projetos com requisitos de alto desempenho, otimização para SEO e necessidades de renderização do lado do servidor (SSR) ou geração de páginas estáticas (SSG). Ao final, são fornecidas recomendações para melhorar a experiência do desenvolvedor no uso desse framework, além de sugestões de configuração do ambiente de desenvolvimento.

1 Pontos Fortes do Next.js

1.1 Suporte a SSR (Server-Side Rendering) e SSG (Static Site Generation)

  • O Next.js oferece suporte nativo a SSR e SSG, permitindo que os desenvolvedores escolham a estratégia de renderização mais adequada para cada página. Essa flexibilidade é ideal para aplicações que precisam equilibrar SEO, desempenho e interatividade.

1.2 Roteamento Automático

  • O sistema de roteamento baseado em arquivos do Next.js simplifica a criação de rotas, eliminando a necessidade de configurações adicionais. Ao organizar os arquivos de forma intuitiva na pasta pages, as rotas são automaticamente criadas, facilitando o desenvolvimento.

1.3 Hot Reloading e Fast Refresh

  • O Next.js oferece suporte a hot reloading e fast refresh, proporcionando uma experiência de desenvolvimento mais ágil e interativa. Essas funcionalidades permitem que as alterações de código sejam aplicadas quase instantaneamente no navegador, reduzindo o tempo de espera durante o desenvolvimento.

2 Pontos Fracos do Next.js

2.1 Complexidade de Configurações Avançadas

  • Embora o Next.js facilite a configuração básica, configurações avançadas, como otimizações de build, customizações de webpack e integrações complexas com bibliotecas de terceiros, podem se tornar complicadas, especialmente para desenvolvedores menos experientes.

2.2 Limitações em SSR e SSG para Grandes Escalas

  • Para projetos em larga escala que requerem a geração de milhares de páginas estáticas, o SSG pode se tornar lento, afetando o tempo de build. Nesses casos, estratégias como ISR (Incremental Static Regeneration) são recomendadas, mas podem adicionar complexidade ao projeto.

2.3 Carregamento de CSS e Otimização de Imagens Limitada

  • Embora o Next.js suporte CSS e imagens otimizadas, a customização desses recursos pode ser limitada. O carregamento de CSS é baseado em CSS Modules e Styled JSX, o que pode exigir adaptações para desenvolvedores acostumados a outras bibliotecas de estilização (ex: Styled Components ou Tailwind CSS).

3 Passos Sugeridos para Configuração do Ambiente de Desenvolvimento

3.1 Clonar o Repositório

3.1.1 Clone o Repositório do Projeto:

'''bash git clone https://github.com/unb-mds/2024-2-Squad11.git cd nome-do-repositorio '''

3.1.2 Instale as Dependências:

Instale as dependências do projeto utilizando yarn ou npm, conforme o gerenciador de pacotes padrão do projeto:

'''bash yarn install npm install '''

3.2 Criação de Branches e Fluxo de Trabalho com Git

Para organizar o trabalho em equipe, é importante estabelecer um fluxo de Git claro.

3.2.1 Criar uma Branch para Cada Tarefa

Crie uma nova branch para cada funcionalidade ou correção em que estiver trabalhando.

'''bash git checkout -b feature/nome-da-funcionalidade '''

3.2.2 Comitar Mudanças Regularmente

Realize commits frequentes e descritivos para facilitar o rastreamento das alterações.

'''bash git commit -m "Adiciona componente de navbar com navegação básica" '''

3.2.3 Enviar as Alterações para o Repositório Remoto:

Quando finalizar a tarefa, envie as alterações para o repositório remoto:

'''bash git push origin feature/nome-da-funcionalidade '''

3.2.4 Abrir um Pull Request (PR):

No GitHub (ou na plataforma de Git utilizada), abra um Pull Request da sua branch para a branch principal (geralmente main ou develop). Inclua uma descrição detalhada do que foi alterado.

3.2.5 Revisão de Código e Aprovação:

Espere pela revisão dos colegas antes de fazer o merge. Isso ajuda a manter a qualidade do código e identificar potenciais problemas antes de integrar as alterações.

3.3 Configurar Linting e Formatação Automática

Para garantir a consistência do código entre todos os membros da equipe, configure ESLint e Prettier.

3.3.1 Instale as Dependências para Linting e Formatação:

'''bash yarn add eslint prettier eslint-plugin-react eslint-plugin-react-hooks eslint-config-prettier eslint-plugin-prettier --dev '''

3.3.2 Configuração do ESLint e Prettier:

Crie arquivos de configuração .eslintrc.json e .prettierrc ou verifique se eles já estão no repositório. Esses arquivos garantirão que todos usem as mesmas regras de linting e formatação.

3.3.3 Adicionar Scripts no package.json:

'''bash "scripts": { "lint": "eslint . --fix", "format": "prettier --write ." } '''

3.4 Executar e Testar o Projeto Localmente

3.4.1 Rodar o Servidor de Desenvolvimento:

Inicie o servidor de desenvolvimento para testar a aplicação localmente:

'''bash yarn dev '''

3.4.2 Acessar a Aplicação:

Acesse http://localhost:3000 para visualizar o projeto em execução.

4 Manutenção do Projeto e Boas Práticas

  1. Atualize as Dependências Regularmente: Execute yarn upgrade ou npm update periodicamente para manter as dependências atualizadas e evitar problemas de segurança.

  2. Revisão de Código: Revisão de codigos entre membros

  3. Documentação: Mantenha o README.md atualizado com instruções de instalação e configuração.

5 Scripts Úteis

Adicione scripts no package.json para facilitar as tarefas do dia a dia:

'''bash "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint . --fix", "format": "prettier --write .", "analyze": "ANALYZE=true yarn build" } '''

Conclusão

O Next.js é uma escolha estratégica para o projeto, pois combina performance, facilidade de uso e escalabilidade. Com suporte a renderização híbrida (SSR e SSG), otimizações de SEO e ferramentas de automação (como ESLint e Prettier), ele facilita o desenvolvimento colaborativo e mantém a qualidade do código. A experiência ágil proporcionada por recursos como hot reloading e Fast Refresh permite à equipe iterar rapidamente, garantindo um projeto eficiente e de alto desempenho.