August 3, 2021 Smashing Newsletter: Issue #312
This newsletter issue was sent out to 178,702 subscribers on Tuesday, August 3, 2021.
Editorial
Gone are the days when client-side rendering was seen as an ultimate answer to everything. Performance and SEO issues came along, just like the hassle to set up all the wonders of modern development: code splitting, routing, TypeScript support, Sass, CSS-in-JS, and routing. With new kids on the block, Next.js and Gatsby being the most popular of them, the developer’s experience has changed for good.
Now, we don’t have to set up all the fancy development features manually, and we don’t have to worry about how to build SSR for some pages while using a static generator for the others. Next.js just takes care of it all automatically. So no wonder that many developers have been moving to Next.js.
In today’s newsletter, let’s see what it’s all about — along with useful tools and guides around Next.js. We also have a free online workshop by Nick Jesus on How to Build Content-Rich eCommerce Sites with Next.js and the Jamstack, which will walk you through how to create fast, reliable, and content-rich Jamstack sites using Next.js, Netlify, Stripe, and Prismic.
— Vitaly (@smashingmag)
Today’s newsletter is sponsored by Netlify, the best platform for frontend teams to build, run and scale modern web applications. Netlify provides native support for all popular Jamstack frameworks, including Next.js, Gatsby, and Nuxt. Get started for free, and easily manage multiple projects and integrations in one platform as you grow.
1. Handy Next.js Boilerplates
Boilerplates help us set up our projects faster, and get to work immediately. And, of course, it’s not any different when it comes to Next.js. If you have a blog you want to base on Next.js, the Next.js Blog Boilerplate could be for you. It gets by with not much code, is SEO-friendly, and production-ready. Among the features you’ll find syntax highlighting with Prism.js, SEO metadata and Open Graph tags, JSON-LD for richer indexing, pagination, and Markdown support. A free minimalist blog theme is included, too.
Another handy boilerplate that reduces the configuration of your project and focuses on best practices is the React Next Boilerplate. It relies on more than ten popular libraries to bring you some mighty features: redux-saga, for example, makes application side effects easier to manage, redux-saga-routines is useful for any kind of async actions, and @testing-library/react encourages good testing practices. For more Next.js boilerplates be sure to also check out the overview that Ankit Jain compiled. (cm)
2. Making The Move To Next.js
Having a reliable architecture to back website performance is crucial — especially with Google pushing Core Web Vitals as a ranking factor. But how do you tackle the challenge in practice? Especially when you’re dealing with a big website? Thom Krupa’s case study gives valuable insights into moving Backlinko, a site that had more than 450 static posts and pages, dozens of different landing pages and post templates, thousands of CSS lines, and more than 30,000 comments, to headless WordPress and Next.js.
Another interesting case study about using Next.js to improve loading times and Web Vitals comes from Liran Cohen. He shows how they used Next.js to reduce HTML payload on Bookaway’s landing pages. The benefits of the process: creating improved architecture and code organization, making it easy for Google to index tens of thousands of landing pages, and serving much fewer bytes to the user. (cm)
3. Learn To Harness The Power Of Next.js
Are you new to Next.js? Then Flavio Copes’ Next.js handbook will help you quickly get familiar with how it works. Covering everything from the main features to debugging techniques, prefetching, and server-side rendering, the handbook is ideal if you have zero to little knowledge of Next.js or if you have used React in the past and want to dive deeper into its ecosystem. You can read the handbook online for free or download the PDF, ePUB, and Kindle versions once you’ve subscribed to Flavio’s newsletter.
If you plan to build a Next.js application on the Jamstack, the experts at Netlify have got your back. They published a complete guide to deploying Next.js to the Jamstack (email is required) to help you build a strategy that meets your business requirements and makes the most of Next.js by taking advantage of the latest tools and best practices in the Jamstack ecosystem.
You’ll learn why Next.js is so popular, what aspects front-end developers need to consider, and how to use it to build large-scale and dynamic applications. The case studies, resources, code snippets, and starter projects in the book make it a practical companion on your Next.js adventures. (cm)
4. Upcoming Front-End & UX Workshops
Are you up for a free online workshop? Nick Jesus will be running How to Build Content-Rich eCommerce Sites with Next.js and the Jamstack, which will walk you through how to create fast, reliable, and content-rich Jamstack sites using Next.js, Netlify, Stripe, and Prismic.
Each and every workshop has been a truly smashing experience with wonderful folks from all over the world. There are still some early-birds left, with a lil’ friendly discount. Perhaps you’d like to join us and recommend to others — just sayin’! ;-)
5. Improve Page Load Performance With Granular Chunking
With version 4, webpack introduced the SplitChunksPlugin. It creates multiple split chunks on a number of conditions to prevent fetching duplicate code across multiple routes. However, frameworks like Next.js and Gatsby still follow a “single-commons” approach to chunk splitting that could affect page load performance negatively. Granular chunking solves the issue. In his article on web.dev, Houssein Djirdeh explains everything you need to know about the strategy.
As Houssein explains, granular chunking has two main benefits: Emitting multiple shared chunks instead of a single one minimizes the amount of unneeded and duplicate code for any entry point, resulting in improved page load times.
The fact that large libraries and framework dependencies are split into separate chunks also reduces the troubles with cache invalidation and improves caching during navigations. And even if you don’t use Next.js, Gatsby, or even webpack, considering your application’s chunking strategy is always a good idea, as the article shows. (cm)
6. Next.js Snippets
As you are building your Next.js application, wouldn’t it be useful to have a few Next.js snippets and functions ready for you at all times? Next.js snippets for VS Code includes a dozen of snippets for you to use right away: from page initialization snippets to imported components.
If you’re looking for a larger extensions pack, Next.js Developer Extensions Pack bundles dozens of fantastic extensions (not only Next.js-specific) in one place, available with just one click. And if you need more resources around Next.js, Awesome Next.js is a curated list of books, videos, articles, boilerplates and extensions for Next.js — along with newsletters and videos for you to get started. (vf)
7. Next.js Video Courses
Sometimes it’s difficult to see how to start learning something from scratch. That’s where video courses and video tutorials can help. If you’d like to dive deep into Next.js, Ali Spittel’s A Beginner’s Guide to Next.js (22mins), Kapehe’s Next.js for Beginners (2:5h) and Maximilian Schwarzmüller’s Next.js Crash Course for Beginners 2021 (3h) are good free videos to start with.
If you need something that goes deeper, Lee Robinson’s Mastering Next.js is another free video course for building static and server-side rendered applications with Next.js and React (with a code repository of what you are going to build). Plus, there is also Atila Fassina’s All About Next.js video course and Remy Sharp’s Universal JavaScript with Next.js which are worth looking into. (vf)
That’s All, Folks!
Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!
This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.