Semper 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?).

Trybe는 최근에 Next.js 사이트를 이전하는 작업을 시작했으며 파스타가 프로젝트를 수행하는 것처럼 조직에서 멜호르 형식을 입력하도록 했습니다. 존재하지 않는 존재는 없으며, React의 프로젝트를 사용하는 데 사용하는 모든 것이 실패할 수 있습니다. Que foi o nosso caso.

Decidimos primeiro entender qual seria a estrutura de um site, para depois pensarmos na estrutura das 파스타, semper 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 파스타.

Testes de snapshot para cada página

    > __tests__
        index.test.tsx
        primeiros-passos.test.tsx

Para manter a constê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.

페이지별로 분리된 파스타

    > 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

파스타_ui 모든 구성 요소는 사이트에서 다양한 페이지로 이동할 수 있으며 디자인 시스템의 모든 것에서 벗어날 수 있습니다.

Além disso, cada página do site possui uma 파스타 dentro da 파스타 드 구성 요소. Dentro dessa 파스타, 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 파스타 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 파스타 보완

    > hooks
    > public
        > images
        > fonts
        > icons
    > styles
    > utils
        > constants

포라 파스타 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 파스타 public em outras três: 이미지, 글꼴 및 아이콘.

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.