Next.js to full-stack framework do budowania aplikacji webowych, który łączy front-end i back-end w jednym, spójnym ekosystemie. Wykorzystuje React do budowy interfejsu użytkownika oraz Node.js jako backend, co czyni go idealnym rozwiązaniem dla programistów JavaScript. Dzięki temu możemy pisać kod zarówno dla front-endu, jak i back-endu w tym samym języku.
Dlaczego warto wybrać Next.js?
JavaScript na froncie i backendzie: Używając Next.js, można pisać zarówno front-end, jak i back-end w JavaScript, co przynosi jednolitość i upraszcza procesy deweloperskie.
Pełna integracja z React: Next.js jest zbudowany na bazie Reacta, co oznacza, że możesz korzystać ze wszystkich zalet tej biblioteki, takich jak komponenty, hooki i wirtualny DOM
Serwerowe renderowanie stron (SSR): Jedną z kluczowych zalet Next.js jest możliwość renderowania stron po stronie serwera (SSR). Dzięki temu aplikacje ładują się znacznie szybciej.
Wsparcie dla API Routes: Możliwość łatwego tworzenia endpointów API bez potrzeby dodatkowego serwera.
Routing oparty na systemie plików: Routing w Next.js jest wyjątkowo prosty – każdy plik w katalogu pages automatycznie staje się nową ścieżką w aplikacji. Ułatwia to zarządzanie strukturą aplikacji i tworzenie nowych podstron.
Więcej info w dokumentacji
Szybki start
Tworzenie projektu:
Aby rozpocząć pracę z Next.js, możemy wykorzystać gotowe rozwiązania do szybkiego tworzenia projektu. Oto krok po kroku:
npx create-next-app@latestTen polecenie utworzy nowy katalog z wszystkimi niezbędnymi zależnościami i plikami konfiguracyjnymi.
Struktura katalogów
Bazując na Next.js w wersji 14, najważniejsze katalogi:
/app
Katalog app jest centralnym miejscem dla wszystkich stron i komponentów w projekcie. Struktura tego katalogu odzwierciedla strukturę URL aplikacji.
/app/api
Przechowuje wszystkie endpointy API w twojej aplikacji. Każdy plik w tym katalogu odpowiada za konkretną trasę API.
/components
Katalog components zawiera komponenty React, które są używane w różnych miejscach aplikacji. Komponenty te mogą być wielokrotnie wykorzystywane.
Pliki specjalne:
layout.js
Plik layout jest używany do definiowania globalnego layoutu, który otacza wszystkie podstrony w danym folderze. Layout może zawierać wspólne elementy takie jak nagłówki, stopki, czy boczne panele.
Możliwe rozszerzenia: .js/.jsx/.tsx
page.js
Plik page definiuje zawartość konkretnej strony. Jest to główny punkt wejścia dla danej trasy URL.
Możliwe rozszerzenia: .js/.jsx/.tsx
loading.js
Plik loading definiuje interfejs użytkownika, który jest wyświetlany podczas ładowania danych lub komponentów. Jest przydatny do informowania użytkownika o stanie ładowania.
Możliwe rozszerzenia: .js/.jsx/.tsx
route.js
Plik route definiuje endpoint API. Obsługuje różne metody HTTP, takie jak GET, POST, PUT, DELETE.
Możliwe rozszerzenia: .js/.jsx
not-found.js
Plik not-found definiuje interfejs użytkownika wyświetlany, gdy żądana strona nie istnieje. Zwykle jest to strona błędu 404.
Możliwe rozszerzenia: .js/.jsx/.tsx
error.js
Plik error definiuje interfejs użytkownika wyświetlany w przypadku błędów specyficznych dla danej trasy.
Możliwe rozszerzenia: .js/.jsx/.tsx
Uruchamianie projektu
npm run devTo polecenie uruchomi serwer deweloperski, na którym można testować aplikację w czasie rzeczywistym.