Why Next 13.4 matters
With Next 13.4, the App Router is finally stable. Pair Next.js with Tailwind CSS and Sanity CMS and you've got the stack we now reach for on every new build. In this post, we'll look at what the integration actually gives you.
The dynamic... trio: Next.js, Tailwind CSS, and Sanity
A match made in web development heaven
Next.js is the React framework we build everything on. It renders on the server or the client as each page demands, with static site generation and server-side rendering both on the table.
Tailwind CSS is a utility-first CSS framework. Its ready-to-use utility classes let you prototype and build responsive interfaces without ever leaving your markup.
Then add Sanity CMS. It gives you a flexible editing environment, real-time collaboration, and precise content querying, and it becomes the content backend for the whole app.
The three cover each other's gaps: Next.js handles rendering and routing, Tailwind keeps styling in the markup, and Sanity owns the content. You spend your time on the product instead of the wiring.
What's new in Next 13.4
The stable App Router in Next 13.4 brings a few additions worth knowing about:
App routing
The App Router is now stable. Navigation between pages happens client-side after the initial load, so moving around a site feels instant rather than triggering a full page reload each time.
Performance
Next 13.4 brings faster page loads and better responsiveness out of the box, without you touching a config file.
Code splitting and lazy loading
Gone are the days of loading bulky JavaScript bundles upfront. The router splits code per route and lazy-loads it, so the browser only downloads what the current page needs.
The page-sized elephant in the room
If you're anything like our founder - Jono, you're the kind of person to live safely. You know the type: doesn't run with scissors, changes the smoke alarm batteries, all that responsible stuff.
Well, the good news is, that even though this is the de-facto pattern to build future apps, the old /page style directory will still work perfectly even in the latest version of Next.js. Let me reassure you that we have seen a lot of change in the frontend world over the many years we've been kicking about, and something we cannot understate, is how well Next.js/Vercel ensures every update is backwards compatible, meaning your site will last long into the future, even if you don't decide to optimise it and move to this new method of fetching data.
No spam, only good stuff
Subscribe, for more hot takes
Integrating Sanity CMS
Content creation and management
Sanity's content modeling is flexible enough to mirror however your project is actually structured. Editors work in the Studio, developers query the Content Lake, and neither blocks the other.
Real-time collaboration and version control
Multiple people can work on the same content simultaneously, and every change is tracked. You can compare revisions and roll back when someone publishes the wrong thing.
Click, edit, done: visual editing with Sanity and Vercel
Visual Editing, powered by Sanity and Vercel, lets you update content directly from your Vercel preview deployment. Click the section you want to change and you land on the exact field in Sanity Studio. Change it once and it updates everywhere it's referenced, with no front-end code changes.
The developer experience
Rapid prototyping with Tailwind CSS
Tailwind's utility classes let you iterate on a design without writing custom CSS, which makes exploring layout options fast and cheap.
Simpler styling with Tailwind CSS
No more tangled CSS files and invented class names. The styling lives on the element it styles, so you can read a component and know exactly how it renders.
Developer experience with Next.js
Next.js ships hot module replacement, automatic code reloading, and error reporting that points at the actual problem. You iterate quickly and catch mistakes early.
What I wish I would have known about Tailwind earlier
It's these two lines, add them into your Visual Studio code, and you're in for a much nicer time when working with Tailwind. It wraps after 80 characters, no matter the screen size, making it significantly easier to read for any horizonta-phobes such as myself.
Conclusion
Next 13.4's stable App Router, Tailwind's utility-first styling, and Sanity's content tooling have earned their place in our default stack. If you're starting a new build, this combination is hard to argue with.