Software house Next.js i React
Interfejsy aplikacji budujemy w Next.js, React i TypeScript. W tej technologii powstały wszystkie nasze realizacje: od systemu rejestracji na badania po platformę SaaS Offer Exchange. Serwisy z dużą ilością treści budujemy w Astro.
Dlaczego budujemy w Next.js
-
Strona wczytuje się, zanim zadziała skrypt
Next.js przygotowuje widok na serwerze, więc użytkownik od razu widzi treść, także na słabszym telefonie. Interaktywne elementy włączają się chwilę później.
-
Publiczne części aplikacji są widoczne w Google
Katalog ofert, cennik czy formularz rejestracji trafiają do wyszukiwarki jako gotowy HTML, z własnym tytułem, opisem i danymi strukturalnymi.
-
Mniej błędów dzięki TypeScript
Typy opisują dane w całej aplikacji. Gdy zmienia się struktura danych z API, kompilator wskazuje każde miejsce do poprawy, zanim błąd zobaczy użytkownik.
-
Popularna technologia, łatwa do przejęcia
React i Next.js należą do najczęściej używanych narzędzi do budowy interfejsów. Programistów, którzy rozwiną aplikację, łatwo znaleźć także poza naszym zespołem.
Kiedy wybrać Next.js, a kiedy coś innego
Next.js polecamy dla aplikacji webowych, w których część widoków jest publiczna, a część dostępna po zalogowaniu. Tak działa platforma zakupowa z katalogiem ofert albo system rejestracji z publicznym formularzem i panelem pracownika. Jedna technologia obsługuje wtedy obie części, a publiczne widoki są dobrze indeksowane.
Gdy aplikacja jest w całości schowana za logowaniem, na przykład jako panel dla kilku pracowników, renderowanie na serwerze daje mniej korzyści. Wtedy wystarcza prostsza aplikacja React, a decyzję podejmujemy na konsultacji. Gdy serwis składa się głównie z treści, wybieramy Astro. Gdy aplikacja wymaga dostępu do funkcji telefonu, których nie ma przeglądarka, mówimy o tym przed wyceną.
Jak wygląda aplikacja Next.js w naszych projektach
Interfejs w Next.js łączy się z backendem w .NET albo Node.js przez REST API. Dane i reguły biznesowe pozostają w backendzie, a interfejs odpowiada za widoki, formularze i stan sesji użytkownika. Aplikację uruchamiamy w kontenerze Docker, który można wdrożyć na serwerze albo w chmurze, na przykład w AWS.
Co firma zyskuje na aplikacji zbudowanej wokół jej procesu, opisujemy na stronie aplikacje webowe dla firm. Tam też opisujemy wymagania dotyczące dostępności usług świadczonych konsumentom. Przykład aplikacji z publicznym formularzem i panelem pracownika znajdziesz w opisie systemu rejestracji na badania MR.
Co robimy
- Budujemy interfejsy w Next.js z App Router i komponentami serwerowymi React
- Dobieramy sposób renderowania do każdej części aplikacji, na serwerze, przy budowie albo w przeglądarce
- Piszemy kod w TypeScript i opisujemy typami dane z API
- Stylujemy interfejs w Tailwind CSS i budujemy bibliotekę własnych komponentów aplikacji
- Projektujemy widoki pod telefony, tablety i komputery
- Budujemy serwisy z dużą ilością treści w Astro
- Mierzymy szybkość wczytywania i testujemy dostępność interfejsu
Dla kogo
- Planujesz aplikację webową, której część ma być widoczna w wyszukiwarce
- Twoja aplikacja w React działa wolno albo trudno ją rozwijać
- Szukasz zespołu, który przejmie rozwój aplikacji w Next.js
- Potrzebujesz szybkiego serwisu z dużą ilością treści, np. katalogu produktów albo dokumentacji
Renderowanie dobrane do każdego widoku
W jednej aplikacji Next.js łączymy kilka sposobów przygotowania widoku. Strony, które rzadko się zmieniają, generujemy przy budowie i podajemy z pamięci podręcznej. Widoki z danymi zależnymi od użytkownika przygotowujemy na serwerze przy każdym żądaniu. Elementy, które reagują na kliknięcia, działają w przeglądarce. Dzięki temu przeglądarka pobiera tylko tyle skryptu, ile naprawdę potrzebuje.
- Strony generowane przy budowie dla treści, która rzadko się zmienia
- Renderowanie na serwerze dla danych zalogowanego użytkownika
- Komponenty interaktywne tylko tam, gdzie są potrzebne
Szybkość i dostępność sprawdzane automatycznie
Szybkość wczytywania mierzymy wskaźnikami Core Web Vitals, których używa też Google. Interfejs budujemy tak, by dało się go obsłużyć klawiaturą i czytnikiem ekranu. Na nowych stronach Conetso Group każde wdrożenie przechodzi automatyczny test dostępności WCAG 2.2 AA i kontrolę wielkości skryptów, a ten sam sposób pracy proponujemy w projektach klientów.
- Pomiar Core Web Vitals przed odbiorem
- Obsługa klawiaturą i czytnikiem ekranu
- Automatyczny test dostępności przy wdrożeniu
Astro dla serwisów z dużą ilością treści
Gdy serwis składa się głównie z treści, a interakcji jest niewiele, wybieramy Astro. Generuje on gotowe strony HTML i dodaje skrypt tylko do elementów, które go wymagają, na przykład formularza. W Astro zbudowaliśmy nowe strony trzech marek Conetso: każda strona pobiera mniej niż 50 KB skryptów.
- Gotowy HTML bez zbędnego skryptu
- Komponenty React tam, gdzie potrzebna jest interakcja
- Treści w plikach, które łatwo przenieść i wersjonować
Jak pracujemy
-
Mapa widoków
Rozpisujemy ekrany aplikacji i decydujemy, które z nich mają być publiczne i widoczne w wyszukiwarce.
-
Komponenty i projekt
Na podstawie projektu interfejsu budujemy komponenty w React i Tailwind CSS, wspólne dla całej aplikacji.
-
Integracja z backendem
Łączymy widoki z API, opisujemy dane typami TypeScript i obsługujemy stany ładowania oraz błędów.
-
Pomiar i odbiór
Mierzymy szybkość wczytywania i testujemy dostępność, a wersję testową udostępniamy do sprawdzenia.
Doświadczenie
- System rejestracji na badania MR, Offer Exchange, Service Quotes i INVENTA Licenses zbudowaliśmy w Next.js i React, a trzy ostatnie także w TypeScript i Tailwind CSS.
- Pacjenci przychodni rejestrują się na badania MR w przeglądarce telefonu, bez instalowania aplikacji.
- Nowe strony Conetso Group, Healthcare i Software zbudowaliśmy w Astro z automatycznym testem dostępności WCAG 2.2 AA.
Realizacje
-
System rejestracji na badania
Rejestracja online na badania rezonansem magnetycznym w prywatnej przychodni. Pacjenci sami wybierają termin, a pracownicy zarządzają wizytami.
-
Offer Exchange
Platforma SaaS do zakupów firmowych, która łączy w jednym miejscu zapytania ofertowe, porównanie ofert od handlowców i zamówienia.
-
Service Quotes
Aplikacja dla firmy usługowej z klientami B2B. Obsługuje zlecenia, przydział pracowników, wycenę wykonanej usługi i płatność online.
-
INVENTA Licenses
System do zarządzania użytkownikami i licencjami aplikacji VR do szkolenia pracowników, z panelami klienta, dystrybutora i administratora.
Najczęstsze pytania
Czy przejmiecie rozwój aplikacji w React napisanej przez inną firmę?
Tak. Zaczynamy od przeglądu kodu, wersji bibliotek i sposobu wdrożenia. Jeśli aplikacja korzysta ze starszej wersji React albo Next.js, proponujemy plan aktualizacji rozłożony na etapy, żeby nie wstrzymywać rozwoju funkcji.
Next.js czy Astro?
Next.js wybieramy dla aplikacji, w których użytkownicy logują się, wypełniają formularze i pracują na danych. Astro wybieramy dla serwisów, które składają się głównie z treści. Oba narzędzia mogą korzystać z komponentów React, więc część interfejsu da się przenieść między nimi.
Czy aplikacja w Next.js może działać jako aplikacja na telefon?
Aplikacja webowa w Next.js działa w przeglądarce telefonu i dopasowuje się do ekranu, jak system rejestracji na badania MR. Można ją też dodać do ekranu głównego telefonu jako aplikację PWA, bez publikowania w sklepach.
Zobacz także
-
Aplikacje webowe dla firm
Budujemy systemy do obsługi zleceń, wycen i zamówień z osobnymi panelami dla klientów, pracowników i menedżerów.
-
Systemy rezerwacji i rejestracji online
Klienci rezerwują terminy przez internet, pracownicy zarządzają harmonogramem, a system wysyła potwierdzenia e-mail i SMS.