Next.js – standardy projektowe

Zbiór wytycznych dla projektów realizowanych z wykorzystaniem biblioteki next.js

Narzędzia programistyczne

Do realizacji projektów opartych o next.js rekomendujemy wykorzystanie następujących narzędzi programistycznyach:

  • Visual studio code – jako edytor kodu (przydatne rozszerzenia: Beautify )
  • Sourcetree / Github Desktop / Github Console – narzędzie do zarządzania repozytorium
  • Buddy – narzędzie do zarządzania projektem dla środowisk testowych oraz produkcyjnych

Niezbędna jest również instalacja środowiska node.js wraz z menadzerem pakietów npm lub yarn w rekomendowanych wersjach:

  • node.js – 16.20.0
  • npm – 8.19.4
  • yarn – 1.22.19

Struktura katalogowa

project_name
   --- components
      --- header
          header.js
          --- subComponents
              nameSubComponents.js 
      --- footer
          --- footer.js
          --- footer.modules.scss
      --- forms
          --- activationForm
              activationForm.js
              activationForm.modules.scss
          --- winnersForm
              winnersForm.js
              winnersForm.moodule.scss
          --- subComponents
              formResult.js
              formControl.js
      --- global
          --- loader
              loader.js
          --- button
              button.js
   --- data
       --- languages
           language_pl.json
           language_en.json
       --- product
           product.json
   --- pages
   --- public
   --- fonts
   --- styles
   env.js

Plik konfiguracyjny .env

Wszystkie zmienne projektowo / środowiskowe typu adres do api itp należy definiować w pliku konfiguracyjnym .env

NEXT_PUBLIC_API_URL=https://api.boskiwiatr.pl

Uwaga – nigdy w zmiennych środowiskowych nie dodajemy dostępów do zewnętrznych platform i nie wykorzystujemy ich w żaden inny sposób w aplikacji. Tego typu dostępy zawsze powinny być przetwarzane po stronie backendu.

Definiowania styli

Bazowe style definiujące takie elementy jak buttony, nagłówki i inne elementy które będą wielokrotnie wykorzystywane w różnych komponentach zalecamy dodawać w katalogu styles.

Podstawowe pliki ze stylami dla każdego projektu to:

  • customize.scss – własne dodatkowe style dla elementów nieobsługiwanych przez komponenty lub customowy wygląd podstawowych elementów typu buttony itp
  • reset.scss – resetujemy domyślne style przeglądarki w celu zapewnia bardziej spójnej i kontrolowanej podstawy dla własnych stylów.
  • variables.scss – zmienne projektowe dla styli

Pozostale style dla lepszej przejrzystości definiujemy per component 

      --- header
          header.js
          header.module.scss
          --- subComponents
              nameSubComponents.js 
              nameSubComponents.module.scss

Responsive web design

Projekty graficzne dla wszystkich projektów mobilnych powinny być przygotowywane na 1024 px szerokości.

W zmiennych projektowych dla styli bazujemy na trzech podstawowych breakpointach 

$mobile: 1024px;
$desktopMedium: 1366px;
$desktopLarge: 1680px;

Wersję mobilną kodujemy do 1024 px w celu optymalizacji ilości breakpointów oraz całego kodu. Dotychczas to rozwiązanie sprawdziło się na dotychczasowych projektach choć nie jest idealne i czasami wymaga dostylowania na niestandardowych rozdzielczościach.

Aby zachować wiekszą przejrzystość kodu rekomendujemy dodawać breakpointy bezpośrednio wewnątrz klas 

.simpleClass{
    color: #fff;
    @media (max-width: $mobile) {
        color: #ccc;
    }
    ...
}