Posty

Wyświetlam posty z etykietą React

Wprowadzenie do Next.js, cz. 2

Z tego wpisu dowiesz się jak utworzyć pierwszą aplikację w Next.js. Tworzenie projektu Wymagana wersja Node.js: 18.18 bądź nowsza. npx create-next-app@latest PierwszyProjekt Powyższe polecenie utworzyło nową aplikację Next.js oraz jej główny katalog o nazwie PierwszyProjekt. Teraz przejdź do katalogu aplikacji poleceniem: cd PierwszyProjekt i uruchom serwer: npm run dev - zostanie uruchomiony serwer developerski z nasłuchiwaniem na porcie 3000. Po wpisaniu w przeglądarce adresu http://localhost:3000 powinna ukazać się strona startowa Next.js. Tworzenie nowej strony Na tym etapie stworzymy przykładową stronę zawierającą jakiś tekst. Strony w Next.js tworzymy w katalogu pages . Nazwa pliku strony będzie równoznaczna z elementem URL, przez który się potem do niej odwołamy. Utwórz plik contact.js w katalogu pages z następującym kodem: export default function Contact() { return ( <h1>Kontakt</h1>; <p>Aby się z nami skontaktować, wypełnij formularz.</p...

Wprowadzenie do Next.js, cz. 1

Next.js to nowoczesny i popularny framework React, który od lat zyskuje uznanie wśród programistów. Swoją popularność zawdzięcza przede wszystkim intuicyjności, wydajności i bogatej funkcjonalności, która upraszcza proces tworzenia aplikacji webowych. Czym właściwie jest Next.js? Next.js to biblioteka o otwartym kodzie źródłowym wydana na licencji MIT, która rozszerza funkcjonalność Reacta o wiele dodatkowych rozwiązań, ułatwiając tworzenie stron internetowych o wysokiej wydajności i przyjaznym UX. Pozwala na tworzenie zarówno aplikacji opartych o SSR (Server-Side Rendering), jak i SSG (Static Site Generation), co przyczynia się do tworzenia szybkich, dynamicznych i responsywnych aplikacji. Aktualnie next.js dostępny jest w wersji 15. Next.js w repozytorium GitHub . Zalety Next.js Wydajność SSR - Next.js pozwala na renderowanie stron po stronie serwera, co przyspiesza wczytywanie strony i poprawia SEO; SSG - Generowanie statycznych stron minimalizuje obciążenie serwera...