Rebuilding My Personal Site with Next.js and RSC

After using Gatsby for my personal site for half a decade, I felt it was time to rebuild it from scratch. Gatsby offered several features I appreciated, such as the GraphQL data layer, easy page creation, and static site generation.

However, I also faced some challenges, including outdated content, a broken deployment process, suboptimal data structure for appearances, talks, and workshops, and the desire for a fresh look and feel with updated technologies. Thus, it was the perfect time to start from the ground up.

Framework

As I began the rebuilding process, I considered two frameworks: Remix and Next.js. After experimenting with both, I chose Next.js 13 for my personal website for several reasons:

I wanted to learn more about React Server Components (RSC)
I was intrigued by the new Next.js App Router
Next.js, in combination with Vercel, allowed for quick and easy site setup and deployment

I plan to explore Remix in future projects, as I appreciate its focus on the Web API as a first-class citizen.

React Server Components

My interest in learning about React Server Components was a key factor in choosing Next.js. While experimenting with both frameworks, I attempted to build the early stages of my site without relying on documentation to see how far I could progress. However, I quickly realized I needed to dive deeper into RSC. Some insights I gained include:

Optimizing my React components organization for working with RSC: As I incorporated RSC, I became more mindful of when and where to create React components with hooks and interactivity.
Creating server-rendered components with selective client rehydration.
Safely using API secrets in RSC without exposing them to the client.

Although RSC is still in its early stages, I am excited about having built my entire website using this technology. I am eager to see how it evolves and gains support from various libraries.

Data

For my personal website, I sought a data layer that was easy to work with and that I could envision using for the next five years. I explored several options, eventually settling on the following.

MDX

Several options compatible with the Next.js App Router were available, such as the built-in support for MDX in Next.js and next-mdx-remote. Ultimately, I utilized both tools, primarily for constructing blog content with next-mdx-remote for Markdown data coming from Prisma and built-in MDX for main pages of my site.

Prisma

I selected Prisma to manage the content for talks and workshops, as it provided the flexibility to design and scale my data model. Prisma pairs well with React's cache API for deduping and caching data responses from queries.

Design

Previously, I used Figma for designing my site before starting the development process. However, this time I chose to design directly in the browser with Tailwind CSS, which allowed for quick and easy experimentation with various design elements, such as fonts, layouts, and colors.

I drew inspiration from several projects, including:

I enjoyed tinkering and crafting visually appealing user interfaces and often invest a considerable amount of time refining their appearance.

Moving forward

I am delighted with the outcome of my new site and eagerly anticipate adding more content and features. Additionally, I look forward to deepening my understanding of React Server Components and leveraging their potential to enhance my site's user experience.

The source code of my site is available on GitHub and I love to hear your thoughts on the project!