Next.js is the fastest-growing framework for Jamstack developers. With a compelling developer experience, it’s an emerging choice for delivering customer-facing sites and apps. Last week, Netlify hosted “Architecting with Next.js,” a half-day event highlighting business teams using Next.js in production. We saw architecture deep dives, best practices and challenges.
Missed the event? We’ve got you covered! All videos are available below.
Get the Guide: Deploying Next.js on the Jamstack
Next.js Architecture for Common Solutions
Presented by Chris Hannaby, Netlify
While there are a lot of universal best practices for building with Next.js, understanding how to choose which tools to use for certain tasks—like when to choose getStaticProps vs. getStaticPaths—can get complicated. In this video, Netlify Senior Solutions Engineer Chris Hannaby helps us navigate those tools, and walks us through important things teams need to consider when they’re starting a new project with Next.js.\ \ The talk covers common architectural patterns with Next.js. Whether you’re developing a large e-commerce store, relaunching your company marketing site, or pulling in third-party data, you’ll learn how to use the right data fetching patterns for your pages. Chris also covers best practices for integrating with a CMS and other performance tips that will keep your Next.js site lightning-fast.
Related resource: Get Faster Builds for Large Sites on Netlify with On-demand Builders
Building with Next.js
Presenters: Cassidy Williams (Netlify) and Salma Alam-Naylor (Contentful)
In this fireside chat, Cassidy William of Netlify and Salma Alam-Naylor of Contentful talk about the performance benefits and pitfalls of Next.js, and how developers can make the most of the framework. Next.js has a lot of options when it comes to data-fetching methods, which can be both a blessing and a curse. Learn about how to best think about Next.js data-fetching methods like incremental static regeneration to build performant sites.
Cassidy and Salma also cover why they personally use Next.js for projects, the best way to style a Next.js app, and whether anyone’s still using the phrase “surf the web.”
Related resource: Next.js from the Ground Up - Jamstack Explorers
How Symend is Boosting Customer Engagement with Server-Driven UI and Next.js
Presenter: Eric Chernuka, Symend
How do you make the most of the Jamstack when prerendering content isn’t an option? With Server-Driven UI, powered by Next.js!
In this talk Eric Chernuka, Principal Software Developer at Symend, presents the case for a Server-Driven UI (SDUI). Using the core Jamstack principles of prerendering and decoupling, as well as the tools of their choice like Netlify and Next.js, Eric’s team was able to reduce enew client onboarding costs by 85% by automating landing page design and creation.
Eric’s team needed a way to build lots of landing pages, without engineering assistance. Symend uses behavioral science and data-driven insights to help companies like major financial institutions and telecom providers empower their own customers to self-serve overdue bills before they turn over to collections. In order to provide customers with specific information, they need landing pages.
They knew they wanted server-side rendering capabilities of Next.js, but hosted on Netlify’s powerful and developer-friendly platform. In this video, you’ll learn how Symend used the next-on-netlify npm package to get the performance benefits of rendering at the edge, while using the serverless platform of their choice.
Related Resource: Try the new Essential Next.js plugin, now with auto-install!
Migrating LiveChat Platform docs from Gatsby to Next.js
Presenters: Aleksandra Kacperczyk and Jakub Sikora, LiveChat
Maintaining a large content hub comes with its limitations. For LiveChat’s documentation team, the limitation was an increasingly long build time. In this talk, Aleksandra Kacperczyk and Jakub Sikora of LiveChat walk you through how their team reduced their documentation pages’ build times from 14 minutes to 5.
The talk covers their journey from Gatsby to Next.js, why the team decided to migrate as well as technical details behind the process. LiveChat also shares what surprised them along the way, including seeing improved Lighthouse scores, with no additional optimization.
Related Resource: Learn About the Better, Faster Backlinko - Next.js and Netlify
