S2E4: The journey from From to Next.js w/Judith

This blog post is a summary of the YouTube video above, where Judith and I share the latest developments in building our virtual bookshelf app. Together, we discuss transitioning from React to Next.js, implementing CRUD operations through a service pattern, and how we’re using TypeScript with SuperBase to make our code more reliable and maintainable.

tl;dr Link to this headline

Here’s what we covered in this episode:

• We transitioned from React to Next.js to improve our app’s capabilities.
• CRUD operations were implemented using a service pattern for better organization.
• We used SuperBase to generate TypeScript types, which made database interactions more efficient and debugging easier.

Why We Switched to Next.js Link to this headline

Judith and I started the bookshelf app with React because it was simple and familiar. As the project grew, though, we ran into limitations—particularly around server-side functionality. That’s when we decided to move to Next.js. Its hybrid rendering features and support for server components offered the flexibility we needed.

Of course, moving to Next.js meant rethinking parts of our app. One big change was implementing CRUD operations for managing book data. We adopted a service pattern, which keeps data-fetching logic separate from the UI. This has made our codebase cleaner and easier to maintain.

Separation of Concerns: A Game-Changer Link to this headline

One of our biggest takeaways is how powerful separation of concerns can be. By moving specific logic into services, we’ve not only made debugging easier but also set ourselves up for smoother scaling in the future.

We also had an in-depth discussion about client and server components in Next.js. Understanding where each shines has been critical to getting the most out of the framework. Plus, we’re excited about Actions in Next.js, which will make data manipulations even more efficient.

SuperBase + TypeScript = Development Bliss Link to this headline

Using SuperBase to generate TypeScript types has been a game-changer for us. It ensures that our code is reliable and prevents mistakes when defining database structures.

That said, we found ourselves asking a philosophical question: should we rely entirely on auto-generated types, or stick to custom interfaces when we need more control? It’s something we’ll keep debating as the project evolves.

Debugging during setup was another challenge. Getting the types to work perfectly with our services took time, but it was worth it. The end result is a codebase that’s not just functional but also easier to read and extend.

What’s Next? Link to this headline

Looking ahead, we’ll focus on user-specific data handling and refining the user experience. We’re also paying close attention to feedback from the community—it’s been invaluable as we plan our next steps.