Next.js 13

Next.js 13 was announced at Next.js Conf a couple days ago, and it’s Very Cool. There are a few flagship new features, like app layouts and OG Image generation, along with a new build system called Turbopack, along with a boatload of micro-optimisations to make your React application absolutely fly. The byline on the blog post is a real who’s-who of JavaScript framework royalty, and I’m glad that we’ve got some of the cleverest folks on the internet working on pushing the envelope.

This wouldn’t be a hand-wringing Internet Tech Thought-Piece without a big but, though, so: BUT:

I can’t help but wonder if all of this work to shave seconds and milliseconds off build times, to batch state updates and push logic and data from the server to the client and back to the server again isn’t maybe forgiving egregious abuse of JavaScript in the browser just a little bit.

I get that the React team (and the Next.js team, if there’s still a meaningful difference) are architecting a Pit of Success—but there’s a fine line between making the right thing easy and making the wrong thing feel right. Speaking from experience, writing crummy application code and relying on Next.js to optimise my mistakes away was the simplest approach to building my old website. Next.js makes it so easy!

Like here’s an example: React now overwrites the global fetch() browser API. Here’s the code that does it. They do this so that Next.js can do a bunch of caching magic behind the scenes—magic like automatically deduplicating requests for the same data. Setting aside for a moment the ickiness of overwriting global objects, this encourages developers to ignore the obvious code smell of multiple identical requests being triggered from different components. Deduplicating requests should be the responsibility of the application design, not a black box feature of the framework.

(Which is to say nothing of Next.js 13’s new baseline. There’s a certain amount of framework code shipped on every request just to make things work, and it’s gone up from Next.js 12 to 13. But 12 was no slouch, either: why does Raycast’s homepage (which is ostensibly just images and text) ship 200KB of JavaScript to my browser? What’s it doing?)