I wanted to upgrade Snowmiku.net aggregator for the 2024 design contest. The goal was still the same: create the fastest and most user-friendly way to browse entries in the yearly Snow Miku design contests. Since I had recent good experiences of migrating this portfolio to next.js, I decided to do the same thing with Snowmiku.net. I had updated the site to do routing with React router and state managment with plain React Hooks and migrating the front-end to next.js was surprisingly painless. I intended to keep the layout pretty much the same, still based on Bulma framework, but I've polished few bits here and there, such as showing the the theme of the selected year.

The bigger migration was on the backend. Previously, the backend was written on Python 3 and I had to migrate it to next.js's TypeScript. The biggest problem with the old version was the slow page changes, so I took backend performance as my main goal on this renewal. Since the new backend is serverless, the Piapro results are cached in CloudFlare R2 and on top of that, next.js uses Incremental Static Regeneration to cache page results. I created a skeleton loader to prevent cumulative layout shift (CLS), but the users rarely see it because a cached page is almost always available. ISR can result in old contentent occosionally served to users, but that's only really noticeable when the design contest is on.

See the service live: https://snowmiku.net. All code in github: https://github.com/joonamo/snowmiku-next/

Technologies used:

• React
• next.js
• Vercel
• TypeScript
• Bulma
• CloudFlare R2