--- title: "Lyft's migration to Next.js" publication: "React Status" issue: 218 published_at: "2020-12-09" canonical_url: "https://react.statuscode.com/issues/218" --- Plus a React advent calendar, useAuth 1.0, and more. | #218 — December 9, 2020 [Read on the Web](https://react.statuscode.com/issues/218) 🤭 As next week is the last full week before Christmas, we'll be doing a roundup of the most interesting and newsworthy developments of 2020 before taking our Christmas break – see you then! :-) __ _Peter Cooper and Terence C Gannon, your editors_ React Status Your weekly React news digest, every Wednesday [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1607521167/cvslttxlasvzfwsbfymd.jpg)](https://jake.nyc/words/no-one-ever-got-fired-for-choosing-react/) [No One Ever Got Fired for Choosing React](https://jake.nyc/words/no-one-ever-got-fired-for-choosing-react/) — In a 21st century riff on that [old saying](https://www.ibm.com/ibm/history/ibm100/us/en/icons/personalcomputer/words/) about IBM, the author starts with the goal of building his app without the benefit of _any_ framework. However, in a series of incremental steps he eventually found his way back to the safety of React and its large ecosystem. Jake Lazaroff [Changing Lanes: How Lyft is Migrating 100+ Frontend Microservices to Next.js](https://t.co/ITbNBnhzD2?amp=1) — In story with a similar plot, [Lyft Engineering](https://eng.lyft.com) had rolled their own framework which was proving increasingly burdonsome. This is at least the beginning of the story of their migration to [Next.js](https://nextjs.org) with a dash of their own ‘special sauce’. Josh Callender and Andrew Hao (Lyft Engineering) [![\](https://copm.s3.amazonaws.com/64fb5da9.jpg)](https://frontendmasters.com/courses/production-typescript/?utm_source=newsletter&utm_medium=email&utm_campaign=reactstatus&utm_content=typescript) [New Course: Production-Grade TypeScript](https://frontendmasters.com/courses/production-typescript/?utm_source=newsletter&utm_medium=email&utm_campaign=reactstatus&utm_content=typescript) — Use the TypeScript language at scale to increase the developer experience and productivity of your teams. Learn to manage even the most ambitious TypeScript projects with confidence and ease. Frontend Masters sponsor [React Christmas: A React Advent Calendar](https://react.christmas/2020) — Just in time for Christmas, here's an advent calendar populated not with trinkets or truffles but rather healthy nuggets of React wisdom, tips and tricks. Bekk [WMR: A Tiny All-in-One Development Tool for Modern Web Apps](https://github.com/preactjs/wmr) — From the [Preact](https://preactjs.com/) team (an ultra lightweight React clone_ish_) comes an interesting ‘everything you need in a single box’ tool for putting together JavaScript-powered webapps with bundling, JSX, CSS modules support, and more. Ideal for prototyping. Get started immediately with `npm init wmr projectname` if you dare. Preact [useAuth 1.0: A Simple Way to Add Auth to React Apps](https://github.com/Swizec/useAuth/releases/tag/v1.0.0) — We first mentioned this in August 2019 and it got criticism as it _only_ supported Auth0. With 1.0, Netlify Identity is also added, but implementations for other providers are encouraged. Swizec Teller 📅 [At re:Invent Today, Dec. 9, 1pm PT—Nerd Talk with Lew Cirne](https://virtual.awsevents.com/sponsor/186983463/New_Relic) New Relic sponsor [Inertia: Not Another Framework](https://github.com/inertiajs/inertia) — [Inertia.js](https://inertiajs.com) enables the creation of [SPA](https://en.wikipedia.org/wiki/Single-page_application)s without client-side routing or an API. A fully featured, working [demo](https://demo.inertiajs.com) is provided. Inertia.js [A Look at New JSX Enhancements in React 17](https://blog.bitsrc.io/new-jsx-enhancements-in-react-17-e5f64acbea89) Dilantha Prasanjith 💻 Jobs [Senior Web Developer (Node/ReactJS) - Remote](https://www.komoot.com/jobs/senior-web-developer) — Millions get inspired and plan adventures with our apps. To help us make [komoot.com](https://www.komoot.com) the place to go to plan outdoor adventures, we’re looking for a one of a kind Web Developer to join our team. Komoot [Find Your Next Job Through Vettery](https://www.vettery.com/tech?utm_source=newsletter&utm_medium=cooper-reactstatus&utm_term=tech&utm_content=grouped&utm_campaign=ad-77585) — Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers. Vettery 📘 Tutorials and Stories [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/cnjvlmmjp0tp45hi2jyp.jpg)](https://webup.org/blog/sticky-header-table-with-react-hooks/) [Sticky Table Headers with React Hooks](https://webup.org/blog/sticky-header-table-with-react-hooks/) — For tabular data presentation, [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) is often chosen over the seemingly old-fashioned and much maligned `` element. But the latter can still be a good choice when aided by these techniques. Miroslav Nikolov [Create React Components Using Hygen](https://t.co/tGBi3ERYwg?amp=1) — [Hygen](http://www.hygen.io), a code generator based on [Node.js](https://nodejs.org), can be used to efficiently create React components, as this tutorial and associated [code](https://github.com/manakuro/hygen-example-with-react) illustrates. Manato Kuroda [How to Fetch GraphQL Data in Next.js With Apollo GraphQL](https://www.freecodecamp.org/news/how-to-fetch-graphql-data-in-next-js-with-apollo-graphql/) — _Still_ not quite up to speed with [GraphQL](https://graphql.org)? In his signature style, this walkthrough takes you through a detailed example using [Apollo](https://www.apollographql.com) to show (appropriately) SpaceX launches. Colby Fayock [Render as You Fetch with React Suspense](https://www.telerik.com/blogs/render-as-you-fetch-with-react-suspense?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-blog-suspense-and-data-grid&utm_content=sponsored-link) — The component lets developers build smoother state/page transitions. [See how you can use it for data fetching](https://www.telerik.com/blogs/render-as-you-fetch-with-react-suspense?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-blog-suspense-and-data-grid&utm_content=sponsored-link). Progress KendoReact sponsor [How to Build a Scalable CSS Architecture in React](https://commandlinezen.com/scalable-css-architecture-react/) — CSS can sometimes get forgotten along the way to scaling up and ends up being a mess. The author quickly reviews the options of inline styling, stylesheets, [Tailwind](https://tailwindcss.com) and [CSS-in-JS](https://cssinjs.org) and then proposes his own scalable CSS architecture. Frank Barros [Ten Tips for Structuring a React Native Project](https://dev.to/kadikraman/10-tips-for-structuring-a-react-native-project-k19) — With _so many_ options available to React Native developers, specific suggestions as to which to choose can be a good way to finally get your project started. Kadi Kraman [Building TakeNote, a Notes App for Developers With Github Sync](https://www.taniarascia.com/building-takenote/) — Back in [issue 211](https://react.statuscode.com/issues/211) we featured TakeNote. Now the author walks through the logic behind its creation, the lessons learned from building it and why she eventually decided _not_ to ship it. Tania Rascia 🛠 Code and Tools supported by [![Okta\](https://res.cloudinary.com/cpress/image/upload/v1602154330/de7dtktheistsfpqdem4.png)](https://developer.okta.com/?utm_campaign=newsletter_cooperpress_all_multiple_inc_dev_sponsored-section_null&utm_source=cooperpress&utm_medium=cpc) [react-headroom: Headers Only When Needed](https://github.com/KyleAMathews/react-headroom) — Headers are important: they are the first thing you see on a page. But they outlive their usefulness fairly quickly (and take up valuable screen real estate) so why not tuck them neatly away until they’re needed again? Kyle Mathews [react-responsive: Respond to Your Runtime Environment](https://github.com/contra/react-responsive) — With the explosion of device form factors and capabilities, the need for [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries) is more important than ever. This mature library now also has support for hooks. Eric Schoffstall [![\](https://res.cloudinary.com/cpress/image/upload/v1607517463/sr3uov2h7bhro6jfgbp7.png)](https://github.com/AndrewPrifer/react-three-editable) [React Three Editable: A Visual Editor for react-three-fiber](https://github.com/AndrewPrifer/react-three-editable) — As the CodeSandbox [demo](https://codesandbox.io/s/ide-cream-demo-hcgcd) illustrates, you can now edit your scene on screen without the need for a lot of attendant modifications to your underlying code. Andrew Prifer [Coral: 'Safer, Smarter Discussions'](https://github.com/coralproject/talk) — Not every open source library has the backing of a significant consumer brand like [Vox Media](https://www.voxmedia.com). They thought community commenting for their digital properties was broken so here’s how they fixed it. Vox Media [nextein: A Next.js-Based Static Site Generator](https://github.com/elmasse/nextein) — For simple static sites, take advantage of the power of Next.js by simply using [Markdown](https://daringfireball.net/projects/markdown/). There’s [starter code](https://github.com/elmasse/nextein-starter) to make it easy to get it up and running. Max Fierro **⚡️ Quick Bits:** Libraries where the name (mostly) says it all: - [react-code-view](https://github.com/simonguo/react-code-view) by [Simon Guo](https://github.com/simonguo) - [react-native-modal-popover](https://github.com/doomsower/react-native-modal-popover) by [Doomsower](https://github.com/doomsower) - [story2sketch](https://github.com/chrisvxd/story2sketch) by [Chris Villa](https://github.com/chrisvxd) — Convert Storybook stories into Sketch symbols. - [g2plot-react](https://github.com/open-data-plan/g2plot-react) by [Open Data Plan](https://opd.cool) — [G2Plot](https://g2plot.antv.vision/en) is a responsive charting library. - [monaco-react](https://github.com/suren-atoyan/monaco-react) by [Suren Atoyan](https://twitter.com/suren_at) — As well as being a fantastic little principality in the south of France, [Monaco](https://microsoft.github.io/monaco-editor/) is also the editor component behind VS Code. 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