The Full-Stack World Has Just Changed Forever and It Favors Solopreneurs!
Next.js App Router, weekly tool roundup, and content gems inside!
Vercel had a multi-day shipping event this week.
They not just released Next.js 13.4 but put the cherry on top by announcing game-changing tools and services. 3 different Vercel-native storage options, visual content editing, closer ecosystem collaborations, stable app router, and server actions.
And this is huge for all solopreneurs!
Next.js 13.4 under 60 seconds
With app routing stable, Next.js 13.4 makes it easier than ever to build production-ready apps faster.
For the past few years, Next.js gradually stepped out of being just an SSR React framework, to working towards building a better web, and better developer experience at the same time! That’s why they made handling images, caching, incremental static regeneration, and other traditionally hard stuff easier and more accessible to devs.
Thus, devs are building more performant and easy-to-use webapps.
With the arrival of React 18 and RSCs (React Server Components), the new Next.js features are more than just the natural evolution. It doesn’t include a lot of improvements or new features, but HUGE ones. Stable app routing, server actions, server components, and new Vercel tools, like storage.
What makes server components and actions such a big deal?
React components are traditionally “client components”. After the initial webpage load, and hydrating the DOM (SSR) or rendering to the DOM (CSR), they run in the browser. The only way to access the server is by using API calls.
Server Components, on the other hand, render components (you guessed it) on the server. This reduces the amount of JS sent to the client and lets you access the server directly inside your component.
Isn’t React for websites? Why would I want to do DB stuff in my React component?
Nice question! Here, are a few advantages of server rendering:
Large dependencies now don’t need to reach the client, thus less bloated JS = speed. Example: you can parse data on the server and only send the parsed HTML to the client.
The base JavaScript runtime bundle will never change. So, it’s cacheable. A.k.a. speed and predictability!
Direct data-fetching inside the components. You don’t need to build and maintain a different server. You can talk directly to your data sources similar to Ruby on Rails or PHP. Less complexity, more time to build features.
What’s the deal with app routing?
Building large-scale applications is hard. Especially if you’re working solo or just a few people team.
One of the biggest challenges is managing the complexity of the routing system. Imagine an email client. A navigation bar, a list of emails on the left, an opened email on the right, a footer, action buttons, and so on. Figuring out what to do for each click (where to navigate, how to navigate, what to do if the user opens a specific URL from the browser, etc.) sucks.
App routing in Next.js 13 addresses this by supporting shared layouts, nested routing, loading states, and error handling based on server components. All this, while still keeping the almighty file-system routing working.
And this is huge!
This new router (which can be incrementally adopted through the app/ directory) has an entirely different architecture, built on the foundation of React Server Components and Suspense.
- Next.js Docs
Using App Router & server components, we can finally get rid of the useEffect hell, and use the async and await syntax. Or we can set up Instagram-like subpage navigation using parallel routes and intercepting routes.
And the best part? No new APIs to learn, only new concepts.
KV, Postgres, and Blob. Why?
Speed. Both application speed and development speed.
Data (or content) is the core of every single application on the web. Thus applications are constantly working with reading and writing data. Treating these first-party, in-house, serverless solutions, and moving them to the edge reduces data-transfer time.
Having framework-specific SDKs, and integrated solutions speeds up development time also.
Vercel KV is a durable Redis-based key-value storage running on the edge network. Makes it easy to implement rate-limiting, temporary state, or session management.
Vercel Posgres is a fully managed, highly scalable, fault-tolerant serverless SQL database based on Neon. Using server actions, you can query directly inside React server components.
Vercel Blob is only accessible in closed beta yet, but will possibly be able to eliminate the need for third-party static file storage services. Storing avatars, PDFs, or videos closer to the users is massive!
So again, what makes this good for solo devs?
Next.js 13.4 is not the evolution of Next.js but the true evolution of the front-end getting full-stack.
With RSCs, stable app routing, and in-house services, solo developers and small teams can now build truly production-ready apps even faster than ever before. No need for maintaining servers or connecting services through complicated pipelines. If you know TypeScript, SQL, and React, you’re capable of building fully-featured modern web applications!
Every JS developer should have this in their arsenal. Let me know your experience in the comments if you’ve already tried it.
❓ Weekly Quiz
Let’s have some fun! A new section to test your knowledge.
Curated
👉 4 Developreneur Tools
Clerk.dev for App Router - Clerk is hands-down the best authentication, and user management solution now. And so as they’re working together with the Next.js team, their API just got updated to support app router and middleware.
shadcn/ui - I always bet on copy-paste UI components instead of bloated UI libs. Now, here’s an open-source Tailwind and RadixUI-based one. Just as good as Tailwind UI but uses Radix UI instead of Headless UI, and is fully open-source.
LoFi ATC - Alpha-Bravo-69 on lane 2 ready to take off. Over - I never liked listening to Lo-Fi tunes for a longer period of time. I always got frustrated and/or bored. Say no more! Add real-time air traffic control radio on top of it and it’s super cool.
The Sample - There are millions of fantastic newsletters out there, sometimes by unknown authors. The Sample aims to bring these cool newsletters to your mailbox. Set up your interests and frequency, let the AI learn from your feedback, and read bangers!
👉 Content to binge
MindByte is a weekly newsletter about async & cloud-native organizations. Cloud cost optimization, beta tool features, industry news, and so much more. Michiel (the author) also includes code-snippets, and examples, which makes MindByte an absolute steal! Get your subscription here.
Never install locally ▷ - A video from Coderized (a very underrated creator IMO) about why containers are super helpful. Now my only problem is that I can’t tell my clients “But it works on my machine“ anymore.
100 Days of Dragons & Codes Challenge - The blueprint to learn to code from 0 to full-stack in 100 days I wish I had when I started. But I didn’t, so I teamed up with so others will get a head start in their coding career.
👉 That’s about it
Thank you so much for reading my email! I’d be glad to hear from you if you have any questions, feedback, or comments.
If you enjoyed this post and want more, just below, you’ll find my social media profiles, where I post daily something educational, or something completely pointless.
Please forward this mail to your friends who might benefit from it. Get your subscription here if it was forwarded to you.
Until next time,
David