Sviluppo frontend

Next.js, React e TypeScript in produzione. Qui raccogliamo cache, server component e server action, performance e i pattern che teniamo.

32 articoli

Inizia da qui

A thin upper lane of small tiles with a dashed empty outline in it, a curved arrow down to the same tile lit on a wide lower lane carrying a block of packages and a long bar

Web

Edge runtime o Node runtime: cosa cambia con Next.js 16

Next.js 16 sposta il middleware sul runtime Node e lo rinomina proxy.ts. Dove Edge resta più rapido e dove Node vince su librerie e processi lunghi.

Six staggered bars in a waterfall on a dark grid, five short and dark, one long and white running past a dashed vertical line to a page outline on the right

Web

Perché il mio sito è lento? Le 6 cause e cosa le risolve

Solo il 48% dei siti mobile supera i Core Web Vitals. Le sei cause di un sito lento, come trovare la tua su PageSpeed Insights e cosa risolve ognuna.

A grid of twelve dark tiles with six lit white, each lit tile circled by a progress ring of a different length; three threads run from the right column of tiles to one lit pill on the right, and the middle tile of that column glows brighter with a full ring

Web

La cache di Next.js 16: use cache, cacheLife e updateTag

In Next.js 16 niente va in cache finché non scrivi 'use cache'. Come lavorano i sette profili di cacheLife, cacheTag e updateTag, e cosa cambia per fetch.

One white tile branching into hundreds of dark ones, four paths lit to the far edge

Web

Dipendenze npm fuori controllo: i 4 costi sui frontend enterprise

Nel 2025 Sonatype ha contato 454.600 nuovi pacchetti malevoli e il 99,8% del malware del quarto trimestre veniva da npm. Quanto costa e come lo teniamo a freno.

A tree of tiles split by a dashed white line, dark tiles above and lit tiles below, six crossings of the line marked with rings

Web

React Server Components in produzione: 6 errori da evitare nel 2026

Il 45% degli sviluppatori React usa i Server Components, ma nello State of React 2025 sono la terza funzionalità meno gradita. Sei errori spiegano il divario.

A terminal window with one lit error line, wired from its edge to five dark tiles on the right: an error log, a route list, a component tree, a browser and a plug

Web

Agent DevTools di Next.js: il debug con l'AI nel 2026

Next.js 16.3 dà agli agenti accesso da terminale a errori di build, rotte e albero React. Il setup di MCP e agent-browser, in cinque passi.

Five rows from button to server: three lit rows passing three lit check tiles each, two dim rows below with empty dashed slots going straight in

Web

Server Actions di Next.js in produzione: cosa usiamo e cosa evitiamo

Ogni Server Action che esporti è un endpoint POST pubblico senza autenticazione. Ecco i pattern Next.js 16 che mandiamo in produzione e quelli che rifiutiamo.

On a white ground, a row of ten grey blocks above, and below it a single black block doing the same work with nine empty outlines after it

Web

TypeScript 7 e il compilatore in Go: cosa cambia il 10x di velocità

TypeScript 7 riscrive tsc in Go e controlla i tipi del repo di VS Code (1,5 milioni di righe) in 7,5s invece di 78. Ecco cosa cambia per chi sviluppa.

A solid grey page shell with three holes; one is filled white, and chunks of white stream from the right into the other two

Web

Partial Prerendering stabile in Next.js 16: come strutturare le route

Next.js 16 rende stabile Partial Prerendering con cacheComponents: shell statica dalla CDN edge, parti dinamiche in streaming nella stessa risposta.

A white tile with a few neat lit dependencies, a bright vertical cut line, and beyond it a fading cloud of hundreds of grey specks

Web

Proliferazione delle dipendenze npm: quanto costa e come ridurla

Un progetto Next.js appena creato installa oltre 1.000 pacchetti prima del codice. Ecco quanto costa la proliferazione delle dipendenze npm e come ridurla.

Five request bars sharing one prefix, the first fully lit and four as outlines lit only for a tenth of their length, streaming into an answer panel of token chips

API Anthropic in Next.js: streaming, cache e controllo dei costi

Come collegare Claude a un'app Next.js: route handler lato server, streaming SSE, prefisso in cache al 10% del costo di input e retry che reggono un 429.

Three address bars differing only in a lit first segment, joined by curves into one lit node, which feeds a stack of three identical page panels

Web

i18n in Next.js senza librerie: il pattern dell’App Router

L’App Router di Next.js non ha i18n integrato. Facciamo girare tre lingue su routing nativo, zero dipendenze. Ecco il pattern che usiamo in produzione.

Three stacked isometric plates, the top one lit with data dots, the middle one carrying branching routes, the bottom one striped, with two small plates beside them

Web

TanStack nel 2026: Query, Router, Start e cosa risolve ciascuno

TanStack Query supera 12 milioni di download a settimana. La famiglia copre routing, tabelle, form e un framework full-stack. Cosa risolve ciascuno e quando usarlo.

Left, three lit tiles each shown sliding, scaling and fading as faint copies; right, a glowing white wireframe surface of many points in a wave

Web

WebGL o animazioni CSS: quando usare ciascuna (2026)

Le animazioni CSS muovono transform e opacity fuori dal main thread, a costo zero. WebGL ti dà la GPU grezza. Ecco il confine, con i costi di bundle e batteria.

A scattered heap of grey files joined by lines into one lit file, which feeds a text panel whose lines sit exactly inside their dashed outlines

Web

Performance dei web font: un solo WOFF2, zero spostamenti

Una famiglia non ottimizzata aggiunge 500KB e ritarda il testo leggibile. Subset in WOFF2, self-host e fallback con size-adjust: allo swap nulla si muove.

A ring gauge lit for less than half its length, the rest broken into six dark segments, beside six lanes of tasks each with one long white block past a dashed limit

Web

I 6 errori frontend che affossano il punteggio Lighthouse nel 2026

Il Total Blocking Time pesa il 30% del punteggio Lighthouse, ma quasi tutti ottimizzano la metrica sbagliata. Sei errori in produzione e come correggerli.

Sixty dim tiles in a wide grid on the left, and nine lit tiles packed into a container inside a small server panel on the right

Infra

Vercel o Docker per Next.js: da 600$ al mese a circa 90$

Una bolletta Vercel da 600$ scende a circa 90$ al mese su un VPS gestito con Docker. Cosa perdi in edge, scaling e DX, e quando il cambio conviene.

A dark client tile and a lit server tile joined by one short white line between matching ports of small pills, with a dashed detour through three empty boxes above

Web

RPC type-safe con i Server Actions di Next.js: via il layer API

Un Server Action è già una RPC. Ecco come renderlo type-safe da capo a fondo e validato a runtime, senza route API né tipi di risposta da mantenere.

One tall glowing white screen full of moving shapes beside a grid of nineteen identical grey document pages

Web

Architettura del sito nel 2026: home come app, il resto statico

Quasi tutti i siti trattano ogni pagina come una SPA. Noi facciamo il contrario: la home come applicazione, il resto come documenti statici.

Three closed white rings holding a large painted block, a pointer with a ripple, and stacked bars on their dashed outlines, each above a meter marked in its good zone

Web

Core Web Vitals su Next.js nel 2026: come arrivare in verde

Passi concreti per portare LCP sotto 2.5s, INP sotto 200ms e CLS sotto 0.1 su un SaaS Next.js 16, e come leggere il campo quando Lighthouse mente.

An S-shaped easing curve with a tile repeated along it in fading copies, bunched at the ends; four lit tiles top left, three struck-through outlines bottom right, a scrollbar at the edge

Web

Stack web immersivo nel 2026: Lenis, GSAP, e cosa lasciare fuori

Lenis (3 kB), GSAP gratis da aprile 2025, ScrollTrigger per la matematica dello scroll e le scroll-driven animations native in CSS. Lo stack che usiamo.

On a white ground, nine black concentric rings around a black core, nine dark lines arriving from outside, each stopped at a different ring

Web

TypeScript strict mode: i 9 setting che non disattiviamo mai

strict: true accende 9 controlli e da TypeScript 6.0 è il default. Cosa intercetta ogni flag in produzione, più i 3 flag fuori dal bundle che aggiungiamo.

Two lanes of weekly tile columns: above, six dashed empty weeks then a steady grey block three tiles high; below, lit columns starting at once and varying in height

Web

Agenzia Next.js o team interno: quando conviene ciascuno nel 2026

Un senior Next.js negli Stati Uniti costa 195 mila dollari all'anno carico pieno e sei settimane per arrivare. Un'agenzia parte da 60 dollari l'ora. Dove vince ciascuno.

A brick wall of dark rounded bricks in which thirteen scattered bricks are lit white

Web

Sicurezza Server Actions Next.js: 13 vulnerabilità e i fix 2026

Next.js ha corretto 13 vulnerabilità nel 2026: bypass del middleware, cache poisoning e SSRF. Cosa è cambiato e come mettere in sicurezza le Server Actions ora.

A lit card at the centre, a cloud of tiny grey chips drifting away and fading to its left, and three clean lines on its right into three stacked white layers

Web

Rimuovere Tailwind dalla produzione: il design system in CSS puro

Dopo anni a far convivere Tailwind con il nostro design system, lo abbiamo rimosso dalla produzione. Ecco l'architettura che lo ha sostituito e cosa è cambiato.

Three layers pulled apart in a stack; on the front one the same card appears wide in one container and stacked in a narrow lit one

Web

CSS moderno nel 2026: cascade layer, container query, :has()

I cascade layer chiudono le guerre di specificità, le container query sostituiscono le media query di componente, :has() gira ovunque. Cosa adottare nel 2026.

A balance on an open-A fulcrum, tipped: the lower pan holds a dense block of lit tiles, the raised pan a quiet page with two small lit islands

Web

Perché scegliamo Next.js invece di Astro per i SaaS nel 2026

Quest'anno abbiamo spedito sia Next.js sia Astro. Per i SaaS, Next.js resta la nostra scelta. Ecco il trade-off onesto nel 2026.

On a white ground, a grid of tiles swept by a black vertical line: black tiles with a white dot behind it, two dashed empty ones, one ringed, and grey tiles ahead

Web

Direttive di React Compiler 1.0: use memo e use no memo

React Compiler 1.0 memoizza quasi tutti i componenti in fase di build. Dove servono le due direttive e dove useMemo e useCallback restano utili.

Three stacked bands: three lit tiles on top, six swatch pills in the middle and eighteen small chips at the bottom, each joined by lines to the one above

Design

Design token vs variabili CSS vs Tailwind, spiegato (2026)

Design token, variabili CSS e Tailwind stanno su tre livelli: significato, valori a runtime e classi utility. Come scegliere e come si combinano fra loro.

A dark app window with a lit port on its right edge; a line from it passes a lit lock, with a stack of pills hung below, to a large lit tile; four dashed branches end in hollow rings

Server MCP su Next.js: mcp-handler, OAuth 2.1, sessioni Redis

Monta un server MCP su un SaaS Next.js 16 già in produzione con mcp-handler: route di trasporto dinamica, OAuth 2.1, sessioni su Redis e 4 errori tipici.

Five diamond shapes in a row joined by a line to a large dark tile, each with a branch down to a small tile; a white path runs through three diamonds and drops at the fourth to a lit tile

Web

Server Components vs Client Components: l'albero decisionale che seguiamo

L'albero decisionale in cinque passi che usiamo su ogni progetto Next.js 16 per capire quando un componente resta server e quando serve "use client".

A full wall of dark tiles split by three glowing white fault lines that step down through the gaps, the pieces between them slightly shifted

Web

Next.js 16 e React 19: i 3 breaking change per ogni SaaS nel 2026

Turbopack è il bundler di default, le API di richiesta (params, cookies) ora sono asincrone e React Compiler 1.0 è stabile. Cosa si rompe lasciando Next 15.

Torna agli Appunti