Next.js · Organizacja pozarządowa
Fundacja Out of the Box
Strona fundacji przebudowana z eksportu szablonu na Next.js 16
Fundacja Out of the Box z Łodzi prowadzi szkolenia z szycia i krawiectwa oraz pomaga osobom zagrożonym wykluczeniem, m.in. kobietom i seniorom, wejść do branży tekstylnej. Przebudowałem jej stronę ze starego statycznego eksportu szablonu na aplikację w Next.js 16 z pełnymi metadanymi SEO, danymi strukturalnymi, nagłówkami bezpieczeństwa i formularzem z walidacją.
- Rola
- Jedyny programista: wszystkie 57 commitów
- Okres
- maj - wrzesień 2026
- Technologie
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS 4
- Framer Motion
- React Hook Form
- Zod
- Docker
- wysokość formularza do przycisku
- 1101 → 475 px
- rodziny fontów
- 4 → 1
- typów schema.org w JSON-LD
- 5
Kontekst
Poprzednia strona była statycznym eksportem szablonu w Next.js 14, z pozostałościami stron szablonu i formularzem obsługiwanym przez skrypt PHP mail().
Fundacja raportuje też projekty finansowane z UE, które potrzebują osobnej strony z wymaganymi logotypami i danymi umowy.
Co zrobiłem
- Aplikacja Next.js 16 (App Router) z wyjściem standalone w wieloetapowym buildzie Dockera
- Wspólny generator metadanych, obraz Open Graph dla każdej trasy, sitemap, robots i JSON-LD (NGO, WebSite, ContactPage, Service, BreadcrumbList)
- Nagłówki bezpieczeństwa (HSTS, nosniff, polityki ramek, referrera i uprawnień) i obrazy w AVIF albo WebP
- Płynna skala typografii przez clamp() i dostępne menu mobilne z pułapką fokusu i zamykaniem klawiszem Escape
- Logo, które po najechaniu składa się w pudełko, w samym CSS i z poszanowaniem ograniczonego ruchu
- Przewijany pasek logotypów partnerów, slider ze swipe i kropkami oraz baner cookies, który ustępuje przy stopce
- Formularz kontaktowy z React Hook Form i Zod, zgodami i wysyłką przez SMTP
Trudne momenty i jak je rozwiązałem
Problem
Po przejściu na Next.js 16 przejście na inną stronę zostawiało ją przewiniętą o 188 px zamiast na górze.
Rozwiązanie
Dodany atrybut data-scroll-behavior="smooth", dzięki któremu Next.js 16 wyłącza płynne przewijanie na czas nawigacji i każda strona otwiera się od góry.
Problem
Testy na prawdziwym telefonie nie działały: serwer deweloperski zwracał 403 w sieci lokalnej, a strona była pusta.
Rozwiązanie
Dozwolone adresy odczytywane z interfejsów sieciowych komputera i wersja noscript, żeby strona nigdy nie była pusta.
Problem
Nagłówki osiągały maksymalny rozmiar za wcześnie, przy ok. 1031-1239 px, i były za duże na laptopach.
Rozwiązanie
Przeliczone nachylenia clamp() i niższe maksima, np. h1 z 90 do 72 px.
Wyniki
- Formularz mieści się na jednym ekranie od 1280 × 720: 1101 → 475 px do przycisku wysyłki
- Sekcja „Kim jesteśmy?” 921 → 635 px wysokości przy 1430 × 746
- Kroje pisma zredukowane z 4 rodzin do 1
Ekrany
Przesuń palcem albo użyj przycisków, żeby przejrzeć ekrany.
Komputer · Strona główna 
Telefon · Strona główna na telefonie 
Komputer · Szkolenia Telefon · Szkolenia na telefonie 
Komputer · Projekty UE
Szukasz takiej osoby do zespołu?
Chętnie opowiem o każdym z tych projektów szczegółowo.
Napisz do mnie