Como otimizamos o Canal com NextJS

PingTech - #1 | Nova versão do canal 🏴‍☠️
Escrito por Jéssica Martins e Pedro Ladeira.

Estamos empolgados em apresentar a nova versão do canal da Pingback.🖤

Com o objetivo de aprimorar continuamente a experiência do usuário, realizamos uma transformação completa, não apenas no visual, mas também toda a estrutura de código por trás da plataforma.

Vamos entender um pouco melhor como essa reestruturação aconteceu?

O novo canal

Exemplo do novo layout.

O canal é onde reunimos todos os conteúdos feitos pelo creator.

Nele, você encontrará uma interface otimizada que permite acessar com facilidade e rapidez os artigos ou séries.

Com a nova organização e categorização aprimorada, você poderá explorar os conteúdos de forma rápida e buscá-los com mais facilidade.

O antigo sistema

O layout anterior não era intuitivo e fluido como gastaríamos e isso torna a experiencia de navegação e localização dos conteúdo difícil para nossos usuários.

Além das limitações de design, reconhecemos a importância de reorganizar o código para otimizar o desempenho geral da plataforma.

Investimos bastante tempo e esforços na reestruturação do código para garantir que cada elemento da página funcionasse de maneira eficiente.

No antigo canal, usávamos React para a renderização e enfrentamos desafios significativos ao lidar com o Server-Side Rendering (SSR).

👉 Vale ressaltar que quando a Pingback começou, o NextJS já havia sido lançado e achávamos que conseguiríamos fazer tudo internamente. Assim, fizemos toda estrutura de SSR por conta própria.

Hoje, reconhecemos que não foi a melhor escolha e era sofrido para fazer manutenção.

Reconhecendo a necessidade de uma abordagem diferente, tomamos a decisão estratégica de adotar o NextJS.

Essa transição permitiria a implementação simplificada do SSR e a melhora da experiência do usuário, resultando em tempos de carregamento mais rápidos e uma interação mais suave com o conteúdo.

Planejamento da refatoração

Ao mesmo tempo que a ideia de fazer um projeto do zero pode ser algo tentador, é também desafiador.

Com o projeto antigo, já tínhamos uma estrutura rodando e funcionalidades para nossos clientes. Refazer um projeto inclui manter e melhorar as funcionalidades básicas já existentes.

Antes de iniciarmos, determinamos quais funcionalidades seriam descontinuadas devido à falta de uso, quais seriam incluídas em implementações futuras devido a restrições de tempo, e quais estariam presentes na entrega inicial.

👉 Com isso definido, o básico seria: página inicial do canal, página de listagem de artigos, página de listagem de séries, página de um artigo, fluxo de inscrição e pagamentos, domínio customizado, sitemap e temas.

E o que deixamos para uma futura implementação:

• Página exclusiva de inscrição;
• Comentários em artigos;
• Loja, também conhecida como Links de Pagamentos;
• Sistema de reações de um artigo.

Execução do projeto

Tirando o Máquina de Conteúdo, que foi um projeto fora do ecossistema Pingback, o Novo Canal seria o primeiro projeto em NextJS feito aqui dentro.

Para nós, do time de produto, que já trabalhávamos com React, migrar para o NextJS não seria algo de outro mundo.

Existe sim uma curva de aprendizado do time, mas ela é rápida.

A estrutura do projeto foi básica e seguimos todas as recomendações que estão na própria documentação:

Cada canal está em um subdomínio da Pingback, por exemplo: pingback.com/pedro | pingback.com/matt

Sendo assim, foi preciso utilizar o conceito de Dynamic Routes do NextJS, para que cada slug fosse um canal diferente.

Além disso, cada artigo também está em outro path e precisava ser algo dinâmico, como:

• https://pingback.com/pedro/design-systems-um-guia-completo-dos-fundamentos
• https://pingback.com/matt/a-pingback-acabou

Resumidamente, um canal possui a seguinte estrutura de rotas dinâmicas:

Abordaremos em um texto futuro, mas o grande desafio foi estabelecer uma estrutura de domínio personalizada para nossos clientes.

Para contextualizar, ao mesmo tempo que a Pingback oferece um domínio para o criador de conteúdo, como pingback.com/pedro, ele pode ter o mesmo layout em um domínio personalizado.

Resultados

Desde o lançamento, só tivemos feedbacks positivos do novo layout e da rapidez com que as coisas estão acontecendo.

✍️ Ficamos felizes com isso e estaremos sempre buscando melhorar e fazer correções.

Podemos dizer que atingimos o objetivo inicial de ter um layout intuitivo, com velocidade e fluidez.

Agradecimentos

Por fim, essa entrega foi feita em time e é de suma importância ressaltar todas as pessoas de produto que estavam diretamente trabalhando nesse projeto:

• Rachel Andrade
• Tainá Silva
• Jéssica Martins
• Daniel Bastos
• Pedro Ladeira
• Matheus Montenegro

Além disso, fica um agradecimento para toda a equipe da Pingback que nos ajudou a testar e fazer uma boa entrega

Obs.: Esse aqui é o primeiro canal em Dark Mode da Pingback . Fica aqui o spoiler do que está por vir.

Até a próxima!

Equipe Pingtech. 🏴‍☠️ 🏓