Vercel screwed up (breaking down the Next.js CVE)

By now, you've probably heard about the Next.js security incident. Middleware can effectively be skipped entirely. This is really, really bad, putting hundreds of thousands of Next apps at risk, right? There is a lot of subtlety here that we have to dig into. There's a lot of things Verscell did absolutely wrong, and I am excited to roast them indefinitely for it. But there are other things here that are just fundamentally being misunderstood. And for what it's worth, I've never seen an app that would have been vulnerable to this, despite the fact that I've audited literally hundreds of Nex.js apps. That doesn't mean this is okay, but it does make the characteristics of the exploit so much

more interesting. So, if you want a video that's just going to bash forcell endlessly for bothering to ship Nex.js that's focused on people who don't use it at all, go watch something else. But if you want an actual deep dive figuring out what went wrong, why we're here, what problems led to the outrage and the incident in the first place and how to prevent these things going forward, this is the video to watch. I'm very excited to break all of this down with you. But as Verscell is no longer a sponsor of the channel, someone has to cover the bill. So, we're going to hear a quick word from today's sponsor and then go

right back in. Today's sponsor is one of those products that I really wish I had used for more of my stuff because it would have made my life significantly easier and it solves a ton of problems I have every day. That product is Convex and I could tell you all about how it solves the missing half of your React app, but I'd rather just show you. This is a real codebase using Convex with Nex.js and it's super easy to set up. You might even notice the little Theo Brown in the corner here. That's because it already has O set up too. It's just one of the many things Convex provides for you. Nothing too impressive, right?

Well, let's look at what happens if I open up another window with the same project. I'll send another message and watch it. Automatically appears in both. Even though these are entirely different browsers. They could be different networks, different devices, different anything. As long as they're querying the same data, it gets automatically updated. The code for this must be super complex, right? Well, here's the message list. I use query API messages list. And here I list the messages. Where's the update? Well, if we go to API messages list, which you can commandclick, we go

into this convex folder in our codebase, which has messages ts. And here I have my list function has empty args. We don't pass it anything. and the handler an async function with context and I use that to get messages from the DB order by descending and I take the first 100 and now it just automatically live updates that's all you have to do there is no additional work to trigger the update simply by this query's data

changing convex is smart enough to post and push out an update to all clients that are affected by that change and the result honestly kind of feels like magic not having to do all the work to keep different devices in sync with different states. If I had used this for T3 chat, all of our sync engine problems would be gone. And if this was something that didn't scale, that'd be one thing, but the guys who built Convex are industry experts in scalable data solutions. This stuff will run as far as you'll ever possibly need it to go. They built Dropbox. They know what they're doing. So if you're building a React app that

needs stuff like you know server functions database vector search cron jobs off file management type safety across the wire real-time updates any of these things I am very confident that convex is the best place to get started if it was just me saying it that's one thing but Tanner Lindsley has been telling me to take these guys more seriously and there's no one whose word I hold higher than my own than Tanner Lindsay. So don't take my word for it take his and all the other people who are becoming obsessed with Convex. These guys know what they're doing. Check them out today at soy.link/convex. /convex. So, I have put together a demo app here

to showcase the exploit. There's a couple pieces I want to emphasize. We have two different routes that matter. We have this admin route that has a layout and a page. We have the unauthor route, which just has a page that says you're not supposed to be wherever you're going. And I have this sensitive.ext, this text data that I want to make sure only gets to a user if they're allowed. The middleware is a function that runs between when next starts to process your request and the user who's making that request. So if we diagram this out really quick, the