2026 · Engineer + Designer
Hech qanday backend URL yoki kalit clientga ko'rinmaydigan portfolio. Barcha so'rovlar Next.js Route Handlers orqali proxy qilinadi. Nonce-based CSP, content-as-code MDX, Vitest bilan pin qilingan sanitization.
- Rol
- Engineer + Designer
- Yil
- 2026
- Stack
- Next.js 16
- React 19
- TypeScript strict
- TailwindCSS 4
- Framer Motion
- Vitest
- Docker
- Havolalar
Qisqacha
Muammo
Portfolio sayt shaxsan men uchun tashrif kartasi darajasida muhim. Ishonchli, tez, xavfsiz bo'lishi kerak — lekin bu "yangi ficha har haftada" tipidagi mahsulot emas. Shuning uchun arxitektura bir marta to'g'ri qurilishi va keyin xotirjam ishlashi kerak.
Yondashuv
BFF (Backend For Frontend) qatlami — backend API hech qachon clientga ochilmaydi. Bu chekka holat emas, poydevor:
- Browser faqat
/app/api/*Route Handler'larni biladi. apiClient'server-only'modullarda — build'da tekshiriladi.- Har BFF route: same-origin check, rate-limit, Zod validation, whitelist sanitize.
- Xato javoblar generik — stack trace, internal id, timestamp clientga chiqmaydi.
Qattiq CSP: nonce-based script-src, strict-dynamic, frame-ancestors 'none'. Turnstile/Plausible faqat env o'rnatilsa whitelisted.
Content-as-code MDX: content/projects/*.mdx fayllardan loyihalar yuklanadi — user commit qiladi, CI deploy qiladi. Backend'da content CRUD'i kerak emas.
Natija
- Lighthouse — 95+ performance, 100 a11y, 100 SEO
- Bundle — ilk yuklash < 150KB (bundle-analyzer bilan tekshiriladi)
- 0 ta 3rd-party tracker default
- 18/18 Vitest — sanitize whitelist, rate-limit window, same-origin guard, schemas
- LCP < 1.5s (dot-grid canvas +
next/image priority)