Tworzenie i uruchamianie projektu Next.js w ServBay

Przegląd

Next.js to zaawansowany framework dla Reacta, rozwijany i utrzymywany przez firmę Vercel. Jest szeroko wykorzystywany do budowy nowoczesnych, wydajnych aplikacji webowych. Na bazie Reacta oferuje szereg funkcji dostępnych od ręki, znacznie upraszczając proces tworzenia złożonych aplikacji przez programistów.

Czym jest Next.js?

Next.js to popularny, otwartoźródłowy framework React wspierający różnorodne tryby renderowania, takie jak renderowanie po stronie serwera (SSR) oraz generowanie statycznych stron (SSG). Funkcje te poprawiają wydajność aplikacji, komfort użytkownika oraz widoczność w wyszukiwarkach internetowych. Next.js oferuje między innymi system routingu oparty o strukturę plików, trasy API, automatyczny podział kodu, wsparcie dla CSS Modules – zapewniając kompleksowe środowisko programistyczne.

Najważniejsze cechy i zalety Next.js

• Wsparcie różnych strategii renderowania: Obsługa SSR, SSG, renderowania po stronie klienta (CSR), a także trybów hybrydowych. Programista może wybrać najwygodniejszy sposób renderowania dostosowany do swoich potrzeb.
• Routing oparty na systemie plików: Automatyczne generowanie tras na podstawie katalogów pages lub app – prosty i intuicyjny mechanizm.
• Trasy API: Umożliwia łatwe tworzenie własnych endpointów API bezpośrednio w projekcie Next.js, co ułatwia tworzenie aplikacji typu full-stack.
• Automatyczny podział kodu: Podział kodu na poziomie stron – ładowany jest tylko JavaScript wymagany przez aktualny widok, co przyspiesza ładowanie.
• Zaawansowany komponent obrazów (next/image): Automatyczna optymalizacja rozmiaru, formatu oraz strategii ładowania zdjęć dla lepszej wydajności.
• Wbudowane wsparcie dla CSS i Sass: Łatwe zarządzanie stylami i ich pisanie.
• Szybkie odświeżanie (Fast Refresh): Podczas pracy deweloperskiej praktycznie natychmiastowe aktualizacje widoku po zmianach w kodzie.

Dzięki Next.js możesz zbudować wydajne, skalowalne i łatwe w utrzymaniu nowoczesne aplikacje webowe w znacznie krótszym czasie.

Uruchamianie projektów Next.js w ServBay

ServBay to zintegrowane środowisko lokalnego developmentu webowego, zawierające m.in. Node.js oraz szereg innych języków i narzędzi. Dzięki środowisku Node.js oraz wygodnemu zarządzaniu Witrynami (w tym proxy i statycznymi plikami), w ServBay możesz łatwo stworzyć, rozwijać oraz wdrożyć projekt Next.js.

W tym artykule dowiesz się, jak założyć projekt Next.js, uruchomić go w trybie deweloperskim (przez reverse proxy), a także wdrożyć wersję produkcyjną jako statyczną stronę w środowisku ServBay.

Wymagania wstępne

Zanim zaczniesz, upewnij się, że:

1. ServBay został poprawnie zainstalowany na Twoim macOS.
2. Zainstalowałeś i aktywowałeś wymagane pakiety Node.js w panelu Pakiety ServBay. Jeśli nie masz Node.js, skorzystaj z dokumentacji Korzystanie ze środowiska Node.js w ServBay.

Instrukcja krok po kroku

1. Tworzenie projektu Next.js

Najpierw zainicjuj nowy projekt Next.js.

1. Otwórz Terminal i przejdź do domyślnego katalogu www ServBay:

   cd /Applications/ServBay/www

2. Zainicjuj projekt za pomocą create-next-app: Wykonaj poniższe polecenie, aby utworzyć nowy projekt Next.js. Zalecamy nazwę projektu servbay-next-app – powstanie katalog o tej nazwie wewnątrz /Applications/ServBay/www.

   npx create-next-app@latest servbay-next-app

   npx to narzędzie do uruchamiania poleceń z pakietów Node.js, a create-next-app@latest pobierze najnowszą wersję generatora Next.js. Postępuj zgodnie z instrukcjami w terminalu (wybór TypeScript, ESLint, Tailwind CSS, App Router itd.).

3. Przejdź do katalogu projektu i zainstaluj zależności:

   cd servbay-next-app
   npm install

   Komenda npm install zainstaluje wszystkie niezbędne zależności zdefiniowane w pliku package.json.

2. Modyfikacja zawartości strony głównej (opcjonalnie)

Aby upewnić się, że projekt działa poprawnie, możesz zmodyfikować stronę główną.

1. Otwórz plik pages/index.js (jeśli używasz Pages Router) lub app/page.js (w przypadku App Routera). Przykład dla Pages Router:

   # Otwórz plik za pomocą ulubionego edytora, np. VS Code
   code pages/index.js

2. Zmień treść strony, by wyświetlała "Hello ServBay!". Zamień zawartość pliku na poniższą lub podobną:

   // pages/index.js (Pages Router)
   export default function Home() {
     return (
       <div>
         <h1>Hello ServBay!</h1>
         <p>Ta strona jest uruchamiana przez ServBay.</p>
       </div>
     );
   }

   Jeśli korzystasz z App Routera (app/page.js), struktura może być nieco inna, ale sednem jest zmiana zawartości tagu <h1>.

3. Uruchomienie w trybie deweloperskim

Podczas developmentu korzystamy z serwera deweloperskiego Next.js, który obsługuje hot module replacement (HMR) i szybkie odświeżanie – możesz natychmiast sprawdzać efekty zmian w kodzie. Funkcja reverse proxy w ServBay idealnie nadaje się do przekierowywania ruchu na port serwera Next.js poprzez wybraną lokalną domenę.

1. Uruchom serwer deweloperski Next.js: W katalogu projektu (/Applications/ServBay/www/servbay-next-app) wpisz:

   npm run dev -- -p 8585

   To polecenie włączy serwer deweloperski Next.js na lokalnym porcie 8585. Możesz wybrać inny wolny port.

2. Skonfiguruj witrynę w ServBay (reverse proxy): Przejdź do interfejsu aplikacji ServBay, sekcja Witryny. Dodaj nową witrynę z następującą konfiguracją:

   • Nazwa (Name): My first Next.js dev site (lub dowolna własna nazwa)
   • Domena (Domain): servbay-next-dev.servbay.demo (zalecane jest stosowanie sufiksu .servbay.demo dla domen lokalnych)
   • Typ witryny (Website Type): wybierz Reverse Proxy
   • IP Proxy (Proxy IP): 127.0.0.1 (adres loopback)
   • Port Proxy (Proxy Port): 8585 (port naszego serwera Next.js)

   Po zapisaniu i zastosowaniu zmian ServBay automatycznie odpowiednio skonfiguruje Caddy lub Nginx (zależnie od wybranych ustawień), przekierowując ruch z domeny servbay-next-dev.servbay.demo na 127.0.0.1:8585.

   Szczegółową instrukcję znajdziesz w Dodawanie witryny Node.js w trybie deweloperskim do ServBay.

3. Odwiedź stronę developerską: Otwórz przeglądarkę i wejdź pod adres https://servbay-next-dev.servbay.demo.

   Dzięki temu, że ServBay automatycznie generuje i konfiguruje SSL dla lokalnych domen (z użyciem ServBay User CA), Twoja lokalna witryna jest dostępna przez HTTPS bez komunikatów o błędach przeglądarki. ServBay obsługuje własne domeny oraz darmowe certyfikaty SSL, co bardzo przydaje się podczas developmentu.

4. Budowanie wersji produkcyjnej i wdrożenie jako statyczna strona

Po zakończeniu developmentu możesz przygotować zoptymalizowaną wersję produkcyjną projektu. Jeśli Twój projekt generuje statyczne pliki (output: 'export' lub komenda next export), idealnym rozwiązaniem dla wdrożenia jest statyczny serwer ServBay.

1. Zbuduj wersję produkcyjną i wyeksportuj statyczne pliki: W katalogu projektu (/Applications/ServBay/www/servbay-next-app) wykonaj:

   npm run build
   npm run export

   • npm run build buduje zoptymalizowaną wersję produkcyjną aplikacji Next.js, umieszczając pliki np. w katalogu .next.
   • npm run export (wymaga odpowiedniej konfiguracji Next.js bądź jest stosowane w starszych wersjach) lub ustawienie output: 'export' powoduje wyeksportowanie projektu do zestawu całkowicie statycznych plików HTML, CSS i JS, które pojawią się w katalogu out.

2. Skonfiguruj witrynę statyczną w ServBay: W ServBay przejdź do zarządzania Witrynami, dodaj nową witrynę ze wskazanymi ustawieniami:

   • Nazwa (Name): My first Next.js production site (lub własna nazwa)
   • Domena (Domain): servbay-next-prod.servbay.demo (zalecany sufiks .servbay.demo)
   • Typ witryny (Website Type): wybierz Static
   • Katalog główny (Website Root): podaj pełną ścieżkę do katalogu out, np. /Applications/ServBay/www/servbay-next-app/out.

   Zapisz i zastosuj zmiany – ServBay skonfiguruje serwer WWW do serwowania plików bezpośrednio z katalogu /Applications/ServBay/www/servbay-next-app/out.

3. Odwiedź witrynę produkcyjną: Otwórz przeglądarkę i przejdź na stronę https://servbay-next-prod.servbay.demo. Powinna wyświetlić się gotowa, wyeksportowana statycznie strona Next.js.

   Również tutaj, dzięki automatycznej konfiguracji SSL i własnym domenom, Twój lokalny serwer produkcyjny dostępny jest przez bezpieczne połączenie HTTPS.

Podsumowanie

Realizując te kroki, zbudowałeś i uruchomiłeś projekt Next.js w lokalnym środowisku ServBay, poznałeś reverse proxy dla trybu developerskiego oraz deployment za pomocą statycznych plików dla wersji produkcyjnej. ServBay, dzięki rozbudowanemu środowisku oraz prostemu zarządzaniu Witrynami, znacznie upraszcza lokalne tworzenie i testowanie projektów Next.js.