Um guia sobre estruturação de pastas para projetos em Next.js

Gabriel Nunes — Fri, 01 Apr 2022 18:23:11 +0000

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.

DEV Community: Gabriel Nunes

Um guia sobre estruturação de pastas para projetos em Next.js

Testes de snapshot para cada página

Pasta de componentes separados por páginas

Outras pastas complementares

Organização é tudo para uma pessoa desenvolvedora feliz