The website was built as a modern production-ready system rather than a static marketing page, with a strong focus on performance, SEO, security, and future scalability.
Objectives & Challenges
The main challenge was to implement a technically robust solution that supports rich media content without sacrificing loading speed or search engine visibility. The platform needed to operate seamlessly in two languages, integrate with a headless CMS, provide a secure customer support channel via Telegram, and remain flexible enough to evolve alongside the business.
Key requirements included CMS-driven content, SEO-ready architecture, secure server-side processing, and production-grade deployment.
Technology Stack
A modern, future-proof stack was selected to ensure performance, type safety, and developer efficiency.
The application is built on Next.js 16 (App Router) with React 19, leveraging server components and hybrid rendering. TypeScript is used across the entire codebase to enforce strict typing and reduce runtime errors. Styling is implemented with Tailwind CSS v4, enabling a scalable and consistent design system.
Content management is handled via Directus CMS, while Docker and Nginx are used for containerization, deployment, and traffic handling.
Architecture & Rendering Strategy
The website uses a hybrid rendering approach combining Server-Side Rendering (SSR) and Incremental Static Regeneration (ISR). Pages are cached for five minutes and automatically revalidated, providing an optimal balance between fresh content and performance.
A standalone Next.js build is used to minimize Docker image size and reduce runtime overhead. Media assets are optimized using the Next.js Image pipeline with WebP and AVIF support.
The architecture is fully CDN-ready and designed to scale without structural changes.
Multilingual System
Multilingual support is implemented at the routing level. Middleware automatically redirects users to localized URLs, ensuring correct language resolution and SEO compliance.
Translations are stored in TypeScript files, preserving type safety and preventing runtime inconsistencies. Language switching maintains page context, allowing users to seamlessly navigate between Serbian and English versions of the same content.
The sitemap includes proper hreflang annotations to improve indexing accuracy across regions.
Integrations
Dynamic content such as services and case studies is fetched from Directus via its API. Contact forms are processed server-side, with submitted data and file uploads securely stored in the CMS.
A Telegram-based customer support system is integrated using the Telegram Bot API, routed through a proxy server to prevent token exposure in client-side code. Analytics is handled via Google Analytics with full Consent Mode support for GDPR compliance.
SEO & Search Visibility
SEO was treated as a core architectural concern rather than a post-launch enhancement. The system generates a dynamic sitemap.xml based on CMS data, ensuring automatic updates as content changes.
Canonical URLs prevent content duplication, while Open Graph and Twitter Card metadata enable correct link previews. Structured data is included to improve search engine understanding and indexing quality. A properly configured robots.txt ensures controlled crawling behavior.
Performance Optimization
Performance optimization was implemented at multiple levels. Images and videos are optimized and lazy-loaded below the fold. Code splitting reduces the initial bundle size, improving time-to-interactive metrics.
Caching is applied at both the Next.js and Nginx levels, and the overall setup is designed to work efficiently behind a CDN. As a result, the website consistently achieves Lighthouse scores above 90.
Security Considerations
All form submissions and integrations are handled server-side, ensuring that sensitive tokens never reach the client. Input validation is enforced on the server, and security headers provide protection against common XSS vectors.
The application is served exclusively over HTTPS, with Nginx handling SSL termination and request filtering.
Result
The final solution is a high-performance, scalable corporate website that fully supports Smalltalk’s business and content needs.
It delivers excellent performance metrics, seamless CMS integration, strong SEO foundations, secure Telegram-based customer communication, and a bilingual structure without functional compromise. The system is fully containerized, easy to deploy, and ready for future expansion.