Spis treści

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@latest

Ten 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.