Next-generation web design: Next.js 16 and faster stores

Next-generation web design is a website built as a fast, pre-rendered product rather than a page template: the HTML is prepared in advance, a token-based design system keeps every colour and spacing value consistent, and motion explains content instead of decorating it. It is for businesses and online stores that want a site that looks distinctive, loads quickly on phones and stays easy for search engines and AI assistants to read.

We use it in two places: our own website, rebuilt on Next.js 16, and a new-generation e-commerce design running on a live OpenCart store, where the most visited pages now show content 2.3× sooner than with the old theme. If you are comparing modern website design from a Next.js web design agency in London, here is what both run on and what we measured.

Everything below comes from the production code of the SPARCLEY website, not from a wish list.

• Next.js 16 (App Router) – routing, static generation, metadata and image optimisation.
• React 19 – the component layer for every section, card and interactive visual.
• Tailwind CSS 4 – utility styling driven by design tokens declared with the @theme directive.
• Framer Motion 12 – component animation, content reveals and the stacked-card effect on mobile.
• GSAP 3 with ScrollTrigger – scroll-linked sequences that need precise timing.
• Lenis – smooth scrolling synchronised with GSAP, so scroll and animation share one frame loop.
• next-themes – light and dark themes switched through a data-theme attribute.
• next/font and next/image – Geist, Geist Mono and Cormorant Garamond fonts served with the site, plus responsive, compressed images.

• See projects in our portfolio

Motion is where many modern sites lose speed, so the rules come first. Scroll effects run through GSAP ScrollTrigger, and Lenis smooth scrolling is driven by the same GSAP ticker, so two libraries never compete for one frame. Framer Motion handles smaller moments such as reveals, menus and the theme transition.

Decorative pieces – the custom cursor, floating action buttons, theme transition and smooth scrolling itself – are loaded with dynamic imports and rendered only in the browser, after the server has sent clean HTML. GSAP stays out of server rendering, only the parts of the animation and icon libraries that a page actually uses are bundled, and analytics loads when the browser is idle. If an animation does not guide the eye, explain a step or confirm an action, it goes, and content must stay readable with animation reduced or switched off.

The most visible detail is a liquid-glass layer. Large headings carry a soft gradient clipped to the letters that slowly flows across the text, and badges and buttons use a glass pill: a translucent gradient, a 15 px backdrop blur, a hairline border and a light shadow. It is pure CSS, so it costs no JavaScript and no extra image downloads.

Colours are defined once as CSS variables – background, foreground, accent, secondary, muted and border – and mapped into Tailwind 4 through @theme. The light theme redefines the same variables under a data-theme attribute, so one component works in both themes without duplicate styles, and every glass style has a light and a dark variant. On our site the home page is light, inner pages are dark, and an animated shutter transition links them.

Yes. Horizontal padding starts at 20 px on phones and grows to 40 px from 640 px and to 80 px from 1024 px, all through shared spacing tokens. Headings use fluid type with CSS clamp(), body text is capped at about 65 characters per line, sideways scrolling is blocked without breaking sticky elements, and smooth scrolling is tuned for touch so stacked-card animations stay steady on iOS and Android.

Every public page is generated in advance. Blog posts are built in advance, so only known URLs exist and each one is served as ready-made HTML. Each page builds its own title, description, canonical URL and Open Graph data, the site outputs Organization and Article structured data as JSON-LD, and the sitemap and robots file are generated from the same data as the pages.

For Core Web Vitals – loading (LCP), responsiveness (INP) and layout stability (CLS) – the main levers are next/image with priority on above-the-fold images, next/font to stop font-driven layout shift, and keeping heavy scripts off the critical path. Older URLs were kept working with permanent redirects and a consistent trailing slash, and we judge results by Lighthouse and Search Console field data rather than promising a score in advance.

• Web development services

The same principles – less JavaScript, lighter images, work done before the visitor arrives – drive our new-generation e-commerce design. It runs on a large live OpenCart 3.0.3.3 store selling electronics and security systems, in two languages. We have also run the same design with about 20,000 products to check how it behaves with a large catalogue, and we are happy to show it to you on a call.

On 12 October 2026 we measured the live store's 11 most visited pages against the previous theme:

• Content appears 2.3× sooner: 0.74 s instead of 1.73 s.
• Pages load fully 3.5× faster: 1.24 s instead of 4.40 s.
• 6.3× less data is transferred: 769 KB instead of 4,831 KB.
• The server responds 3.7× faster: 0.26 s instead of 0.96 s.
• A new product search index cut the first search from 8.9 s to under 0.6 s.
• Main-thread blocking on the home page fell from 15.5 s to 0.12 s.

Shoppers get live search with images, prices and search history, multi-category filters with a price slider, a one-page Buy now checkout, and a cart, filters and sorting that update without a page reload. Images are served as WebP, YouTube videos appear as an image until play, a sticky bottom bar and about 55 mobile fixes help on phones, and Product, Breadcrumb and Store structured data plus a Consent Mode v2 cookie banner are built in. An AI chat assistant can hand a conversation over to a person, and AI moderates reviews.

The owner changes colours, fonts, logos and custom CSS or JS in an Appearance panel in the admin, without a developer. The theme starts as a unique Figma design that is converted into responsive HTML and compared pixel by pixel with Figma – an average 99.56% match across 198 measurements – and is then turned into an OpenCart theme by our converter. It installs through the admin without modifying OpenCart core files, so future updates stay safe.

For content-heavy sites, the same Next.js front end we use ourselves can read from a headless CMS or from WordPress through its REST API. We tell you which route fits before any design work starts.

• Figma to HTML, OpenCart and WordPress converter
• Discuss your project