Sempre que vou iniciar um novo projeto usando Next.js a primeira coisa que vem na cabeça é: como eu mantenho as coisas organizadas em um padrão de Developer Experience semelhante ao que o time do Next já criou?
É realmente impressionante a forma como é simples, fácil de entender e prático. Toda nova atualização mais facilidades são adicionadas ao framework e ele fica cada vez mais maravilhoso (ok, sou fã, como descobriu?).
Aqui na Trybe, começamos recentemente o trabalho de migração do site institucional para Next.js, e tivemos que pesquisar um bocado para entender a melhor forma de organizar as pastas do projeto. Não existe uma unanimidade, algumas pessoas gostam de usar um padrão semelhante ao que usam em projetos em React, outras criam seus próprios padrões. Que foi o nosso caso.
Decidimos primeiro entender qual seria a estrutura de um site, para depois pensarmos na estrutura das pastas, sempre tentando entender o que seria mais fácil de compreender somente olhando para o projeto... e ficou assim:
- site-trybe
> __tests__
index.test.tsx
primeiros-passos.test.tsx
> components
> _ui
> Button
Button.tsx
Button.module.scss
Button.test.tsx
index.tsx
> Navbar
> home
> Hero
constants.ts
Hero.tsx
Hero.module.scss
Hero.test.tsx
index.tsx
> first-steps
> Video
> Form
> hooks
> pages
> primeiros-passos
confirmacao.tsx
index.tsx
_app.tsx
index.tsx
> public
> images
> fonts
> icons
> styles
theme.scss
global.scss
> utils
> constants
navigation.ts
Agora, vamos entender melhor o que temos em cada pasta.
Testes de snapshot para cada página
> __tests__
index.test.tsx
primeiros-passos.test.tsx
Para manter a consistência do site, e evitar, ou melhor, avisar, quando alterações sejam feitas em conteúdos ou ordem de componentes, decidimos criar testes simples para cada página do site, apenas para manter o snapshot.
Pasta de componentes separados por páginas
> components
> _ui
> Button
Button.tsx
Button.module.scss
Button.test.tsx
index.tsx
> Navbar
> home
> Hero
constants.ts
Hero.tsx
Hero.module.scss
Hero.test.tsx
index.tsx
> first-steps
> Video
> Form
A pasta _ui
é onde ficam todos os componentes em comum entre várias páginas do site, quase que como se fosse o nosso Design System.
Além disso, cada página do site possui uma pasta dentro da pasta de componentes. Dentro dessa pasta, então, são adicionados todos os componentes, com seus arquivos de estilo, constantes que são usadas apenas ali e seu arquivo de teste (caso seja necessário).
Dessa forma, podemos ter dois componentes <Hero />
, porém, eles estarão em suas pastas relacionadas a cada página/contexto. Nós também focamos em manter os textos e organização do layout em cada componente, dessa forma, uma página apenas importa os componentes que formam ela.
/* /pages/empresas-parceiras/index.tsx */
/* ... aqui vão todos os imports */
const ParnerCompanies: NextPage = () => (
<>
<Page
title="Contrate programadores e desenvolvedores pela Trybe"
description="Empresas inovadoras contratam talentos de tecnologia na Trybe. E o melhor: elas não pagam nada por isso. Contrate agora!"
>
<Hero />
<CompleteTraining />
<WhyHireTrybers />
<WhatCompaniesSays />
<OurTraining />
<WorldOfPossibility />
<Benefits />
<HowItWorks />
<NoCosts />
</Page>
</>
);
export default ParnerCompanies;
Outras pastas complementares
> hooks
> public
> images
> fonts
> icons
> styles
> utils
> constants
Fora a pasta pages
que é padrão dos projetos Next.js, também criamos pastas para deixar organizados os estilos, os hooks e os utils, como as constantes globais do projeto.
Também separamos a pasta public
em outras três: images, fonts e icons.
Organização é tudo para uma pessoa desenvolvedora feliz
Sim, meu amigo e minha amiga. Ter um projeto organizado é o que nos dá vontade de trabalhar todo dia.
Acredito que este artigo pode ajudar você, que estava perdido em qual arquitetura utilizar na hora de deixar o seu projeto Next.js mais arrumadinho.
Top comments (1)
Muito massa! Como definiram o domain da aplicacao? Chamadas a API e entidades?