---
title: "Next.js 12.1 released"
publication: "React Status"
issue: 277
published_at: "2022-02-23"
canonical_url: "https://react.statuscode.com/issues/277"
---

Plus a React e-commerce system, parallex effects, and comparing Gatsby with Next.js. |        

#​277 — February 23, 2022 

[Read on the Web](https://react.statuscode.com/issues/277)   React Status ⚛️ Your weekly React news digest, _every Wednesday_.  

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/aonlyf2imxgp3yay1q3a.jpg)](https://nextjs.org/blog/next-12-1)  

[Next.js 12.1 Released](https://nextjs.org/blog/next-12-1) — Don’t be fooled by the “.1”, this is a big release for the React powered framework. It introduces a beta version of on-demand incremental static regeneration ([ISR](https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration)), now automatically configures Jest for you, and can create smaller, more efficient ‘standalone’ builds of your app for production deployment. 

Vercel   

🏆 [JavaScript to Know for React](https://kentcdodds.com/blog/javascript-to-know-for-react) — A _golden oldie_ we’ve seen doing the rounds again this week. It remains a perfect primer of several key JS features though with examples of features that will help you with React development in particular. 

Kent C Dodds   [![\](https://copm.s3.amazonaws.com/d75f74f6.png)](https://userfront.com/tutorials/react-authentication.html) 

[React Authentication, Simplified](https://userfront.com/tutorials/react-authentication.html) — In this article, we lay out a new approach to authentication (plus access control & SSO) in React applications. 

Userfront sponsor   

[An Introductory Guide to Concurrent Rendering](https://www.chakshunyu.com/blog/an-introductory-guide-to-concurrent-rendering/) — The [upcoming](https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html) React 18 will introduce new [concurrent rendering](https://reactjs.org/docs/concurrent-mode-intro.html#blocking-vs-interruptible-rendering) features. What will this offer and why will you want to use it? 

Chak Shun Yu   

[Security of React Native Libraries: The Bad, the Worse and the Ugly](https://www.cossacklabs.com/blog/react-native-libraries-security/) — A really deep dive into “issues in third party libraries that drastically affect the security of the main application”. These range from official guides which recommend insecure libraries through easily-misused APIs. 

Anastasiia Voitova and Julia Potapenko (Cossack Labs)    

Jobs  

[Fullstack Engineer (Remote, EU Timezones)](https://feather-insurance.com/careers/full-stack-engineer) — We’ve built a product thousands of people love (See [Trustpilot](https://www.trustpilot.com/review/feather-insurance.com) if you don’t believe us). We need your help with Node & TypeScript. 
Feather   

[React Developer at X-Team (Remote)](https://x-team.com/remote-react-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=cooperpress-react&utm_content=react) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more. 
X-Team   

[Work Remotely Forever](https://topt.al/MQcj6W) — When you join Toptal, you get the freedom of freelance with the security of full-time. Take control of your career today. 
Toptal      

[Deploy a React App on GitHub Pages Automatically](https://betterprogramming.pub/deploy-react-app-on-github-pages-automatically-761090d266ba) — Given that you’re likely on GitHub already, why not use [GitHub Pages](https://pages.github.com) as a means of deploying React apps? As the author notes, the workload is low and the price is certainly right (at zero). 

Hanie Asemi   

[Build a Responsive Chat App with Emojis, GIF Support, Edit/Delete Functions, and More](https://getstream.io/maker-account/?utm_source=ReactStatus&utm_medium=Newsletter_Content_Ad&utm_content=Developer&utm_campaign=ReactStatus_Feb2022_MakerAccount) 

Stream sponsor   

[Creating a 'Reading Progress' Bar with React and Tailwind](https://javascript.plainenglish.io/creating-a-read-progress-bar-in-react-and-tailwindcss-34f84435ab79) — Communicating reading progress is just one potential application of this concept. With some adaptation and a data store it should also be possible to track reader engagement—that is, [Medium](https://medium.com)-like stats on how much of the material is _actually_being read. 

Anshuman Bhardwaj   

[Comparing Gatsby and Next.js](https://dev.to/alex_barashkov/comparing-gatsby-and-nextjs-for-website-development-13b7) 
Alex Barashkov  

🛠 Code and Tools 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/yhqtl6ho2stap6lkffdm.jpg)](https://github.com/nolimits4web/atropos)  

[Atropos: Touch-Friendly 3D Parallax Hover Effects](https://github.com/nolimits4web/atropos) — The easiest and fastest way to fool the eye into thinking the screen has somehow developed three-dimensional capabilities (and, admittedly, annoy some users - so be careful) is to use parallex effects as demonstrated on [the project's homepage.](https://atroposjs.com) 

Vladimir Kharlampidi   

[React Storefront: A PWA for e-Commerce That's Already in V9.0](https://github.com/storefront-foundation/react-storefront) — Why wait for Shopify to finish up [Hydrogen](https://hydrogen.shopify.dev) when you can start working with a mature, open-source, React-based e-commerce app right now? 

Storefront Foundation   

[React Motion Router: A Declarative Routing Library for React with Page Transitions and Animations](https://github.com/nxtexe/react-motion-router) — [Try a demo here](https://router.nxtetechnologies.com/). 

Nathan Johnson   

[Heart Switch: A Heart-Shaped Toggle Switch Component for React](https://github.com/anatoliygatt/heart-switch) — A (very) late Valentine’s Day gift for you. 

Anatoliy Gatt   

[Spectacle 9: A React and JSX-Based Presentation Library](https://github.com/FormidableLabs/spectacle) — Got a presentation coming up? Build your decks with JSX, perhaps? 

Formidable    

## ⚡️ Quick Bits:   

[react-click-away-listener](https://github.com/ooade/react-click-away-listener) — Track when the user _leaves_ a component as opposed to when they click on it.   

[flowchart-react](https://www.npmjs.com/package/flowchart-react) — A super simple flowchart designer component.   

[react-text-truncate](https://github.com/ShinyChang/react-text-truncate) — Elegantly truncates multi-line text, as illustrated by their[demo](http://shinychang.github.io/React-Text-Truncate/).   

[react-native-mask-input](https://github.com/CaioQuirinoMedeiros/react-native-mask-input) — Text input with masking for React Native along with support for obfuscating characters.   

[react-native-fs](https://www.npmjs.com/package/react-native-fs) — Access to the device filesystem for React Native.   

[react-native-element-dropdown](https://github.com/hoaphantn7604/react-native-element-dropdown) — A customizable dropdown component as illustrated with their [gif demo](https://github.com/hoaphantn7604/react-native-element-dropdown#demo).           

This issue was curated by Terence C. Gannon and edited by the Cooperpress team. 

A **[Cooperpress](https://cooperpress.com/)** publication. 

[Change your email address](https://react.statuscode.com/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://react.statuscode.com/leave/*|UID|*) 

© Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom