Next.js for sites that need to be found#
A React app that renders entirely in the browser starts life as an empty page. Search engines and social previews see little until JavaScript runs, and users on slow connections stare at a spinner. For a product that depends on search traffic, sharing or first impressions, that's a real cost.
Next.js fixes this by rendering pages on the server or at build time, so content arrives ready to read and index. It's not automatic, though. The benefits depend on choosing the right rendering mode for each page, keeping client-side JavaScript lean, and getting metadata, structured data and images right. That is where most of the engineering goes.
I've built Next.js products ranging from multilingual marketplaces to multi-tenant SaaS platforms, and modernized React frontends that had become slow and hard to change.
Signs you need a React or Next.js specialist#
- Your site doesn't rank despite good content, and pages are slow or render client-side.
- Your React app has become slow as features were added: heavy bundles, laggy interactions, long waits for data.
- Marketing depends on developers for every text or image change on the website.
- The frontend is inconsistent, with similar components built five different ways and every new screen taking longer than the last.
- You're launching in more than one language or market and need localised routing and content.
What I build with React and Next.js#
Marketing sites and product websites#
Fast, accessible sites with strong Core Web Vitals and technical SEO built in: metadata per page, structured data, sitemaps, canonical URLs and image optimisation.
Web applications and dashboards#
Authenticated apps with roles, forms, tables, charts and real-time updates, backed by your API or one I build in Laravel or Node.js.
Headless CMS builds#
Next.js paired with Strapi, so marketing and operations teams manage content safely while the frontend stays fast. Editors get structured content types instead of a free-for-all page builder, which keeps the design consistent.
Multilingual platforms#
Localised routing, translated metadata and translation workflows. On Planuojam I built an automated translation engine in Strapi 5 using AWS Translate, so content publishes in five languages without manual copying.
Component systems#
A small set of accessible, typed components in TypeScript and Tailwind CSS, often on top of Radix UI primitives. New screens are assembled from existing parts, which is faster and keeps the product consistent.
Choosing the right rendering for each page#
- Static generation for marketing and content pages that change occasionally, served from cache.
- Server rendering for pages that are personalised or must always be fresh.
- Client-side rendering for highly interactive screens behind a login, where SEO doesn't matter.
- Incremental revalidation so content edited in the CMS appears within minutes without a full rebuild.
Getting this right per page is most of the difference between a fast Next.js site and a slow one.
Keeping React apps fast as they grow#
Most slow React apps are slow for a few specific reasons: too much JavaScript shipped up front, components re-rendering on every change, waterfalls of data requests, and unoptimised images. I measure first, using real traces and Core Web Vitals, then fix those causes in order of impact. On Violerts, modernizing the React and Redux frontend improved performance by 60%+ in the affected workflows.
Next.js and React projects#
- Planuojam: a failing event platform rebuilt as a five-language marketplace on Next.js, Strapi 5 and PostgreSQL, with Mapbox, Stripe and real-time messaging over Socket.IO. Eduard, the client, described me as "Fast and professional".
- Imperial Votes: a multi-tenant Next.js and Prisma platform built from a blank app, including a canvas-based social graphics generator and white-label customisation.
- Nooora: a half-built Dubai beauty services site rebuilt as a fully CMS-driven Next.js platform, with multi-tier service discovery and a production-ready SEO and answer-engine foundation.
- Violerts: a React frontend modernized for performance, with map exploration through Leaflet and real-time updates through Pusher.
Common Next.js mistakes I fix#
- Everything marked as a client component, which throws away server rendering and ships far more JavaScript than needed.
- Metadata left at defaults, so every page shares one title and description.
- Unoptimised images and fonts that drag down Largest Contentful Paint.
- Data fetched in the browser that could be fetched on the server, creating loading spinners and layout shifts.
- No caching strategy, so pages that could be static are rendered on every request.
What you have at launch#
- a Next.js codebase in your repository, typed end to end with TypeScript;
- a documented component library, so new pages don't need a developer to reinvent layouts;
- a CMS your team can edit safely, if content changes often;
- metadata, structured data, sitemaps and analytics configured and verified;
- Core Web Vitals measured on real pages, not just on a developer's laptop;
- a deployment pipeline with preview environments for every change.
Full-stack when you need it#
If your frontend needs a backend too, I build that as well, in Laravel or Node.js, so the API is shaped for the interface from the start. See full-stack web development.
Working together#
It starts with a free 30-minute call about your product, audience and goals. You get a written plan covering pages, rendering strategy and milestones, then a staging site that updates as work lands. Projects run at a fixed scope or on a monthly retainer.
Have a React or Next.js project? Book a free call and we'll pick the right approach.
