# Robin Wieruch Articles about React, Next.js, TypeScript, JavaScript, and web development. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## How AI-Generated Work Can Shift Complexity to Reviewers DevFeed: [How AI-Generated Work Can Shift Complexity to Reviewers]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2026-09-01T06:50:46Z Content type: opinion Language: en Sources: [Robin Wieruch]() Topics: [Artificial Intelligence](), [Pull Request](), [Localization (l10n)]() Tags: [agent](), [agentic-coding-team](), [ai](), [ai-code-review-burden](), [ai-engineer](), [ai-slop-pull-requests](), [env-file-security](), [review](), [workslop]() ### AI overview This commentary argues that AI-generated output can create additional work when it appears polished but leaves important decisions unresolved. Using pull requests as examples, it discusses number localization and how architectural choices can surface late in review. ### Source excerpt AI made producing work nearly free, so the job is absorbing complexity before handing work to someone else, with examples from tickets, PRs, and slide decks. ## Agentic Coding: Bet on the Primitives DevFeed: [Agentic Coding: Bet on the Primitives]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2026-07-31T06:00:00Z Content type: opinion Language: en Sources: [Robin Wieruch]() Topics: [agentic-coding](), [coding](), [React](), [SVG]() Tags: [abstraction](), [agentic-coding](), [ai-coding-agents](), [ai-engineer](), [build-vs-buy-components](), [coding](), [d3-vs-recharts](), [opinions](), [react](), [svg]() ### AI overview The article argues that agentic coding lowers implementation costs enough to make owning lower-level primitives more practical. It describes an experiment comparing D3 math primitives with React-rendered SVG against Recharts for custom charts: Recharts reached most of the result faster, but its remaining customization needs and an animation issue led to more workarounds than the primitive-based approach. ### Source excerpt Agentic coding collapses the cost of implementation labor. Why the rational bet is moving from high-level libraries back to primitives you own. ## Resource Names for Enterprise TypeScript Monorepos DevFeed: [Resource Names for Enterprise TypeScript Monorepos]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2026-03-30T06:50:46Z Content type: tutorial Language: en Sources: [Robin Wieruch]() Topics: [TypeScript](), [Code](), [Structured-data]() Tags: [api-design](), [code](), [consistency](), [enterprise](), [monorepo](), [monorepo-resource-id](), [resource-oriented-design-typescript](), [typescript](), [typescript-resource-names](), [utilities]() ### AI overview This tutorial explains how to standardize resource names in multi-service TypeScript monorepos. It presents hierarchical resource naming, based on the Google API Design Guide, as a shared convention that replaces ad hoc string interpolation and supports consistent encoding and decoding across services. ### Source excerpt How to bring consistency to multi-service TypeScript applications by treating resource names and resource types as first-class concepts with shared utilities ... ## Agentic Code Review: Pattern Matching for AI DevFeed: [Agentic Code Review: Pattern Matching for AI]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2026-03-18T06:50:46Z Content type: tutorial Language: en Sources: [Robin Wieruch]() Topics: [agentic-coding](), [Code review](), [AI Agent](), [engineering-culture](), [Code]() Tags: [agentic](), [agentic-code-review](), [agentic-coding](), [ai-agents](), [ai-code-review](), [ai-engineer](), [code-review](), [coding-patterns](), [github](), [review]() ### AI overview This article explains how teams can scale code review for AI-generated code by documenting project patterns and anti-patterns in structured files. AI agents can use the resulting reference document to review code against team conventions on GitHub and locally before pull requests are created. The approach depends on having consistent architecture and established conventions first. ### Source excerpt How to document project patterns and anti-patterns so AI agents can review code against your team's conventions automatically ... ## Streaming Multiple AI Models in Parallel with React.js and AI SDK DevFeed: [Streaming Multiple AI Models in Parallel with React.js and AI SDK]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2025-05-05T11:50:46Z Content type: tutorial Language: en Sources: [Robin Wieruch]() Topics: [vercel ai sdk](), [React](), [Next.js](), [AI Models](), [Streaming]() Tags: [ai](), [ai-models](), [js](), [parallel](), [react](), [react-js-ai](), [react-js-ai-chat](), [react-js-ai-sdk](), [sdk](), [streaming]() ### AI overview A tutorial on building a Next.js and React interface that sends the same prompt to multiple AI models through Vercel's AI SDK and displays their responses in parallel for comparison. ### Source excerpt Build a multi-model chat interface using Next.js and the AI SDK by Vercel ... ## Selecting from Multiple Models (LLMs) with AI SDK in React.js DevFeed: [Selecting from Multiple Models (LLMs) with AI SDK in React.js]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2025-04-28T11:50:46Z Content type: tutorial Language: en Sources: [Robin Wieruch]() Topics: [vercel ai sdk](), [Next.js](), [React](), [Large Language Model](), [Vercel]() Tags: [ai](), [llms](), [next-js](), [react](), [react-js-ai](), [react-js-ai-chat](), [react-js-ai-sdk](), [sdk](), [vercel]() ### AI overview A tutorial showing how to build a multi-model chat interface with Next.js, React, and Vercel's AI SDK. It explains how to define supported model instances, let users choose among LLMs, and stream responses through an API route. ### Source excerpt Build a multi-model chat interface using Next.js and the AI SDK by Vercel ... ## Full-Stack React.js Chat with AI SDK DevFeed: [Full-Stack React.js Chat with AI SDK]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2025-04-21T11:50:46Z Content type: tutorial Language: en Sources: [Robin Wieruch]() Topics: [vercel ai sdk](), [React](), [AI Chat](), [Streaming](), [Developer experience](), [Front end](), [Vercel](), [API]() Tags: [ai](), [api](), [frontend](), [react](), [react-js-ai](), [react-js-ai-chat](), [react-js-ai-sdk](), [sdk](), [streaming](), [vercel]() ### AI overview A tutorial on building a full-stack React.js streaming chat application with Vercel's AI SDK. It explains how the SDK replaces manual stream decoding, message-state management, API-route wiring, and frontend handling with abstractions such as streamText and useChat. ### Source excerpt Build a full-stack React.js AI chat application using the AI SDK by Vercel ... ## Full-Stack React.js AI Chat with OpenAI API DevFeed: [Full-Stack React.js AI Chat with OpenAI API]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2025-04-14T11:50:46Z Content type: tutorial Language: en Sources: [Robin Wieruch]() Topics: [AI Chat](), [React](), [Next.js](), [OpenAI](), [API](), [Front end](), [Back end](), [SDKs]() Tags: [ai](), [api](), [backend](), [chat](), [env-file-security](), [frontend](), [gpt](), [guide](), [how-to](), [javascript](), [js](), [next-js](), [openai](), [react](), [react-js-ai](), [react-js-ai-chat](), [react-js-openai](), [sdk](), [stream](), [tutorial]() ### AI overview A tutorial for building a full-stack AI chat application with React.js, Next.js, and the OpenAI API. It covers API routes, API key configuration, chat state, a frontend interface, and streaming responses. ### Source excerpt Build a full-stack AI chat app using React.js on Next.js and the OpenAI API ... ## Authorization in Next.js DevFeed: [Authorization in Next.js]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2025-03-25T10:50:46Z Content type: tutorial Language: en Sources: [Robin Wieruch]() Topics: [Authorization](), [Next.js](), [React](), [API](), [Architecture & Design](), [Cache]() Tags: [api](), [authorization](), [cache](), [next](), [next-authorization](), [next-js](), [react](), [router](), [security]() ### AI overview A guide to implementing authorization in Next.js applications that use React Server Components, Server Actions, and the App Router. It explains placing authorization checks near the data source, protecting read and write operations, validating sessions, redirecting unauthenticated users, and introducing service and data access layers as applications grow. ### Source excerpt Learn about authorization in Next.js when using React Server Components, Server Actions, and Next's App Router ... ## React Trends in 2025 DevFeed: [React Trends in 2025]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2025-03-18T06:50:46Z Content type: article Language: en Sources: [Robin Wieruch]() Topics: [React](), [Next.js](), [React Router](), [Remote Procedure Call (RPC)]() Tags: [2025](), [next-js](), [react](), [react-router](), [react-trends-2025](), [rpc](), [technical]() ### AI overview An overview of React trends in 2025, focusing on the development and expected adoption of React Server Components and React Server Functions. It explains how server-side execution can reduce client-side JavaScript and describes related changes in Next.js, React Router, and other frameworks. ### Source excerpt React Trends in 2025 which should be on your watchlist. A walkthrough of the state of React ... ## Server Actions with Toast (useEffect) DevFeed: [Server Actions with Toast (useEffect)]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2025-03-10T06:52:46Z Content type: tutorial Language: en Sources: [Robin Wieruch]() Topics: [React](), [Tutorial]() Tags: [callback](), [component](), [function](), [react](), [react-server-action-toast-useeffect](), [state](), [tutorial]() ### AI overview A tutorial on displaying toast notifications for React Server Actions using useActionState and useEffect. It explains returning a timestamped response, tracking server action state, and preventing duplicate or outdated toast messages. ### Source excerpt Learn how to display toast notifications from React Server Actions in React (and Next.js) with useEffect and useActionState ... ## Server Actions with Toast (useActionState) DevFeed: [Server Actions with Toast (useActionState)]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2025-03-06T06:51:46Z Content type: tutorial Language: en Sources: [Robin Wieruch]() Topics: [React](), [Tutorial](), [Next.js]() Tags: [asynchronous](), [callback](), [function](), [github](), [how-to](), [implementation](), [next-js](), [notifications](), [react](), [react-server-action-toast-useactionstate](), [tutorial]() ### AI overview This tutorial explains how to display toast notifications for React Server Actions using the useActionState Hook. It implements a higher-order function that adds success and error callbacks, producing reusable primitives for handling toast behavior. ### Source excerpt Learn how to display toast notifications from React Server Actions in React (and Next.js) with useActionState ... ## React Server Actions with Toast Feedback DevFeed: [React Server Actions with Toast Feedback]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2025-03-04T06:50:46Z Content type: tutorial Language: en Sources: [Robin Wieruch]() Topics: [React](), [Tutorial](), [User Experience]() Tags: [code](), [error-handling](), [how-to](), [notifications](), [react](), [react-hooks](), [react-server-action-toast](), [react-server-component](), [real-time](), [time](), [tutorial]() ### AI overview This tutorial explains how to display toast notifications when invoking React Server Actions. It builds a React Server Component that fetches user data and a Client Component for upvoting, downvoting, and deleting entries, with toast feedback and error handling. ### Source excerpt Learn how to display toast notifications from React Server Actions in React (and Next.js) ... ## CLI Chatbot with LangChain and OpenAI in Node.js DevFeed: [CLI Chatbot with LangChain and OpenAI in Node.js]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2025-03-03T07:50:46Z Content type: tutorial Language: en Sources: [Robin Wieruch]() Topics: [LangChain](), [Node.js](), [OpenAI](), [Command-line interface](), [JavaScript](), [Chat Bot](), [API]() Tags: [cli](), [how-to](), [javascript](), [langchain](), [langchain-node-js-openai](), [node](), [node-js](), [openai](), [tutorial]() ### AI overview A step-by-step tutorial for building a simple command-line chatbot in Node.js using JavaScript, LangChain, and OpenAI. It covers dependency installation, API key configuration, model interaction, prompt handling, user input, and possible extensions such as conversation memory, additional language models, and a graphical interface. ### Source excerpt How to: OpenAI in JavaScript with LangChain. A step by step example on how to use the OpenAI API in JavaScript with LangChain ... ## How to learn React in 2025 DevFeed: [How to learn React in 2025]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2025-02-25T05:52:46Z Content type: tutorial Language: en Sources: [Robin Wieruch]() Topics: [React](), [Learning](), [Next.js](), [Framework](), [Web Development](), [Server-side rendering]() Tags: [how-to](), [learn-react](), [next-js](), [react](), [web](), [web-development]() ### AI overview This article compares learning React in 2025 as a standalone library with learning it through an integrated framework such as Next.js. It explains changes in React's documentation and places the library-versus-framework choice in the broader evolution from server-side rendering to client-side applications and back toward server rendering. ### Source excerpt Learning React in 2025 as a library or framework is not an easy decision. Whether to learn React with Next.js as a framework ... ## Simple Interactive CLI App with Node.js DevFeed: [Simple Interactive CLI App with Node.js]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2025-02-24T06:53:46Z Content type: tutorial Language: en Sources: [Robin Wieruch]() Topics: [Command-line interface](), [Node.js](), [TypeScript](), [Tutorial](), [coding]() Tags: [build](), [chat](), [cli](), [coding](), [commands](), [display](), [features](), [how-to](), [js](), [node](), [node-js](), [node-js-cli-app](), [run](), [terminal](), [tutorial](), [typescript]() ### AI overview A tutorial on building a simple interactive CLI app with Node.js and TypeScript. The app reads user input, responds through a chat interface, supports commands, and exits when the user types "exit". ### Source excerpt Learn how to build a simple interactive CLI app with Node.js and TypeScript. Create a chat interface that reads user input and responds interactively ... ## TypeScript in a Node.js Project DevFeed: [TypeScript in a Node.js Project]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2025-02-18T06:53:46Z Content type: tutorial Language: en Sources: [Robin Wieruch]() Topics: [Node.js](), [TypeScript](), [Development](), [configuration](), [Command-line interface]() Tags: [configuration](), [dependencies](), [development](), [environment-variables](), [guide](), [install](), [node](), [node-js](), [terminal](), [typescript](), [typescript-node-js-project-configuration](), [typescript-node-js-project-setup](), [typescript-node-js-project-tutorial]() ### AI overview A step-by-step guide to setting up a TypeScript project with Node.js, including project initialization, TypeScript configuration, source files, compilation, direct execution, automatic reloading, and environment variables. ### Source excerpt Learn how to set up a TypeScript Node.js project from scratch with this step-by-step guide. Configure TypeScript, install dependencies, manage environment variables, and streamline development with tsx ... ## React Libraries for 2026 DevFeed: [React Libraries for 2026]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2025-02-17T06:50:46Z Content type: tutorial Language: en Sources: [Robin Wieruch]() Topics: [React](), [Next.js](), [Vite](), [Server-side rendering]() Tags: [2026](), [frameworks](), [guide](), [libraries](), [next-js](), [react](), [react-libraries-2026](), [server-side-rendering](), [vite]() ### AI overview A guide to React libraries for 2026, covering recommendations for building large-scale React applications, including project setup, state, data fetching, routing, styling, UI, forms, testing, authentication, and hosting. It highlights Vite, Next.js, and TanStack Start as project and framework options. ### Source excerpt A curated list of React libraries for 2026 with recommendations for state, data fetching, routing, styling, UI, forms, testing, auth, and hosting. ## How to start a React Project \[2025\] DevFeed: [How to start a React Project \[2025\]]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2025-02-11T05:52:46Z Content type: tutorial Language: en Sources: [Robin Wieruch]() Topics: [React](), [Vite](), [Single-page application (SPA)](), [Server-side rendering](), [Framework]() Tags: [2025](), [developers](), [how-to](), [react](), [react-starter-kit](), [react-starter-project](), [vite]() ### AI overview This tutorial reviews ways to start a new React project and compares their advantages, disadvantages, required skill level, and available features. It explains Vite as a lightweight, fast option with client-side rendering by default and opt-in server-side rendering. ### Source excerpt React starter kits (Vite, Next, Astro, Remix, React Router) which help React developers to start a React project in 2025 ... ## LangChain: Streaming Structured Output in JavaScript DevFeed: [LangChain: Streaming Structured Output in JavaScript]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2025-02-10T06:53:46Z Content type: tutorial Language: en Sources: [Robin Wieruch]() Topics: [LangChain](), [JavaScript](), [Streaming](), [Structured-data](), [Next.js](), [API](), [React](), [Back end](), [Front end]() Tags: [api](), [backend](), [fetch](), [frontend](), [github](), [javascript](), [langchain](), [langchain-javascript-stream-structured-output](), [next-js](), [react](), [server-sent-events](), [streaming](), [structured-output]() ### AI overview This tutorial demonstrates how to stream structured output in JavaScript with LangChain, using Next.js and React for the frontend and backend. It explains using Server-Sent Events and the native fetch API with @microsoft/fetch-event-source while building a chatbot application that uses the OpenAI API. ### Source excerpt How to: Streaming Structured Output in JavaScript with LangChain. A step by step example on how to stream structured data in JavaScript with LangChain ... ## Monorepos in JavaScript & TypeScript DevFeed: [Monorepos in JavaScript & TypeScript]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2025-02-03T07:52:46Z Content type: tutorial Language: en Sources: [Robin Wieruch]() Topics: [JavaScript](), [Tutorial](), [TypeScript](), [Front end](), [Web Development](), [React](), [npm](), [Yarn](), [Git]() Tags: [frontend](), [frontend-monorepo](), [git](), [javascript](), [javascript-monorepo](), [monorepo](), [monorepo-tools](), [npm](), [react](), [tutorial](), [typescript](), [typescript-monorepo]() ### AI overview A tutorial on organizing JavaScript and TypeScript applications and packages in a monorepo. It explains monorepo architecture, distinguishes monorepos from monoliths, and discusses shared resources, modular projects, and tools such as package-manager workspaces and monorepo management tools. ### Source excerpt A tutorial how to use a monorepo architecture in frontend JavaScript and TypeScript with tools like npm/yarn/pnpm workspaces, Turborepo/NX/Lerna, Git Submodules, ... ## Vite with TypeScript DevFeed: [Vite with TypeScript]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2025-01-30T07:52:46Z Content type: tutorial Language: en Sources: [Robin Wieruch]() Topics: [TypeScript](), [Vite](), [React](), [Web Development]() Tags: [how-to](), [javascript](), [react](), [tutorial](), [typescript](), [upgrade](), [vite](), [vite-typescript]() ### AI overview A tutorial showing how to upgrade a React project built with Vite from JavaScript to TypeScript. It covers installing TypeScript dependencies, adding and merging configuration files, renaming source files, updating index.html, configuring ESLint, optionally resolving absolute paths, and addressing compile errors. ### Source excerpt How to upgrade Vite to TypeScript from JavaScript ... ## LangChain: Structured Output with JavaScript DevFeed: [LangChain: Structured Output with JavaScript]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2025-01-27T06:52:46Z Content type: tutorial Language: en Sources: [Robin Wieruch]() Topics: [LangChain](), [JavaScript](), [Structured-data](), [Next.js](), [React](), [API](), [Back end](), [Front end](), [OpenAI]() Tags: [api](), [how-to](), [javascript](), [langchain](), [langchain-javascript-structured-output](), [next-js](), [react](), [schema](), [structured-output](), [validation](), [zod]() ### AI overview This tutorial demonstrates how to build structured-output responses with LangChain in JavaScript. It uses Next.js and React for the application, the OpenAI API for chatbot responses, and Zod to define and validate a shared schema between the backend and frontend. ### Source excerpt How to: Structured Output in JavaScript with LangChain. A step by step example on how to use structured data in JavaScript with LangChain ... ## LangChain: Streaming in JavaScript with React.js & Next.js DevFeed: [LangChain: Streaming in JavaScript with React.js & Next.js]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2025-01-21T06:51:46Z Content type: tutorial Language: en Sources: [Robin Wieruch]() Topics: [LangChain](), [Streaming](), [JavaScript](), [Next.js](), [React](), [OpenAI](), [Chat Bot](), [API](), [Back end](), [Front end](), [ui]() Tags: [api](), [backend](), [data](), [frontend](), [github](), [javascript](), [langchain](), [langchain-javascript-streaming](), [next-js](), [openai](), [react](), [real-time](), [streaming](), [tutorial](), [user-experience]() ### AI overview A step-by-step tutorial on using LangChain in JavaScript with Next.js and React to stream chatbot responses from a backend API to a frontend. It demonstrates real-time response handling for a chatbot that uses the OpenAI API. ### Source excerpt How to: Streaming in JavaScript with LangChain. A step by step example on how to stream data in JavaScript with LangChain ... [Next page]()