Why I migrated to Next13 & Vercel

Next 13 is the new version of the React-based framework NextJS that now supports React Server Components and changes how it was done previously.

Server Components

Next 13 is the new version of the React-based framework NextJS, which now supports React Server Components. The new version includes a new App directory, that makes it easier to fetch data on the server.

I was most fascinated by the new way Next has chosen to implement the server components of React. Before we used getServerSideProps or getStaticProps to implement server-side rendering in Next.

We can fetch data directly in the component because all components rendered from the App directory are server-rendered as default.

Server components mean better abstractions and more readable code. I like this because now I can get all of my data for a page with one single line of code.

Note that all the code I previously had in getServerSideProps I now moved into getBlogPosts. As hinted, this is nice because it resembles the React way. We get a hook-like state, except we can’t mutate it directly, and you don’t need to call it use-something.

But the thing about server components is that Next now expects all components to be server components. When using a third-party client library, like GSAP, Next expects the components that GSAP brings to be server-side, meaning we don't have a DOM. So I had to wrap my GSAP components in a "use client" wrapper component for Next to accept the components, only to be used on the client. Otherwise, I would get an error for not using "use client".

Next’s implementation of React Server Components also opens the door for streaming. Streaming of data, that can progressively render and incrementally create your UI.

You can do this with the help of Server components and nested layouts.
In Next13, we now have the separation of Client and Server components.

This means you have to spend extra time managing your components. You can create client components in a server-rendered layout, but you need to declare your file with "use client", and yes, you need a new file.

Now that you have created your layout, you must create a loading.js file in the same folder. The loading file is the template for what is shown when your content is unavailable, e.g. fetching or waiting for the response.

This is a little confusing, but it's nice when you work with it because you don't need to think further about each specific component and its state. After all, it is handled by loading.js file.

The Edge

Another reason I moved to Next13 is also the ability to use Vercels Edge Runtime. If you haven’t heard about edge functions and edge networks before, the short explanation is that edge functions are like serverless functions that spin up a server when needed.

Compared to the traditional way, you run your server constantly and pay the cost per hour. The serverless functions only spin up when needed and are more cost-effective. At the same time, it can get deployed to the whole world with a few lines of code on the Vercel Edge Network.

“The term “Edge” refers to the orientation toward instant serverless compute environments and not a specific set of locations.” - Vercel.

Edge is the term that tells you that the code runs as close to the user as possible, making it beneficial for improving UX. Something I look forward to exploring further.

Other than that, Next also made minor improvements to DX. Updating the Next/Link and added support for Google/fonts

Saying goodbye to web server

I hosted my website at Hostgator earlier, but my hosting plan was soon running out. I decided to move my hosting to Vercel. This meant saying goodbye to some of the benefits of a classic web server.

• I no longer have an email server for my website, so I had to find a third-party solution for receiving mail (from my contact form).
• I had multiple applications running for showcase, which now has to be hosted at Vercel with a non-custom domain name. Vercel only allows for one application to be hosted per domain.
• I am also saying goodbye to subdomains since that is not a feature of Vercel.

But the benefit of hosting at Vercel is that I get automatic analytics, speed insights with page speeds, and logs. Which I am looking forward to using. It also comes with CI/CD with integration to Github.
When I commit some code to my Github repo, Vercel will detect the change and run the build to deploy the new version.

While updating my website, I also added the CMS Sanity, which I will write a separate blog post about.

References