--- title: "A Next.js template for SaaS apps" publication: "React Status" issue: 400 published_at: "2024-09-18" canonical_url: "https://react.statuscode.com/issues/400" --- Plus a React 19 cheat sheet, why TanStack Router is worth your time, and Astro 5 lands in beta. | #​400 — September 18, 2024 [Read on the Web](https://react.statuscode.com/issues/400) Together with [![WorkOS\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_514,h_98/e_make_transparent/co_white,e_outline:9/tdfxwgk852ui9leli4wm.png)](https://workos.com/?utm_source=reactstatus&utm_medium=newsletter&utm_campaign=q22024) React Status [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/n5legb2iswlj96lrhllc.jpg)](https://www.epicreact.dev/react-19-cheatsheet) [A React 19 Cheat Sheet](https://www.epicreact.dev/react-19-cheatsheet) — From Kent C Dodds, of [Epic React](https://www.epicreact.dev/) fame, comes this part cheat sheet, part succinct reminder of some of the new things you can do in React 19, along with (very) brief code examples. Kent C. Dodds [Next.js SaaS Starter: A Next.js Template for Webapps](https://github.com/leerob/next-saas-starter) — A starter template for building a SaaS-style webapp using Next.js with authentication, Stripe integration, and a dashboard for users. It uses Postgres and Drizzle for the database and UI elements based on [shadcn/ui](https://ui.shadcn.com/) and Tailwind. Lee Robinson (Vercel) [![\](https://copm.s3.amazonaws.com/da394825.png)](https://workos.com/?utm_source=reactstatus&utm_medium=newsletter&utm_campaign=q22024) [WorkOS: Start Selling to Enterprises with Just a Few Lines of Code](https://workos.com/?utm_source=reactstatus&utm_medium=newsletter&utm_campaign=q22024) — WorkOS is a modern identity platform for B2B SaaS. It provides flexible and easy-to-use APIs to integrate SSO, SCIM, and RBAC in minutes. WorkOS is used by hundreds of high-growth startups including Perplexity, Vercel, Drata, & Webflow. WorkOS sponsor [Introducing TanStack Router](https://frontendmasters.com/blog/introducing-tanstack-router/) — [TanStack Router](https://tanstack.com/router/latest) is a powerful and mature type-safe React router aimed at client-side use (though a full-stack option is beginning to appear with [TanStack Start](https://tanstack.com/start/latest)). Adam shows off the essentials with the hope of getting you on board the TanStack train too. Adam Rackis **IN BRIEF:** - [reactR](https://github.com/react-R/reactR) is a project to enable the use of React inside the [R project](https://www.r-project.org/), a language and environment commonly used in statistical computing and technical visualizations. - [Astro 5 is now available in beta form.](https://astro.build/blog/astro-5-beta/) - Vercel has released [Vercel AI SDK 3.3.](https://vercel.com/blog/vercel-ai-sdk-3-3) [A Milestone for TypeScript Performance in TanStack Router](https://tanstack.com/blog/tanstack-router-typescript-performance) — Complex route definitions have historically resulted in sluggish in-editor performance. Luckily, the TanStack team has been doing a _lot_ to improve this. Christopher Horobin (TanStack) [How Infinite Queries Work](https://tkdodo.eu/blog/how-infinite-queries-work) — Infinite queries are [React Query](https://tanstack.com/query/latest/docs/framework/react/overview)’s way to make “those doom-scrolling pages we all hate so much” as this author describes them. Dominik Dorfmeister (AKA TkDodo) [How to Create a Chrome Extension with React, TypeScript, Tailwind CSS and Vite](https://www.luckymedia.dev/blog/how-to-create-a-chrome-extension-with-react-typescript-tailwindcss-and-vite-in-2024) — Covers everything you need to know right through to publishing in the [Chrome Web Store](https://chromewebstore.google.com/). Lokman Musliu [SPA Lazy Loading Pitfalls](https://reacttraining.com/blog/spa-lazy-loading-pitfalls) — A concise set of recommendations to address common problems with this widely used pattern. Brad Westfall 📺 [Why Everyone Loves Zustand](https://www.youtube.com/watch?v=14B85quRQhw) – _“It’s rare I see a React codebase with complex state that wouldn’t benefit from it.”_ Theo Browne 📺 [Building a React-Powered TODO App in 9 Steps](https://www.youtube.com/watch?v=FbuaXA4Z6Ko) – A 54 second(!) video showing off the key stages, all without using any libraries except for React. Danny Thompson 📰 Classifieds 🆕 [Discover Reactile](https://www.reactile.net/?utm_source=reactstatus), for React web apps. Create your views. Let it handle windows and widgets in a tile layout within a single browser tab. --- 🛠️ _[Workshop]_ [Fix Your Front-End 101](https://sentry.io/resources/fix-your-front-end-javascript-edition/?utm_medium=paid-community&utm_source=reactstatus&utm_campaign=fy25q3-javascriptworkshop&utm_content=newsletter-javascriptworkshop-register). On Sept 24, join our JavaScript team for practical tips to make debugging more tolerable! 🛠 Code, Tools & Libraries [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/fnwe3uxvtyrtcxpng6os.jpg)](https://deck.gl/) [DECK.GL: GPU-Powered Large-Scale Data Visualization Framework](https://deck.gl/) — Particularly well suited to geospatial data visualization use cases that go beyond typical 2D views. There are [plenty of examples](https://deck.gl/examples) to show you what it can do. Can be used through both vanilla JS and React interfaces. OpenJS Foundation [Conform: A Type-Safe Form Validation Library](https://conform.guide/) — Gives you control over the form submission lifecycle from client to the server and exposes the form state through the `useForm()` hook. [v1.2.0](https://github.com/edmundhung/conform/releases/tag/v1.2.0) improves how field values are automatically updated, meaning less code for you to write. Edmund Hung [hono-remix-adapter: A Hono / Remix Adapter](https://github.com/yusukebe/hono-remix-adapter) — A Vite plugin to enable you to build a Hono-based app and integrate it within a Remix app. Yusuke Wada [FortuneSheet: A React-Powered Excel-Like JS Spreadsheet Control](https://github.com/ruilisi/fortune-sheet) — There’s [a live Storybook demo](https://ruilisi.github.io/fortune-sheet-demo/?path=/story/features--basic) showing it off. Suzhou Ruilisi Technology Co. [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/anp3cf153mv9wnsksjny.jpg)](https://virtual-keyboard.js.org/react/) [Simple-Keyboard 3.8: A Modern Virtual Keyboard for React](https://virtual-keyboard.js.org/react/) — If you need to render a working virtual keyboard within your app, this is for you. Francisco Hodge et al. - [Tinybase 5.3](https://github.com/tinyplex/tinybase/releases/tag/v5.3.0) – Powerful reactive data store for local‑first apps. Now with SSR support. - [Material UI 6.1](https://github.com/mui/material-ui/releases/tag/v6.1.0) – Independent React components using Material Design. - [semantic-autocomplete 3.1](https://github.com/Mihaiii/semantic-autocomplete) – Fast semantic search React component. - [react-jsx-parser 2.1](https://github.com/TroyAlford/react-jsx-parser) – Parses JSX and outputs rendered components. - [React Admin 5.2](https://github.com/marmelab/react-admin) – Framework for building B2B frontend interfaces. - [Preact 10.24](https://github.com/preactjs/preact/releases/tag/10.24.0) – The 3KB React-compatible alternative. - [MUI X 7.17](https://github.com/mui/mui-x) – Popular React component suite. - [React Responsive Pagination 2.8](https://github.com/jonelantha/react-responsive-pagination) 🕰️ ICYMI (_Older links, still worth checking out_) - Jakub Janczyk shares [a quick way to improve React testing times](https://www.helpscout.com/blog/improve-react-testing-times/) (_.. it involves turning off style calculations_). - Anton Martyniuk shows us [how to use React to create "_beautiful and modern emails without stress_"](https://antondevtips.com/blog/how-to-create-modern-emails-using-react). - [This post from Mario Yonan gives us a broad look at React app testing](https://www.marioyonan.com/blog/react-testing), covering a variety of methods and best practices to adopt when employing them. Curated by Peter Cooper and Terence C. Gannon. 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