#41: Major React Update in 2024, Hard Spend Limit, RSC Devtools, Kirimase, 20x Search Traffic

Kirimase: The Tutorial – Kirimase is a complete game-changer! It's a command-line tool designed to accelerate the development of full-stack Next.js apps. This guide provides an introduction to Kirimase along with instructions on how to use its commands, all with the goal of creating a Linktree clone

🐦 Set up hard spend limit on Vercel – This little script can safe you over $20k and is a must have if you are on a Vercel Pro account

Syntax Highlighting with Shiki, React Server Components, and Next.js – Learn how to add syntax-highlighted code blocks without shipping any extra JavaScript to your users

How we Increased Search Traffic by 20x in 4 Months with the Next.js App Router – An in-depth case study detailing how implementing performance optimization techniques in Next.js led to improved SEO results

Dockerizing a Next.js Application with GitHub Actions – Self-hosting your apps is currently trending, and this guide is perfect for learning how to set up a CI/CD pipeline to deploy your Dockerized Next.js app

Including static files in App Router RSCs – This is an interesting trick. Use Webpack to import static files outside the public folder into your Next.js app

More:

• ► Learn how to use AI integrations on Vercel to generate text, images, and audio
• Creating a Next.js Dashboard for SQL Data Visualization
• Building a blog with Next.js App Router and MDX

RSC Devtools – A browser extension that lets you record streaming data from React Server Components in order to visualize and explore it

shadcn-chat – Customizable and re-usable chat component built on top of shadcn/ui.

react-use – A collection of essential React Hooks like useClickAway, useAsync and useInterval

Next.js S3 Upload – This package provides all of the pieces needed to upload files from your Next.js application to S3

Evolving Vercel Functions – Increased concurrency, long running functions, faster cold starts, and more. A summary of all the improvements to Vercel Functions.

Introducing AI Integrations on Vercel – You can now add models and services from AI providers such as Pinecone, ElevenLabs, and Replicate into your Vercel projects with a single click.

🐦 By the end of 2024, you’ll likely never need these APIs again – Big news! Major updates are coming to React this year. React Compiler (formerly known as React Forget) is going to make memoization, such as `useMemo`, `useCallback`, and `memo`, obsolete. The new `use` hook will replace `useContext`, and my personal favorite, `ref`, will become a prop, so bye, bye `forwardRef`!

More:

• What is connection pooling and how does it work?
• 🐦 Vercel is gonna open source an LLM to UI streaming mechanism
• 🎙️ React Deep Dive: cache