Architectural patterns for full-stack TypeScript web applications with Next.js and NestJS

Abstract

Modern web application development has converged on TypeScript as the foundational language of both the user-facing presentation layer and the data-serving backend, enabling unified development practices, shared type definitions across the network boundary, and substantially reduced cognitive overhead during cross-stack engineering work. However, the architectural patterns for combining these layers vary widely across the industry, and the selection of frameworks, orchestration approaches, and data access strategies significantly affects developer productivity, application performance, and long-term maintainability. This research examines the architectural design and implementation of a full-stack TypeScript web application using Next.js version 15 with the App Router on the frontend and NestJS version 11 with the Prisma object-relational mapper on the backend, deployed against a SQLite relational database. The application implements a customer-facing e-commerce platform with 29 user interface routes, 59 REST API endpoints, and 20 database models, providing a representative scale for evaluating architectural choices. The study analyzes the comparative benefits of hybrid server-side and client-side rendering enabled by React Server Components, the role of the NestJS dependency injection container in producing modular and testable backend code, the type-safe data access guarantees offered by Prisma through schema-first code generation, and the operational implications of organizing both packages within a single npm workspace monorepo. Empirical measurements demonstrate that the proposed architecture achieves a 164 kilobyte First Load JavaScript footprint on the home page through aggressive code splitting and Server Components, sub-200 millisecond response times for catalog queries through composite database indexing, and a deployment artifact of approximately 200 megabytes including application code and Node.js runtime. The research identifies architectural patterns that contribute to this performance profile, including the segmentation of routes into authenticated and public groups through route groups, the centralization of authentication state in React Context providers, the use of repository-like services with globally injected Prisma access, and the colocation of validation rules between client and server through structurally aligned schemas. The proposed architecture serves as a reference implementation for small-to-medium TypeScript-first web applications and as an educational template for software engineering curricula.