React and Next.js

Web development with React and Next.js

A good web app loads quickly, works with a keyboard and a screen reader, and is easy to keep developing. We build with React 19 and the Next.js App Router in TypeScript, using TanStack Query for data fetching, TanStack Form and Zod for forms and validation, and Tailwind CSS with shadcn/ui and Radix for accessible components.

The web frontend of our own open-source project Canary is built with Next.js 16, React 19, and Tailwind CSS 4. At Sector Alarm, we worked in a development organisation with separate teams for iOS, Android, and React, where sharing knowledge across teams was an important part of the work.

Next.js, plain React, or Astro — how we choose a framework

Next.js is not always the right answer. We choose based on what the website or app actually needs to do:

• Next.js when the solution has sign-in, dynamic data, many page types, or a need for strong search visibility. With the App Router and React Server Components, much of the work can render on the server, so less JavaScript is sent to the browser.
• Plain React as a client app when the solution lives behind sign-in, does not need search visibility, and talks to an existing API. A separate server layer then adds more complexity than benefit.
• Astro for content-driven websites where most of the content is static. Pages are fast by default, and React components can still be used where interactivity is needed. This website is built that way.

The boundary between server and client is the most important architectural decision in a Next.js app. We keep client components small and clearly scoped, and let TanStack Query own data that must update in the browser. Whatever the framework, we use the same building blocks — TypeScript, Zod, and a shared design system — so components and the data layer can carry over if the needs change.

Multi-brand websites and design systems

When several brands need their own websites, sharing code pays off. We have built websites where several brands share components, a data layer, and build setup, while each brand keeps its own content, language, and visual identity. Design tokens are pulled from Figma and turned into CSS variables and a Tailwind theme with Style Dictionary, so a design change can be rolled out to every site in a controlled way.