We went to Next.js Conf on October 25th, 2022, to bring you our key takeaways and thoughts on the future of React and Next!
Keynote, by Delba Oliviera - review by Josh Glantz-Hucks
Updating to new versions always has an edge of anxiety. You never know what new bugs will be encountered, what minor changes will interrupt your workflow, or exactly how much time will need to be invested in the process. Next.js's focus this year on innovating "routing, rendering, & infrastructure" nicely sidestepped at least some of those concerns by allowing an incremental transition. Instead of requiring full commitment to the new app routing directory, devs can instead use both app and pages routing simultaneously and not rush migrating files over to the new directory.
What's improved in the routing, rendering & infrastructure? The new file-based router makes it easier to globally fetch data and co-locate components, styles, and tests, without changing the file-based routing pattern that Next.js is known for. Fetching has been simplified with a hybrid, server-first solution. Plus, by directly tying into React 18's new Concurrent Features, Next.js supports complex, nested layouts that can be separated from individual pages and reused without rerendering.
Introducing Turbopack, by Maia Teegarden - review by Rachel Waynick
Turbopack is Vercel's “built from the ground up” bundler replacement for Webpack. It is still in the alpha stages, so be prepared for a wait.
Staying true to their motto of starting from scratch, Vercel built Turbopack on Rust to promise optimum performance. Turbopack premises itself on the notion of a graph/network of tasks. Each task represents a functional value, and Turbopack tracks the various interactions of their execution to build a relational network. For example, when a change occurs, Turbopack climbs up the tree and reruns only those functions specifically impacted by value change, minimizing what needs to be re-rendered.
By making sure to never run any unnecessary functions, performance improves significantly. I very much look forward to seeing what the Vercel team comes up with for future releases.
Enabling Data at Massive Scale with Next.js, by Tejas Kumar - review by Josh Glantz-Hucks
The best takeaway from Tejas Kumar was one that had been reiterated throughout several other talks: Don't reinvent the wheel. Many established libraries and services have already spent plenty of time working through robust and optimized ways of solving problems. Interestingly, Tejas approached the idea by first live-coding a "poor man's router" and "reinventing the wheel" himself. After a quick categorization of organizational scale into 3 sizes of Seed > Startup > Substantial/Enterprise, he explained how his simple router solution could be sufficient for Seed sized needs, but would eventually struggle for Startups and be entirely insufficient for Enterprise scale. The lesson is that while it is very possible to build a router from scratch, there are existing solutions (like Next.js) that already work at Seed, Startup, and Enterprise scales that should be seriously considered. With a reminder that much like Next.js's own opinionated routing, opinions facilitate productivity.
Also, as Director of Developer Relations at Xata.io, Tejas highly encourages checking out their serverless database as an option for managing and scaling data infrastructure. Admittedly, it is nice to see a type-safe, branchable database focused on the dev experience as another option to avoid reinventing the wheel.
Nested layouts by example, by Sam Selikoff - review by Rachel Waynick
The absolute, most important takeaway from Sam Selikoff's demonstration is that Next.js 13 is magic - it just knows if your page is static. Who needs getStaticProps anyway?
Joking aside, Sam clearly demonstrated how powerful use + Suspense can be for optimal page performance without any fancy gimmicks, special plug-ins, or complicated paradigms. Routing is as simple as folder and file names, and dynamic routing just adds brackets. No need for routing files or path confusion. Hooks can handle server/client-side communication as easily as breathing. In a demonstration Sam effortlessly tweaked when the app initiated fetching, showcasing the increased flexibility in building apps.
My favorite part about nested layouts - abolishing the "which file structure/naming convention is best" conversation. Need a loading page? No problem - loading.js. This page must be a reusable template now. Easy peasy, I'll just change a few things. Since the routing is in the file structure, and the page type is in the name... well, I guess I'll just have to see if this catches on.
Beats in the browser, by Kaho Cheung - review by Josh Glantz-Hucks
In the midst of technical talks, Kaho Cheung brought a fun & whimsical introduction to his own software. Kaho combines music and development through his Reactronica React Library which treats music as a function of state. Using React's Fast Refresh, he live-coded a fast-paced demo of how Reactronica uses components like song, track, instrument, steps & state to create music quickly. Headphones were strongly recommended for the delightful demos performances, wherein Kaho showcased browser-generated music, a virtual "surprise" collaboration, and a midi device connection to the browser. As a musician, Kaho succeeded at portraying the joy and possibilities of musical development. For a dose of inspiration, I highly recommend watching his recorded talk.
Next.js is a backend framework, by Theo Browne - review by Agustin Cassani
The talk opened with a nice explanation of a classic web development process, from DB persistence to end-user usability, with several technologies combined across the process, including PHP, Ruby, Astro, React, Svelte, and Solid. Next.js shines here since it covers everything end-to-end.
Next.js provides great backend features, such as static generation, redirects, middleware, and more. Pretty much everything you can imagine in a serverless world can be done with Next.js: page requests, GraphQL endpoints, and authentication among others. What is also great is that for things that are not serverless-ready, such as web sockets, there is a great community with third-party solutions that can be adapted to Next.js, extending it to cover these tasks as well.
Next.js is where your users and your servers meet; it creates a great React environment for both worlds, both the backend and the frontend.
Optimally Using Third-Party Services with Next.js, by Steve Sewell - review by Andrew Coleburn
Steve’s talk started off with a bit of a paradox of the modern web. Technology is improving, but the web keeps getting slower because the growth of JS bundle sizes is outpacing growth in computing power. With several examples, he made very clear what most of us already know: optimizing your images and your CSS usually has a negligible impact on your performance. Only by optimizing your JavaScript can you have a chance at improving your app’s performance. Client-side JavaScript is the bottleneck and most of it… isn’t yours. It’s coming from third-party modules.
Steve detailed two approaches to solving this issue in Next.js: the Script component, and Edge Middleware.
Of all the strategies available through the Script component, worker is definitely the most exciting. However, it's still in beta, and not stable. With that said, it is worth trying it out to see if any given third-party script is compatible with it.
Other strategies, like after interactive and lazy on load are also effective at decreasing the performance impact of third-party scripts. All of these strategies are ideal for non-render critical content. For render-critical content, Sam demoed edge middleware.
This allows HTML to be rewritten at the edge. This is great for things like A/B testing. Instead of needing multiple round trips to an origin server to serve personalized content, the edge CDN has it right away.
Additionally, while his talk was (refreshingly) not just a sales pitch with a conference talk veneer, Steve showed off some of the capabilities of his Visual CMS Builder.io. Looks to me like a great solution for orgs where non-technical team members need to be able to make changes to an app quickly.
What's new in web UI, by Una Kravets - review by Rachel Waynick
Remember when you needed JavaScript to create an accordion? And JQuery seemed like all the rage with it's .show() and .hide()?
My very first thought when Una Kravets showcased CSS's :has() was "Move over JS, CSS is back at it." We can now select parent elements based on their children or their children's state. This may seem simple until you watch Una handle error states and messages based on the hover state of an invalid form entry. And then an element was styled based on the number of children it had. And then the side nav that animates the page getting pushed to the side? Just put :has() on the root so it looks for an open nav.
:has() is now my new favorite toy.
Sorry, Firefox developers, you are really missing out - not just with :has(), but also container queries. No longer is responsive development jerky with fixed-width media queries (though really, how many users sit there and slide the browser's width back and forth to see the styles jump???). Container queries allow you to really spend FAR too much time twiddling with your website's CSS - every single card, item, button, and icon can now have custom styles based on its container's width. No more funny looking Add to Cart buttons, because your device just happens to be an odd pixel width.
If you have some extra time, definitely check out open-ui.org. They are working hard at raising the bar on built in UI controls. We can escape the 90's software vibes, if we all work together!
Excalidraw - Under the Hood of the Virtual Whiteboard, by Christopher "Vjeux" Chedeau - review by Rachel Waynick
Excalidraw is a vision for what open-source projects can do. It started as a side project for Vjeux (Christopher "Vjeux" Chedeau) prior to the world's mass exodus out of the office. It gained a lot of interest and is really an excellent case study for what open source can do. In essence, Excalidraw allows the user to "draw" and "write" on a "whiteboard" quickly and easily - which allows the user to jot down ideas, flesh out concepts, and generally create a scratchboard, just like a whiteboard. By running shapes through an algorithm to make them look hand-drawn, and specifically using a font that looks exactly like handwriting, it takes removes the pressure of creating a "perfect" or "finished" concept, and makes it easier to brainstorm.
After everything went remote and the world was figuring out the "new normal", being able to collaborate in real-time in a way that "felt the same" was super important. That's when Vjeux hacked together the multiplayer version of Excalidraw's virtual whiteboard. I really appreciated that when collaborating, people tend to avoid working on the same things at the same time. Excalidraw capitalizes on that by introducing a cursor. If you can see somebody else is working on that area (by their cursor) - you can avoid it. However, in true video game fashion, Excalidraw also included RNG to determine which user takes precedence, should they choose to defy collaboration etiquette and mess with it anyway.
The most impressive feature was the security - Excalidraw has a truly impressive consideration for security. Even without authentication, the content users build uses both cryptography and end-to-end encryption. By offering a SaaS version, Excalidraw offers increased collaboration features that pay for continued development on the open-source project that benefits all.
How Next.js and Prisma Make Frontend Developers Fullstack, by Amy Dutton - review by Andrew Coleburn
This was a fun talk, and a really basic demo of how Prisma works in Next.js to connect to a database, as well as leveraging Next.js API routes to build your backend
Amy live built a todo app (classic) with a fully built-out database and backend. My experience in backend development is limited, but I was impressed with how simple it looked to define the schema, execute migrations, and generally interface with your database using Prisma.
Add on tools like Prisma Studio (which would’ve been an absolute dream to have back in my boot camp days), and I’m really excited to use Prisma with Next.js and become a mythical ✨full-stack✨ developer.
Conclusion
There are a lot of exciting new tools and features coming to the Next.js world. We’re especially looking forward to Next.js 13, CSS’s :has(), and Excalidraw!
Previous Post
