DISCLAIMER: This might not be the most well-written article since I haven't written in a while and I just wanted to get back to writing with a short article about my experience of the day, so sorry about that

I previously used this repository for my shortlinks, but it looks like airtable recently moved away from API Keys to Permanent Access Tokens. So, I thought why not just take out the functionality from this and use it in my personal website itself so that whenever I go to https://kavin.me/[something], I could redirect to the target link if it exists on the airtable base.

For people who don't know the backstory of my website, it's a terminal themed website and was originally made with vanilla JS but it soon got very hard to maintain. So, I moved it to NextJS in the pre-app router days by just copy pasting things and somehow made it work (it's not the best codebase because of this)

To implement the desired shortlink functionality, I wanted to add a catch-all API route on /. This was a bit tricky in Next.js 12, as API routes only existed within the api directory. While it was possible to use getServerSideProps in other locations, it felt like a hack. So, I decided to upgrade to the new app router, hoping it would simplify the process.

I wasn't wrong because it was amazingly easy to upgrade. I followed this guide to just install the latest dependencies. Then, I:

1. Created the app directory

2. Created a app/layout.js file

3. Copy pasted the previous index.js into app/page.js

4. Marked a few of the files inside the components directory to "use client"

And just like that, the upgrade was complete!

Of course, I understand that this process won't be as simple for most projects, especially those with more complexities and pages. The previous data fetching method was also quite different from the new approach using React Server Components. However, the ability to work concurrently with the pages and app directories allows for incremental changes. This means you can gradually adopt the newest features without causing significant disruption to your application.

I loved the experience moving to the App Router and it's something which I prefer using over the pages format.