AWS Amplify, Vercel, and Next.js, a winning trio: A Telco Use Case

In the modern web development landscape, the trio of AWS Amplify, Vercel, and Next.js represents a powerful set of tools that enable developers to build, deploy, and scale web applications efficiently. While each serves a distinct purpose, they often intersect in use, especially when creating and managing modern, serverless web applications. Here’s a breakdown of what each platform offers and how they compare.

AWS Amplify

AWS Amplify is a comprehensive development platform provided by Amazon Web Services (AWS) that simplifies the process of building scalable mobile and web applications. Amplify offers a suite of tools and services that can help with everything from frontend development to backend infrastructure.

Key Features:

• Full-Stack Development: Amplify provides libraries and a command-line interface (CLI) to integrate with various AWS services like GraphQL APIs (via AWS AppSync), authentication (via AWS Cognito), and storage (via S3).
• Hosting: AWS Amplify provides fully managed CI/CD workflows for deploying and hosting static websites and single-page applications.
• Flexibility: Amplify’s modular architecture allows developers to use just the parts they need, whether it’s authentication, analytics, or storage.
• Integration with AWS: It offers seamless integration with the broader AWS ecosystem, providing extensive options for scaling and adding new features.

---

Vercel

Vercel is a cloud platform optimized for frontend frameworks and static sites, offering a seamless developer experience for deploying web applications. It is particularly known for its tight integration with Next.js, a popular React framework.

Key Features:

• Next.js Optimization: As the creator of Next.js, Vercel provides first-class support and optimizations for applications built with this framework.
• Serverless Functions: Vercel enables developers to deploy serverless functions alongside their frontend, making it easier to build dynamic applications.
• Global Edge Network: Vercel’s platform automatically optimizes and serves your application from a global edge network, ensuring low latency and high availability.
• Automatic CI/CD: Vercel offers automatic deployments with every code push, coupled with instant rollbacks, previews, and collaborative features.

---

Next.js

Next.js is a React framework built on top of Node.js, designed for building static and dynamic web applications. It enables features like server-side rendering (SSR), static site generation (SSG), and API routes, making it a powerful tool for developers looking to create modern web applications.

Key Features:

• Server-Side Rendering (SSR): Next.js allows for rendering React pages on the server at request time, improving performance and SEO.
• Static Site Generation (SSG): Developers can pre-render pages at build time, serving them as static assets, which is great for performance and scalability.
• API Routes: Next.js supports building APIs as serverless functions, simplifying the backend work needed for dynamic applications.
• Routing: Built-in routing based on the file system, simplifying navigation within the app.

---

The use-case:

While FelixMobile was on MVP (GatsbyJS, AWS CodeBuild, and S3), we recently overhauled our stack to provide a more robust experience for both customers and developers.

This strategic move was meticulously planned and executed over the past few months. We decided to transition from Gatsby due to several critical factors. Gatsby had become outdated and was no longer supported by the community or their development team ([State Of JavaScript Survey](https://2023.stateofjs.com/en-US/libraries/)). This end-of-life status introduced multiple risks:

1. Cybersecurity Risks: The lack of ongoing security and maintenance patches since Gatsby reached its end-of-life status posed a significant threat. Without these updates, our applications were vulnerable to security breaches and exploits.
2. 2. Cloud Maturity and Infrastructure Performance Risks: Gatsby offered limited options for cloud-native functionality, restricting our ability to leverage modern cloud services and optimize performance. This limitation hindered our growth and scalability efforts.
3. 3. Talent Pool Risks: The scarcity of expertise in Gatsby within the tech market presented a challenge. As Gatsby is no longer popular, finding skilled developers with experience in Gatsby became increasingly difficult. This posed a risk to our ability to address future challenges and innovate effectively.

Given these considerations, replacing Gatsby with NextJS was both prudent and necessary.

To illustrate the immediate benefits of this migration, consider the following KPIs from NewRelic, comparing the ‘Before’ and ‘After’ scenarios:

• Performance Improvements: We observed a significant reduction in page load times and an overall improvement in responsiveness. This enhancement directly contributes to a better user experience and increased satisfaction.
• Enhanced Security: With NextJS, we now have access to regular security updates and maintenance patches, reducing the risk of vulnerabilities and ensuring our applications remain secure.
• Improved Developer Productivity: The transition to NextJS has streamlined our development processes, enabling our team to work more efficiently. Extensive documentation and community support have further facilitated this improvement.
• Scalability and Flexibility: NextJS’s cloud-native capabilities have allowed us to leverage modern cloud services, enhancing our ability to scale and optimize our infrastructure. This flexibility positions us well for future growth and expansion.

The immediate result of the change was visible in the KPIs in NewRelic, especially in LCP , INP and CLS:

Before:

After:

Another significant benefit we reported was the comprehensive end-to-end integration into Contentful. This integration allowed us to streamline our workflow and manage content more effectively. We could take advantage of live previewing the content changes, which was made possible thanks to the advanced capabilities that Vercel delivered in the Next.js Preview Environment (NPE). This feature greatly enhanced our ability to see the impact of our changes in real-time, ensuring a more seamless and efficient content management process.