cloudflare/vinext

`next/form` (`<Form>`) soft navigation not implemented

Geschlossen

#1.355 geöffnet am 20.05.2026

Auf GitHub ansehenContributor Guide
 (1 Kommentar) (0 Reaktionen) (0 zugewiesene Personen)TypeScript (371 Forks)github user discovery
adapter-api-e2ehelp wanted

Repository-Metriken

Stars
 (8.563 Sterne)
PR-Merge-Metriken
 (Durchschn. Merge 1T 1h) (462 gemergte PRs in 30 T)

Beschreibung

This issue was created by an agent analysing CI failures from the Next.js Deploy Suite (vinext main vs Next.js v16.2.6, 2026-05-20).

Problem

The next/form <Form> component does not perform client-side soft navigation. Form submissions fall through to the browser's default behavior (full MPA page navigation) instead of being intercepted for SPA-style transitions.

Tests verify that after a form submission, the page did NOT do a full MPA navigation (didMpaNavigate() should return false). In vinext, it returns true because the form submit causes a full page reload.

Additionally, client action functions passed to action/formAction props do not execute.

Estimated Impact

~14 test failures.

Affected Test Suites

  • test/e2e/next-form/default/pages-dir.test.ts (9 failures)
  • test/e2e/next-form/default/app-dir.test.ts (5 failures)
  • test/e2e/next-form/basepath/next-form-basepath.test.ts (1 failure)

Recommendation

  1. Reproduce first in vinext's own test suite. Add a test with a <Form> component from next/form and verify that submission performs soft navigation. Confirm it currently does a full page reload.

  2. Study the Next.js <Form> implementation. Search .nextjs-ref/packages/next/src/client/form.tsx to understand how form submissions are intercepted and converted to client-side navigations using the router.

  3. Implement <Form> in the next/form shim. The component needs to: (a) intercept the submit event, (b) serialize form data, (c) use router.push() or router.replace() for the navigation, (d) support client action functions via action/formAction props.

  4. Handle both App Router and Pages Router. The Form component should work in both contexts.

Contributor Guide

Research-Richtung
Reproduzieren Sie die fehlgeschlagenen Tests, indem Sie einen Test mit der <Form> Komponente aus next/form hinzufügen und bestätigen Sie, dass ein vollständiger Seitenneulad erfolgt. Studieren Sie dann die Implementierung der Next.js Form Komponente in .nextjs ref/packages/next/src/client/form.tsx, um zu verstehen, wie die weiche Navigation durchgeführt wird. Implementieren Sie die Form Komponente im Shim von vinext für next/form, indem Sie Submit Ereignisse abfangen und router.push() für die clientseitige Navigation verwenden. Stellen Sie sicher, dass Client Aktionsfunktionen über action/formAction Props unterstützt werden und sowohl App Router als auch Pages Router Kontexte behandelt werden.
Tech Stack
typescriptreactnextjs
Domain
frontend
Issue Type
Fehler
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
2
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-3 Stunden
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
Aktiv
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
Meist klar
Voraussetzungen
GitNext.jsReact
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
60