Posted on

How to Deploy a Simple Redis Caching App Built With Next.js and TailwindCSS to Netlify in 5 Minutes

Netlify is a popular static site hosting serverless platform. It is a popular way to build, deploy, and scale modern web applications to be more scalable and secure.

Netlify helps developers to launch websites and campaigns in minutes with no fuss. Netlify is built primarily for JAMstack sites, which unify JavaScript and APIs to allow applications that are well suited for both developers and content editors.

Posted on

Lessons Learned Moving From On-Prem to Cloud Native

Recently, I came across a sample e-commerce application that demonstrates how to use Next.js, GraphQL engine, Postgres, and a few other frameworks to build a modern web application. The application supports basic e-commerce capabilities such as product inventory and order management, recommendation system, and checkout function. This made me curious as to how much effort it would take to turn this application from an on-prem to a cloud-native solution.

The original architecture for this sample app looked like the below diagram. You can start the whole setup in a few minutes following this guide.

Posted on

A Guide to the Next JS Framework

Next.js is a framework extensively used by TikTok, Twitch mobile, Nike, IGN, PlayStation, Marvel, and many others. It offers all the functionality we need to deploy our application in production, with a hybrid system with static pages and server-side rendered (SSR) pages. It has support for Typescript and can be deployed without having to configure anything.

SSR Benefits (Next.js)

  • Performance
  • Isomorphic: Works on both server and client (browser)
  • Build: Next.js in the build retrieves the necessary data and ejects HTML with React components.
  • Static export: Compile static files to be able to upload to the server
  • 0 config (No need to configure anything to deploy Next, however it has a very extensible config)
  • Api routes
  • Deploy with Vercel
  • Next head: To modify the head part of the page to improve the SEO
  • Typescript support
  • Environment variables are used in the browser code, not just server code.
  • Fast Refresh: New experience of hot reloading in React components
  • Code splitting: loads chunk corresponding to the page path

Comparison With Gatsby

Gatsby is primarily used for building websites that generate static HTML content and web pages that have a fixed or predictable number of pages and stable content. An example might be an e-commerce site that has only 50 products available for sale.