# Migrating my side project from CRA to Next.js

It's a beautiful sunny day, birds are chirping, your side project is running seamlessly...

![Beautiful Day](https://media0.giphy.com/media/94OPiy03NXCiQ/200.gif align="center")

but then...... you get a **$5.90** bill payment reminder for the nth time due to a s3 bucket you made on DigitalOcean Spaces that merely has 500MB data.

![Simposons Pay](https://media3.giphy.com/media/3orifboWZvOhWnYRvq/giphy.gif align="center")

That's it. You have had enough. It doesn't make sense to pay at all for such a small storage. You got to put all your assets somewhere else. But before that let's have a little flashback :-

![Elsa flashback](https://i.gifer.com/GBHT.gif align="center")

So more than a year ago, I participated in a hackathon organised by dev.to in collaboration with DigitalOcean. We had to make an app that has to be deployed on DigitalOcean's App Platform. So I made [animeccha.com](https://www.animeccha.com) which is documented as a series of blog posts starting [here](https://blog.lakbychance.com/building-animeccha-prologue). The images being served are powered by [imagekit.io](imagekit.io), the deployment by DO's App Platform and storage of those images in s3 bucket in DO's Space (this was free for starting 2-3 months due to $100 credit you get as free trial).

Now back to the present :-

![Adam Project](https://64.media.tumblr.com/8a0180ed6745d976fc2917a029bc0f5b/9f5099bd17bc9ed7-8e/s540x810/02288ff2efd1ab08c46fb3025f3bfa794d35fde3.gifv align="center")

My Image transformation was already powered by Imagekit but the storage was in a s3 bucket far far away (well not really, they have edge CDNs). So, I deleted the s3 bucket and just used the [media library](https://docs.imagekit.io/media-library/overview) given by Imagekit as part of free plan with 20GB of monthly BANDWITH!!!. Lol should have done that in the first place.

![idiot Gordon](https://media0.giphy.com/media/3o85xnoIXebk3xYx4Q/200.gif align="center")

So just by switching to it, I started saving $5.90 a month. Srsly, why was I even paying. Such laziness, much wow. But I did one more thing that was not required at all. I mistakenly also deleted my App Platform deployment so [animeccha.com](animeccha.com) was now a template site of L'ORÉAL Products. No srsly, that's what my domain vendor thought of showing as a fallback.

![Loreal paris](https://media0.giphy.com/media/OFN4Z5MWcU4E/giphy.gif align="center")

Anyhow, I decided that my deployment platform should also shift and I chose Vercel because I have already used their services and find the setup relatively easy. As this project also has it's custom domain - **animeccha.com**, I had to switch my name servers from DigitalOcean's to Vercel's in my domain's DNS records. Cool the site was now up and running on Vercel, everything is back to normal.

![everything is normal](https://c.tenor.com/tlfog7uiZxcAAAAC/lifes-getting-back-to-normal-back-to-normal.gif align="center")

But but....the developer urge to go further.

My App deals with images a lot and being a CSR (client side rendering) web app, the image loading even with placeholders wasn't the best UX. This is something I had in mind for long and now that I gained some experience in Next.js from my job (btw I work [@Hashnode](https://engineering.hashnode.com)), I thought of migrating the whole thing to it and take advantage of their sweet [Image component](https://nextjs.org/docs/api-reference/next/image).

Their official docs have a great [guide](https://nextjs.org/docs/migrating/from-create-react-app) to do so and I followed it step by side. TL;DR - Getting rid of `react-scripts`, `react-router-dom` and installing `next` and updating `package.json` scripts. Also taking advantage of their `pages` route structure for flexible routing.

My old routes:-

* `/home` - Landing page
    
* `/anime/:anime` - Specific Anime Page
    
* `/anime/:anime/:montage` - Specific Montage of that Anime.
    

My new routes:-

* `/` - Landing page
    
* `/:anime` - Specific Anime Page
    
* `/:anime/:montage` - Specific Montage Page of that Anime.
    

The new Next.js powered routes made much more sense. `/` and `/:anime` got transformed to purely SSR pages powered by `getServerSideProps` and `/:anime/:montage` loaded the whole `Montage` component dynamically on client side since it required a lot of interaction with browser APIs (probably more time there and something else could be worked out but it's f9 for now).

And while this migration was happening, I realised something. I found modifying my **CSS Modules** powered styling less flexible now that I have used [Tailwind](https://tailwindcss.com/) at work. So yes I installed tailwind following this [guide](https://tailwindcss.com/docs/guides/nextjs) and changed most of my CSS to it except the `Montage` component since it had more moving parts and I wanted to keep them intact.

With all this, I deployed my changes in a new branch and raised a [PR](https://github.com/lakbychance/animeccha/pull/1) to the main one.

![Merge Chandler](https://thumbs.gfycat.com/CompleteMeatyKittiwake-max-1mb.gif align="center")

With two-three failing deployments, due to typescript errors and the fact that I forget to tell Vercel that what I am deploying is not a CRA project but a Next.js one, the project was finally live with much better UX.

But but....there could be

![Agent Smith More](https://thumbs.gfycat.com/AnchoredScratchyDikkops-size_restricted.gif align="center")

I also realised that both my `/` and `/:anime` pages are static and don't rely on server data. It was time to let them be treated likewise as well. Enter `getStaticProps` and `getStaticPaths` as part of SSG feature of Next.js. So I updated both the pages accordingly replacing `getServerSideProps` with the above functions and though not as such a visual difference, I somehow felt at ease now.

![inner peace](https://c.tenor.com/nIlCrtCOSi4AAAAC/master-oogway-kung-fu-panda.gif align="center")

This was also my first time making efforts to migrate an existing **side project**. Though it's a very simple one and really doesn't have any customers and what not, refactoring it to make give a superior UX (even just to me) was a nice experience.

### Thank you for your time :D