☯️ Next.js vs the world
The best developer tools are no longer building APIs; they're building full-stack components.
I've been building websites since I was thirteen. My first was paulsite.net, a cringy flash games website. It was my first foray into internet entrepreneurship, wholly motivated by my desire to waste time in class. Sorry, Mom.
Over a decade later, the way developers build web applications (aka websites) has changed quite a bit. There's still HTML, but now it's usually generated by some library like React. "Deploying your code" no longer means uploading files to an FTP server but pushing it to Vercel.
And things continue to change! Every few years, there's a new favorite web framework. I've built things using Laravel (PHP), Rails (Ruby), Spring (Java), Django (Python), and more! Each one has solved my problems better than the last.
Reflecting on that has left me wondering, "What's the next paradigm shift for web developers?" After watching the Reactathon and Vercel conferences last week, I saw the future and it’s written in Typescript.
The dominance of Next.js and the blending of frontend and backend are changing how web developers build software. This is incredibly meaningful for startups that sell to developers and offers interesting opportunities to create new solutions for the changing infrastructure and application layers.
It’s an exciting time to be a web developer, so let’s dive in!
The Modern Web Developer
Modern web developers don't want to think about infrastructure; their applications should deploy quickly and scale easily. They want their code to be bug-free, so they use Typescript for the compile-time type safety and a monorepo so they can share types across their frontend and backend. They want to use React because it's the easiest way to build frontends with reusable components and complex state.
If that describes you, you (along with a million other developers) likely use Next.js, a popular framework maintained (and commonly deployed) by Vercel.
The combination of Typescript + React + Next.js has become extremely popular in the past year. React contributors have 300k+ followers on Twitter, and web dev Youtubers have over one million subscribers. Jack McCloy shared an insight: "Your choice of tools represents who you are." That feels so right, and the T3 stack is cool. Vercel has done a great job building a community around Next.js, which has benefitted it with viral adoption.
Next.js has a few key advantages that make it even more compelling for the modern web developer.
Javascript is the programming language of the web, and with Next.js, you get to use that same language everywhere. Five years ago, backend developers and frontend developers spoke very different languages, but now it's the same. The same developer can now work on all parts of the stack. That’s huge.
Furthermore, Next.js makes it easy to work between the front and backend in several ways. With the App Router, you can create APIs alongside your components, allowing a GET /memos request to serve a webpage, while a POST /memos can be handled by an API.
Most importantly, Next.js 13.4 just added Server Actions, a new interface that enables developers to securely write backend code directly in their frontend.
This might seem like a small change, but symbolically it’s massive. Now, the only difference between frontend and backend is where the code is run, no longer does it depend on what language or file the code is in.
What does this mean for developer tools?
Often, the hardest part of building a developer tool is getting people to try integrating your tool. It's a high-risk request! Why would I spend all this time integrating your thing when I might not like it?
Developer tools usually capture value by owning a part of your infrastructure. In Stripe's case, they offer an API for payment infrastructure (processing credit card transactions). Oftentimes, they also have some client side UIs to make it easier to integrate their APIs. But connecting the client side UIs to APIs requires glue code that adds complexity and can decrease developer adoption. Developers integrating your tool often need to call your API from their backend (with a secret API key) and then pass the results to their frontend.
By blending the frontend and backend, Next.js and Server Actions makes it easier to colocate that code and reducing the amount of glue code your customers need to write to integrate your product.
Developer tools can now offer turnkey components that come fully integrated into their API. These components lower the integration friction and offer developers a starting point to integrate with a “best-practices” prebuilt component.
For example, Clerk is an authentication platform for web developers. They offer APIs for managing users and enforcing authentication. But more importantly, they provide prebuilt components that automatically integrate with those same APIs. Speaking from first-hand experience, this makes it very easy to integrate Clerk into your application.
I believe more developer tools are going to market in a "frontend first" way, as opposed to their backend first way that we've seen with Twilio/Stripe in the past. We've already seen existing incumbents move towards a "component-esque" strategy (i.e., Stripe Elements).
Emerging Opportunities
There's a significant opportunity for startups to build full-stack component primitives for the Next.js framework. The way I've been thinking about this has been, "What are the parts of my web application I've built that often require work on the frontend and the backend?"
The best components will be the ones where the data from the component can be isolated into a separate store and doesn’t need transactions or joins with the rest of your application.
These web components might also be “solved”, where users have come to expect and love a specific flow (for Stripe their native checkout increases conversion, for Plaid the brand built trust around their flow, etc).
Here are some startups that are paving the way in this area:
Clerk - Authentication
Components:
<LogIn />,<SignUp />,<UserProfile />Infrastructure: User state, Authentication
Frigade - Product Onboarding
Components:
<Checklist />,<Tour />,<Form />,<Announcement />Infrastructure: Customer Lifecycle
UploadThing - File Upload
Components:
<UploadButton />Infrastructure: Files/Storage
Vercel - Images
Components:
<Image />Infrastructure: Image resizing and caching at edge
Additionally, I am excited about some areas but I haven’t seen a pattern match yet. If you’re building one of these, I’d love to chat!
CMS:
Component:
<Content />,<ContentEditor />,<SearchBar />,<Comments />Infrastructure: CMS, Full text search across data/content
I’m still a huge fan of Payload.
Email
Component:
<EmailInput />,<UnsubscribeButton />Infrastructure: Email campaign management
Resend seems the most promising here!
Forms:
Component:
<Form />(and many other<Inputs />)Infrastructure: Database
Shout out TanStack and the TanStack Form!
And more!
Predictions
In the next several years, more code will be written on the frontend but run on the backend. The startups that own the predominant framework, such as Vercel with Next.js, have a compelling advantage.
It's hard for these startups to be good at more than one framework (i.e., Vercel's Python support could be better), which means the startup building the next-gen framework (Qwik?) has the opportunity to be the disrupter.
If you can't own the framework, new startups will need to find a way to own part of the infrastructure. That might mean "owning the users' table" (Clerk) or hosting other infrastructure required outside of the existing solutions (like Inngest).
As the web development landscape evolves with the rise of Next.js, Typescript, and React, the future promises exciting opportunities for startups and developers to create innovative full-stack components and tools, simplifying integration and changing the way we build web applications for the better.
Acknowledgement
George got married this past weekend, and I couldn't be more excited about it. Right now, he and his wife(!) Anne are enjoying their honeymoon in the tropical paradise of Kennebunk, Maine. I'm so excited for them and was honored to be able to attend a truly fantastic wedding. Thank you to the Matelich and Flanigan families for their incredible hospitality. George, it’s been amazing to know you for the past two and a half years. Here’s to many more miles and memos!
Great read and was a pleasure to meet you yesterday!
Fantastic read. Was just diving into next.js last night