Behind the build: Next.js, AWS, and SST
As part of our behind the build series, this blog takes a closer look at how we create robust internal dashboards at zally using Next.js, AWS and SST. These dashboards play a vital role in helping our engineers monitor and validate changes to critical systems, running automated checks to ensure everything behaves as expected before it reaches production.
When building internal tools for smoke testing critical infrastructure like data pipelines, choosing the right technology stack can make the difference between a maintainable solution and a development nightmare.
After implementing an internal dashboard that enables engineers to validate their changes through automated smoke tests across individual environments, we've found that the combination of Next.js, AWS, and SST provides an excellent balance of rapid development, reliability, and scalability.
The Challenge: Automated Testing Across Developer Environments
Our team needed an internal dashboard that could:
Enable smoke testing of data pipeline processes across individual developer environments
Reduce manual testing overhead by providing automated validation capabilities
Spin up quickly without extensive infrastructure setup
Work consistently across development, staging, and production environments
Provide accurate, live data without the complexity of mocking or data synchronisation
Why This Tech Stack Works
Next.js: Familiar, Fast, and Flexible
Next.js emerged as our frontend framework of choice for several reasons, starting with its familiar development experience. Since Next.js is built on React (a JavaScript library for building user interfaces, especially for web applications), our engineering team could leverage existing React knowledge and patterns. This familiarity translates directly into faster development cycles and reduced onboarding time for new engineers.
The framework provides automatic code splitting, image optimisation, and performance enhancements out of the box. For internal dashboards that need to load quickly and execute smoke tests efficiently, these optimisations are invaluable. The component-based architecture makes it straightforward to add new test scenarios, modify existing validation logic, or update dashboard sections without affecting the entire application.
Next.js has great support in SST technology with dedicated constructs that handle deployment, routing, and infrastructure configuration automatically. This integration eliminates the need to manually configure build settings, environment variables, and AWS service connections for each deployment environment.
AWS with SST: Full-Stack Infrastructure Made Simple
SST is a framework that makes it easy to build modern full-stack applications on your own infrastructure. SST defines infrastructure components as "resources" in code and automatically links them to your application with the correct environment-specific configurations, ensuring that API endpoints, database connections, and service configurations remain consistent across all environments without manual management.
Unlike traditional development approaches that rely on mocked data or static datasets, our SST-powered dashboard connects to live data sources even during development. This provides several critical advantages for smoke testing. Engineers can validate their changes against real data patterns and edge cases, eliminating the time typically spent creating and maintaining mock data for test scenarios.
The dashboard's ability to respond quickly to DynamoDB (a database service provided by AWS) changes, a database service provided by AWS, is particularly crucial for our data pipeline monitoring. As smoke test data updates records in DynamoDB, the dashboard immediately reflects these changes, allowing engineers to see the real-time impact of their modifications. This live data integration means automated smoke tests eliminate the need for repetitive manual validation while ensuring environment parity - tests run against the same data structures and patterns that exist in production.
The SST Advantage: No More Hardcoded URLs
One of the most significant benefits of using SST with Next.js is the elimination of hardcoded URLs and environment-specific configurations. Your application code doesn't need to know whether it's running in development, staging, or production. SST automatically provides the correct service endpoints for each environment.
This environment-agnostic approach simplifies the deployment pipeline significantly. Since there are no environment-specific URLs to manage, your deployment process becomes more reliable and less error-prone. The same codebase works across all environments without modification. Traditional approaches require managing multiple configuration files or environment variables for different stages. SST resources eliminate this complexity by providing a unified interface to your infrastructure.
Words by Aneesah Khan (Software Engineer)