Kdykoli začnu nový projekt pomocí Next.js, první věc, která mě napadne, je:jak udržím věci uspořádané podle vzoru Developer Experience podobnému tomu, co již vytvořil tým Next?

Je opravdu působivé, jak je to jednoduché, snadno pochopitelné a praktické. S každou novou aktualizací se do rámce přidávají další zařízení a je stále úžasnější (ok, jsem fanoušek, jak jsi to zjistil?).

Zde v Trybe jsme nedávno zahájili práci na migraci institucionálního webu na Next.js a museli jsme hodně zkoumat, abychom pochopili nejlepší způsob, jak organizovat složky projektu. Nepanuje zde jednota, někteří lidé rádi používají vzor podobný tomu, který používají v projektech React, jiní si vytvářejí vlastní vzory. Což byl náš případ.

Nejprve jsme se rozhodli pochopit, jaká bude struktura webu, a pak jsme přemýšleli o struktuře složek, vždy jsme se snažili pochopit, co by bylo snazší pochopit pouhým pohledem na projekt... a skončilo to takto:

- 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

Pojďme nyní lépe pochopit, co máme v každé složce.

Testy snímků pro každou stránku

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

Abychom zachovali konzistenci webu a abychom se vyhnuli, nebo spíše varovali, při změnách obsahu nebo pořadí komponent, rozhodli jsme se vytvořit jednoduché testy pro každou stránku webu, abychom zachovali snímek.

Složka komponent oddělená stránkami

    > 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

Složka _ui je to místo, kde jsou umístěny všechny společné součásti mezi různými stránkami webu, téměř jako by to byl náš návrhářský systém.

Každá stránka na webu má navíc složku uvnitř složky komponent. Do této složky jsou pak přidány všechny komponenty s jejich soubory stylů, konstantami, které se používají pouze tam, a jejich testovacím souborem (pokud je to nutné).

Tímto způsobem můžeme mít dvě komponenty <Hero /> , budou však ve vašich složkách souvisejících s každou stránkou/kontextem. Zaměřujeme se také na zachování uspořádání textů a rozložení v každé komponentě, takže stránka importuje pouze komponenty, které ji tvoří.

/* /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;

Další doprovodné složky

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

Mimo složku pages což je standardní pro projekty Next.js, vytvořili jsme také složky pro uspořádání stylů, háčků a utilit, jako jsou globální konstanty projektu.

Oddělíme také složku public v dalších třech:obrázky, písma a ikony.

Pro šťastného vývojáře je organizace vším

Ano, můj přítel a můj přítel. Mít organizovaný projekt je to, co nás nutí pracovat každý den.

Věřím, že tento článek vám může pomoci, kdo nevěděl, jakou architekturu použít, když děláte ve svém projektu Next.js větší pořádek.