03 Izgradnja
Frontend: React, Next.js i TypeScript
Brzi i pristupačni interfejsi aplikacija u React-u i Next.js-u sa strogim TypeScript-om — renderovani na serveru gde je to važno i tipizirani prema API-ju iza njih.
Ishod: Interfejsi koje ljudi brzo koriste, a programeri bezbedno menjaju.
Ovo je sloj interfejsa veb aplikacije: ekrani, forme i prikazi podataka u kojima ljudi rade svaki dan, izgrađeni kao tipizirane React komponente u Next.js-u ili Vite-u i povezani sa stvarnim API-jem. Renderovanje na serveru koristi se tamo gde ubrzava prvi prikaz, a klijentski kod ostaje u delovima koji traže interakciju.
Ima smisla kada backend radi, a interfejs se sporo učitava i reaguje, kada je frontend rastao bez strukture pa svaka izmena nešto pokvari, ili kada je dizajn spreman i treba ga pravilno izgraditi. Javni sajtovi i njihovi metapodaci za pretragu spadaju u izradu sajtova i tehnički SEO.
Tipične potrebe
- Spor ili krhak frontend koji niko ne želi da dira
- Gotov dizajn koji tek treba pretvoriti u funkcionalne, pristupačne ekrane
- Prelazak na Next.js, TypeScript ili zajedničku biblioteku komponenti
Šta dobijate
- Tipiziran kod interfejsa, podeljen na komponente, koji se bezbedno menja
- Performanse i pristupačnost koje se mere, a ne pretpostavljaju
- Forme, tabele i filteri koji obrađuju učitavanje, prazne rezultate i greške
Pristup
Kako teče rad.
- 01
Ekrani, uloge i stanja
Popisuje se svaki ekran, ko ga koristi, koje podatke traži i kako se ponaša dok se učitava, kada je prazan i kada nešto ne uspe. Krhki interfejsi najčešće pucaju upravo u tim stanjima.
- 02
Komponente tipizirane prema podacima
Gradi se mali skup zajedničkih komponenti čija svojstva prate tipove API-ja, pa se preimenovano polje otkrije već pri proveri tipova, a ne na ekranu korisnika.
- 03
Šta se gde renderuje
Za svaku rutu određuje se šta radi server, a šta pregledač: uz Next.js liste i stranice sa detaljima mogu da stignu kao HTML, a JavaScript se šalje samo za filtere, editore i dijaloge.
- 04
Provera u pravom pregledaču
Kretanje tastaturom, oznake, fokus i kontrast proveravaju se na stvarnim ekranima, kao i vreme za koje stranica postaje upotrebljiva na telefonu srednje klase — pre izdanja i ponovo posle kasnijih izmena.
Tehnologije
- React
- Next.js
- TypeScript
- Tailwind CSS
- Vite
Inženjer koji radi ovaj posao je osnivač, Filip Volf — sarađujete direktno sa njim.
Pitanja
O ovoj usluzi.
Da li radite samo sa Next.js-om?
Ne. Next.js odgovara stranicama kojima su korisni renderovanje na serveru i rutiranje — ovaj sajt je napravljen u njemu. Aplikaciju kojoj se pristupa prijavom često je jednostavnije napraviti u React-u sa Vite-om — tako je izgrađen interfejs Pametnog Advokata. Oba pristupa koriste isti TypeScript i isti način rada sa komponentama.
Da li nam treba gotov dizajn pre početka?
Nije neophodno. Za interne alate i administrativne ekrane često su dovoljni zajednički skup komponenti i jasni tokovi. Kada se sam proizvod tek definiše — šta radi, za koga i kojim redom — to spada u dizajn proizvoda i UX/UI, i taj posao ide prvi.
Po čemu se ovo razlikuje od izrade sajtova i tehničkog SEO-a?
Frontend ovde znači interfejse aplikacija: ekrane kojima se pristupa prijavom, forme, kontrolne table i prikaze podataka, uključujući prevedene oznake, datume i formate brojeva. Izrada sajtova i tehnički SEO pokriva javne stranice koje treba da se pronađu u pretrazi — višejezično rutiranje, metapodatke i strukturisane podatke. Mnogim proizvodima treba oboje, često u istom Next.js kodu.
Povezane usluge
- 02
Dizajn proizvoda i UX/UI
Ishod: Proizvod oblikovan prema stvarnom poslu — dogovoren pre početka izgradnje.
- 04
Izrada sajtova i tehnički SEO
Ishod: Jedna dosledna priča za ljude, pretraživače i AI alate.
- 05
API-ji, backend arhitektura i PostgreSQL
Ishod: Poslovna pravila sprovedena jednom, tamo gde su podaci.
Sledeći korak
Razgovarajmo o tome šta gradite.
Opišite šta treba izgraditi ili popraviti, kako se posao danas odvija i koja su ograničenja. Dobićete pitanja koja razjašnjavaju zahtev ili prvi predlog pristupa — imejlom, na srpskom ili engleskom.