https://csx-js.vercel.app

Nike CX Blog / Next.js & Emotion Demo

After months of harping my colleagues about Next.js and Emotion with limited success, understanding the difficulty of motivating a group of developers to change a working formula, I realized that talk only goes so far: let’s see it. So I developed this Next.js application in hopes of exhibiting the full capabilities and dramatic performance enhancements of Emotion, emphasizing the vastly improved developer experience, and, ultimately, the benefit to the user’s experience, and used it as a reference point in delivering a CSS-in-JS presentation to my colleagues, managers, and directors.

This site features server-side-rendering (SSR), on-the-fly image optimization, and responsive styling with Emotion. It achieves Google Lighthouse scores as follows:

First Contentful Paint

0.4 s

Speed Index

0.5 s

Largest Contentful Paint

0.6 s

Time to Interactive

0.4 s

Total Blocking Time

0 ms

Cumulative Layout Shift

0