vinext 0.1.2 → 0.1.3

package/dist/shims/router.js

@@ -9,16 +9,18 @@ import { applyVinextLocaleGlobals, extractVinextNextDataJson, parseVinextNextDat
 import { isValidModulePath } from "../client/validate-module-path.js";
 import { addLocalePrefix, getDomainLocaleUrl, getLocalePathPrefix } from "../utils/domain-locale.js";
 import { buildPagesDataHref } from "./internal/pages-data-url.js";
+import { dedupedPagesDataFetch } from "./internal/pages-data-fetch-dedup.js";
+import { NEXT_DEPLOYMENT_ID_HEADER, getDeploymentId } from "../utils/deployment-id.js";
 import { prefetchPagesData, resolvePagesDataNavigationTarget } from "./internal/pages-data-target.js";
+import { addQueryParam, appendSearchParamsToUrl, mergeRouteParamsIntoQuery, parseQueryString, urlQueryToSearchParams } from "../utils/query.js";
+import { resolveHybridClientRouteOwner } from "./internal/hybrid-client-route-owner.js";
 import { getPagesRouterComponentsMap, markAppRouteDetectedOnPrefetch } from "./internal/app-route-detection.js";
-import { dedupedPagesDataFetch } from "./internal/pages-data-fetch-dedup.js";
 import { installWindowNext } from "../client/window-next.js";
 import { getWindowOrigin, isAbsoluteOrProtocolRelativeUrl, isHashOnlyBrowserUrlChange, normalizePathTrailingSlash, toBrowserNavigationHref, toSameOriginAppPath, withBasePath } from "./url-utils.js";
-import { addQueryParam, appendSearchParamsToUrl, mergeRouteParamsIntoQuery, parseQueryString, urlQueryToSearchParams } from "../utils/query.js";
 import { scrollToHashTarget } from "./hash-scroll.js";
-import { setPagesRouterPopStateHandler, setStampInitialHistoryState } from "./pages-router-runtime.js";
+import { installPagesRouterRuntime, setPagesRouterPopStateHandler, setStampInitialHistoryState } from "./pages-router-runtime.js";
 import { getCurrentBrowserLocale } from "./client-locale.js";
-import { createElement, useContext, useEffect, useMemo, useState } from "react";
+import { Component, Fragment, createElement, useContext, useEffect, useLayoutEffect, useMemo, useState } from "react";
 //#region src/shims/router.ts
 /**
 * next/router shim
@@ -31,6 +33,134 @@ import { createElement, useContext, useEffect, useMemo, useState } from "react";
 const __basePath = process.env.__NEXT_ROUTER_BASEPATH ?? "";
 /** trailingSlash from next.config.js, injected by the plugin at build time */
 const __trailingSlash = process.env.__VINEXT_TRAILING_SLASH === "true";
+/** experimental.scrollRestoration from next.config.js, injected by the plugin at build time */
+const __scrollRestoration = process.env.__NEXT_SCROLL_RESTORATION === "true";
+const noopCommit = () => {};
+const SCROLL_RESTORE_MAX_FRAMES = 60;
+const SCROLL_RESTORE_TOLERANCE_PX = 1;
+/**
+* A version of useLayoutEffect that doesn't warn during SSR.
+* `wrapWithRouterContext` is shared with the server-side Pages Router render
+* path, where a raw useLayoutEffect would log React's "useLayoutEffect does
+* nothing on the server" warning on every render. Same pattern as
+* `shims/image.tsx`; Next.js only runs the commit callback on the client.
+*/
+const useNonWarningLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+var PagesRouterCommitBoundary = class extends Component {
+	componentDidCatch(error) {
+		this.props.onError(error);
+	}
+	render() {
+		return createElement(PagesRouterCommitBoundaryHelper, { onCommit: this.props.onCommit }, this.props.children);
+	}
+};
+function PagesRouterCommitBoundaryHelper({ children, onCommit }) {
+	useNonWarningLayoutEffect(() => {
+		onCommit();
+	}, [onCommit]);
+	return createElement(Fragment, null, children);
+}
+function renderPagesRouterElement(element, scroll) {
+	const root = window.__VINEXT_ROOT__;
+	if (!root) return Promise.resolve();
+	cancelPreviousRenderCommit();
+	return new Promise((resolve, reject) => {
+		const cancel = () => {
+			if (routerRuntimeState.cancelPendingRenderCommit === cancel) routerRuntimeState.cancelPendingRenderCommit = null;
+			reject(new NavigationCancelledError("superseded"));
+		};
+		routerRuntimeState.cancelPendingRenderCommit = cancel;
+		const clearIfCurrent = () => {
+			if (routerRuntimeState.cancelPendingRenderCommit === cancel) routerRuntimeState.cancelPendingRenderCommit = null;
+		};
+		const isCurrent = () => routerRuntimeState.cancelPendingRenderCommit === cancel;
+		const scrollHandler = async () => {
+			if (scroll) await restorePagesRouterScrollPosition(scroll, isCurrent);
+		};
+		root.render(wrapWithRouterContext(element, () => {
+			(async () => {
+				if (!isCurrent()) return;
+				try {
+					await scrollHandler();
+					if (!isCurrent()) return;
+					clearIfCurrent();
+					resolve();
+				} catch (err) {
+					clearIfCurrent();
+					reject(err);
+				}
+			})();
+		}, (error) => {
+			clearIfCurrent();
+			reject(error);
+		}));
+		if (!hasBrowserDocument()) {
+			clearIfCurrent();
+			resolve();
+		}
+	});
+}
+function hasBrowserDocument() {
+	return typeof document !== "undefined" && document.documentElement !== void 0;
+}
+async function restorePagesRouterScrollPosition(scroll, shouldContinue) {
+	if (!shouldContinue()) return;
+	scrollToPagesRouterPosition(scroll);
+	if (isAtScrollPosition(scroll)) return;
+	let previousScrollPosition = getWindowScrollPosition();
+	for (let frame = 0; frame < SCROLL_RESTORE_MAX_FRAMES; frame += 1) {
+		await waitForNextAnimationFrame();
+		if (!shouldContinue()) return;
+		scrollToPagesRouterPosition(scroll);
+		if (isAtScrollPosition(scroll)) return;
+		const currentScrollPosition = getWindowScrollPosition();
+		if (currentScrollPosition.x === previousScrollPosition.x && currentScrollPosition.y === previousScrollPosition.y) break;
+		previousScrollPosition = currentScrollPosition;
+	}
+}
+function scrollToPagesRouterPosition({ x, y }) {
+	if (!hasBrowserDocument()) {
+		window.scrollTo(x, y);
+		return;
+	}
+	const htmlElement = document.documentElement;
+	if (!(htmlElement.dataset.scrollBehavior === "smooth")) {
+		window.scrollTo(x, y);
+		return;
+	}
+	const previousScrollBehavior = htmlElement.style.scrollBehavior;
+	htmlElement.style.scrollBehavior = "auto";
+	htmlElement.getClientRects();
+	window.scrollTo(x, y);
+	htmlElement.style.scrollBehavior = previousScrollBehavior;
+}
+function isAtScrollPosition({ x, y }) {
+	return Math.abs(window.scrollX - x) <= SCROLL_RESTORE_TOLERANCE_PX && Math.abs(window.scrollY - y) <= SCROLL_RESTORE_TOLERANCE_PX;
+}
+function waitForNextAnimationFrame() {
+	return new Promise((resolve) => {
+		if (typeof requestAnimationFrame === "function") {
+			requestAnimationFrame(() => resolve());
+			return;
+		}
+		setTimeout(resolve, 16);
+	});
+}
+function canUseSessionStorageForScrollRestoration() {
+	if (typeof window === "undefined") return false;
+	try {
+		const key = "__next";
+		window.sessionStorage.setItem(key, key);
+		window.sessionStorage.removeItem(key);
+		return true;
+	} catch {
+		return false;
+	}
+}
+const manualScrollRestoration = __scrollRestoration && typeof window !== "undefined" && window.next?.appDir !== true && "scrollRestoration" in window.history && canUseSessionStorageForScrollRestoration();
+function installManualScrollRestoration() {
+	if (manualScrollRestoration) window.history.scrollRestoration = "manual";
+}
 function createRouterEvents() {
 	const listeners = /* @__PURE__ */ new Map();
 	return {
@@ -46,7 +176,42 @@ function createRouterEvents() {
 		}
 	};
 }
-const routerEvents = createRouterEvents();
+const PAGES_ROUTER_RUNTIME_STATE_KEY = Symbol.for("vinext.pagesRouter.runtimeState");
+function createPagesRouterRuntimeState() {
+	return {
+		events: createRouterEvents(),
+		historyKeyCounter: 0,
+		navigationId: 0,
+		activeAbortController: null,
+		cancelPendingRenderCommit: null,
+		lastPathnameAndSearch: typeof window !== "undefined" ? window.location.pathname + window.location.search : "",
+		isFirstPopStateEvent: true,
+		routerDidNavigate: false,
+		deprecatedEventBridgeInstalled: false,
+		pagesRouterReady: typeof window === "undefined" || !shouldDeferInitialPagesRouterReady()
+	};
+}
+function getPagesRouterRuntimeState() {
+	if (typeof window === "undefined") return createPagesRouterRuntimeState();
+	const globalObject = window;
+	const existing = globalObject[PAGES_ROUTER_RUNTIME_STATE_KEY];
+	if (existing) return existing;
+	const state = createPagesRouterRuntimeState();
+	globalObject[PAGES_ROUTER_RUNTIME_STATE_KEY] = state;
+	return state;
+}
+const routerRuntimeState = getPagesRouterRuntimeState();
+const routerEvents = routerRuntimeState.events;
+function getPagesRouterRuntimeComponents() {
+	const existing = routerRuntimeState.components;
+	if (existing) return existing;
+	const components = {
+		CommitBoundary: PagesRouterCommitBoundary,
+		Provider: PagesRouterProvider
+	};
+	routerRuntimeState.components = components;
+	return components;
+}
 function resolveUrl(url) {
 	if (typeof url === "string") return url;
 	let result = url.pathname ?? "/";
@@ -201,8 +366,16 @@ function buildInitialRouterState() {
 * locale stamped before any push could overwrite the active locale global.
 */
 function stampInitialHistoryState() {
-	if (window.history.state !== null && window.history.state !== void 0) return;
-	window.history.replaceState(buildInitialRouterState(), "");
+	installManualScrollRestoration();
+	if (!window.history) return;
+	const existingState = window.history.state;
+	if (existingState !== null && existingState !== void 0) {
+		routerRuntimeState.currentHistoryKey = getRouterStateKey(existingState) ?? routerRuntimeState.currentHistoryKey;
+		return;
+	}
+	const initialState = buildInitialRouterState();
+	routerRuntimeState.currentHistoryKey = initialState.key;
+	window.history.replaceState(initialState, "");
 }
 setStampInitialHistoryState(stampInitialHistoryState);
 /** Save current scroll position into history state for back/forward restoration.
@@ -213,22 +386,62 @@ setStampInitialHistoryState(stampInitialHistoryState);
 * minting the same shape here so the entry isn't treated as foreign.
 */
 function saveScrollPosition() {
-	const existing = typeof window.history.state === "object" && window.history.state !== null ? window.history.state : null;
+	const position = getWindowScrollPosition();
+	const existing = isUnknownRecord(window.history.state) ? window.history.state : null;
 	const scroll = {
-		__vinext_scrollX: window.scrollX,
-		__vinext_scrollY: window.scrollY
+		__vinext_scrollX: position.x,
+		__vinext_scrollY: position.y
 	};
 	const base = existing ?? buildInitialRouterState();
+	const key = getRouterStateKey(base);
+	if (key !== void 0) {
+		routerRuntimeState.currentHistoryKey = key;
+		saveScrollPositionToSessionStorage(key, position);
+	}
 	window.history.replaceState({
 		...base,
 		...scroll
 	}, "");
 }
-/** Restore scroll position from history state */
-function restoreScrollPosition(state) {
-	if (state && typeof state === "object" && "__vinext_scrollY" in state) {
-		const { __vinext_scrollX: x, __vinext_scrollY: y } = state;
-		requestAnimationFrame(() => window.scrollTo(x, y));
+function getWindowScrollPosition() {
+	return {
+		x: window.scrollX,
+		y: window.scrollY
+	};
+}
+function getScrollStorageKey(historyKey) {
+	return `__next_scroll_${historyKey}`;
+}
+function readScrollPosition(value) {
+	if (!isUnknownRecord(value)) return null;
+	const nextX = value.x;
+	const nextY = value.y;
+	if (typeof nextX === "number" && typeof nextY === "number") return {
+		x: nextX,
+		y: nextY
+	};
+	const vinextX = value.__vinext_scrollX;
+	const vinextY = value.__vinext_scrollY;
+	if (typeof vinextX === "number" && typeof vinextY === "number") return {
+		x: vinextX,
+		y: vinextY
+	};
+	return null;
+}
+function saveScrollPositionToSessionStorage(key, position) {
+	if (!manualScrollRestoration) return;
+	try {
+		window.sessionStorage.setItem(getScrollStorageKey(key), JSON.stringify(position));
+	} catch {}
+}
+function readScrollPositionFromSessionStorage(key) {
+	if (!manualScrollRestoration) return null;
+	try {
+		const value = window.sessionStorage.getItem(getScrollStorageKey(key));
+		if (value === null) return null;
+		return readScrollPosition(JSON.parse(value));
+	} catch {
+		return null;
 	}
 }
 let _ssrContext = null;
@@ -380,6 +593,11 @@ function getRouteParamsFromQuery(pattern, query) {
 function getRouteQueryFromNextData(nextData, resolvedPath) {
 	const routeQuery = {};
 	if (!nextData?.query || !nextData.page) return routeQuery;
+	if (extractRouteParamsFromPath(nextData.page, resolvedPath) === null) {
+		for (const [key, value] of Object.entries(nextData.query)) if (typeof value === "string") routeQuery[key] = value;
+		else if (Array.isArray(value)) routeQuery[key] = [...value];
+		return routeQuery;
+	}
 	const routeParamNames = extractRouteParamNames(nextData.page);
 	if (routeParamNames.length === 0) return routeQuery;
 	const currentRouteParams = extractRouteParamsFromPath(nextData.page, resolvedPath);
@@ -439,9 +657,8 @@ function shouldDeferInitialPagesRouterReady() {
 	if (!nextData) return false;
 	return !getPagesNavigationIsReadyFromSerializedState(nextData.page, window.location.search, nextData);
 }
-let _pagesRouterReady = typeof window === "undefined" ? true : !shouldDeferInitialPagesRouterReady();
 function isPagesRouterReady() {
-	return _pagesRouterReady;
+	return routerRuntimeState.pagesRouterReady;
 }
 function isPagesRouterDocumentActive() {
 	if (typeof window === "undefined") return true;
@@ -451,10 +668,24 @@ function isPagesRouterDocumentActive() {
 	return Boolean(window.__VINEXT_APP__ || window.__VINEXT_APP_LOADER__);
 }
 function markPagesRouterReady() {
-	if (typeof window === "undefined" || _pagesRouterReady) return false;
-	_pagesRouterReady = true;
+	if (typeof window === "undefined" || routerRuntimeState.pagesRouterReady) return false;
+	routerRuntimeState.pagesRouterReady = true;
 	return true;
 }
+function markPagesRouterHydrated() {
+	if (typeof window === "undefined" || window.__NEXT_HYDRATED === true) return;
+	const hydratedAt = performance.now();
+	window.__VINEXT_HYDRATED_AT = hydratedAt;
+	window.__NEXT_HYDRATED = true;
+	window.__NEXT_HYDRATED_AT = hydratedAt;
+	window.__NEXT_HYDRATED_CB?.();
+}
+function PagesRouterHydrationMarker() {
+	useEffect(() => {
+		markPagesRouterHydrated();
+	}, []);
+	return null;
+}
 function getRouterSnapshot() {
 	const isReady = typeof window === "undefined" ? _getSSRContext()?.navigationIsReady ?? true : isPagesRouterReady();
 	return {
@@ -488,20 +719,10 @@ var HardNavigationScheduledError = class extends Error {
 		this.name = "HardNavigationScheduledError";
 	}
 };
-/**
-* Monotonically increasing ID for tracking the current navigation.
-* Each call to navigateClient() increments this and captures the value.
-* After each async boundary, the navigation checks whether it is still
-* the active one. If a newer navigation has started, the stale one
-* throws NavigationCancelledError so the caller can emit routeChangeError
-* and skip routeChangeComplete.
-*
-* Replaces the old boolean `_navInProgress` guard which silently dropped
-* the second navigation, causing URL/content mismatch.
-*/
-let _navigationId = 0;
-/** AbortController for the in-flight fetch, so superseded navigations abort network I/O. */
-let _activeAbortController = null;
+function cancelPreviousRenderCommit() {
+	routerRuntimeState.cancelPendingRenderCommit?.();
+	routerRuntimeState.cancelPendingRenderCommit = null;
+}
 function scheduleHardNavigationAndThrow(url, message) {
 	if (typeof window === "undefined") throw new HardNavigationScheduledError(message);
 	window.location.href = url;
@@ -566,15 +787,20 @@ function getMiddlewarePagesDataFetchUrl(browserUrl) {
 	if (parsed.origin !== getWindowOrigin()) return null;
 	return buildPagesDataHref(__basePath, buildId, stripBasePath(parsed.pathname, __basePath), parsed.search);
 }
-async function resolveMiddlewareDataRedirect(browserUrl, signal) {
+async function resolveMiddlewareDataEffect(browserUrl, signal) {
 	const dataUrl = getMiddlewarePagesDataFetchUrl(browserUrl);
 	if (!dataUrl) return null;
 	if (signal.aborted) throw new DOMException("Aborted", "AbortError");
 	try {
-		return (await dedupedPagesDataFetch(dataUrl, { headers: {
+		const res = await dedupedPagesDataFetch(dataUrl, { headers: {
 			Accept: "application/json",
 			"x-nextjs-data": "1"
-		} })).headers.get("x-nextjs-redirect");
+		} });
+		return {
+			redirectLocation: res.headers.get("x-nextjs-redirect"),
+			rewriteTarget: res.headers.get("x-nextjs-rewrite"),
+			response: res
+		};
 	} catch {
 		return null;
 	}
@@ -611,19 +837,21 @@ function handleDataRedirect(destination, redirectBasePath, mode = "push") {
 * data endpoint returns 404 and the client lands on the new build via a
 * full document load.
 */
-async function navigateClientData(url, target, controller, navId, assertStillCurrent, options = {}) {
-	const root = window.__VINEXT_ROOT__;
-	if (!root) {
+async function navigateClientData(url, initialTarget, controller, navId, assertStillCurrent, options = {}, prefetchedResponse) {
+	if (!window.__VINEXT_ROOT__) {
 		window.location.href = url;
 		return;
 	}
 	if (controller.signal.aborted) throw new NavigationCancelledError(url);
-	let res;
-	try {
-		res = await dedupedPagesDataFetch(target.dataHref, { headers: {
+	let res = prefetchedResponse;
+	if (!res) try {
+		const headers = {
 			Accept: "application/json",
 			"x-nextjs-data": "1"
-		} });
+		};
+		const deploymentId = getDeploymentId();
+		if (deploymentId) headers[NEXT_DEPLOYMENT_ID_HEADER] = deploymentId;
+		res = await dedupedPagesDataFetch(initialTarget.dataHref, { headers });
 	} catch (err) {
 		if (err instanceof DOMException && err.name === "AbortError") throw new NavigationCancelledError(url);
 		throw err;
@@ -634,11 +862,14 @@ async function navigateClientData(url, target, controller, navId, assertStillCur
 		const redirectedUrl = resolveLocalRedirectUrl(softRedirect);
 		if (!redirectedUrl) scheduleHardNavigationAndThrow(softRedirect, "Navigation redirected externally");
 		window.history.replaceState(window.history.state ?? {}, "", redirectedUrl);
-		_lastPathnameAndSearch = window.location.pathname + window.location.search;
+		routerRuntimeState.lastPathnameAndSearch = window.location.pathname + window.location.search;
 		await navigateClientHtml(redirectedUrl, redirectedUrl, controller, navId, assertStillCurrent);
 		return;
 	}
 	if (!res.ok) scheduleHardNavigationAndThrow(url, `Data navigation failed: ${res.status} ${res.statusText}`);
+	const rewriteTarget = res.headers.get("x-nextjs-rewrite");
+	const target = rewriteTarget ? resolvePagesDataNavigationTarget(rewriteTarget, __basePath) : initialTarget;
+	if (!target) scheduleHardNavigationAndThrow(url, "Data navigation failed: rewrite target has no page loader");
 	let body;
 	try {
 		body = await res.json();
@@ -646,7 +877,9 @@ async function navigateClientData(url, target, controller, navId, assertStillCur
 		scheduleHardNavigationAndThrow(url, "Data navigation failed: invalid JSON response");
 	}
 	assertStillCurrent();
-	const pageProps = body.pageProps && typeof body.pageProps === "object" ? body.pageProps : {};
+	const props = isUnknownRecord(body) ? body : {};
+	const rawPageProps = props.pageProps;
+	const pageProps = isUnknownRecord(rawPageProps) ? rawPageProps : {};
 	const redirectDestination = pageProps.__N_REDIRECT;
 	if (typeof redirectDestination === "string") {
 		handleDataRedirect(redirectDestination, pageProps.__N_REDIRECT_BASE_PATH, options.mode);
@@ -673,17 +906,18 @@ async function navigateClientData(url, target, controller, navId, assertStillCur
 	assertStillCurrent();
 	let element;
 	if (AppComponent) element = React.createElement(AppComponent, {
+		...props,
 		Component: PageComponent,
-		pageProps
+		pageProps: rawPageProps,
+		router: Router
 	});
 	else element = React.createElement(PageComponent, pageProps);
-	element = wrapWithRouterContext(element);
 	const mergedQuery = mergeRouteParamsIntoQuery(parseQueryString(target.search), target.params);
 	const prev = window.__NEXT_DATA__;
 	const nextLocale = (window.__VINEXT_LOCALES__?.length ?? 0) > 0 ? target.locale ?? window.__VINEXT_DEFAULT_LOCALE__ : prev?.locale;
 	const nextData = {
 		...prev,
-		props: { pageProps },
+		props,
 		page: target.pattern,
 		query: mergedQuery,
 		buildId: target.buildId,
@@ -692,7 +926,8 @@ async function navigateClientData(url, target, controller, navId, assertStillCur
 	};
 	window.__NEXT_DATA__ = nextData;
 	applyVinextLocaleGlobals(window, nextData);
-	root.render(element);
+	await renderPagesRouterElement(element, options.scroll);
+	assertStillCurrent();
 }
 /**
 * Perform client-side navigation by fetching the page's full HTML and
@@ -707,8 +942,7 @@ async function navigateClientData(url, target, controller, navId, assertStillCur
 async function navigateClientHtml(url, fetchUrl, controller, navId, assertStillCurrent, options = {}) {
 	let browserUrl = url;
 	let pendingRedirectHistoryUrl = fetchUrl === url ? null : url;
-	const root = window.__VINEXT_ROOT__;
-	if (!root) {
+	if (!window.__VINEXT_ROOT__) {
 		window.location.href = browserUrl;
 		return;
 	}
@@ -736,7 +970,9 @@ async function navigateClientHtml(url, fetchUrl, controller, navId, assertStillC
 	const nextDataJson = extractVinextNextDataJson(html);
 	if (!nextDataJson) scheduleHardNavigationAndThrow(url, "Navigation failed: missing __NEXT_DATA__ in response");
 	const nextData = parseVinextNextDataJson(nextDataJson);
-	const { pageProps } = nextData.props;
+	const props = nextData.props && typeof nextData.props === "object" ? nextData.props : {};
+	const rawPageProps = props.pageProps;
+	const pageProps = isUnknownRecord(rawPageProps) ? rawPageProps : {};
 	let pageModuleUrl = nextData.__vinext?.pageModuleUrl;
 	if (!pageModuleUrl) {
 		const moduleMatch = html.match(/import\("([^"]+)"\);\s*\n\s*const PageComponent/);
@@ -744,11 +980,10 @@ async function navigateClientHtml(url, fetchUrl, controller, navId, assertStillC
 		pageModuleUrl = moduleMatch?.[1] ?? altMatch?.[1] ?? void 0;
 	}
 	let pageModule;
-	if (!pageModuleUrl) {
-		const loader = window.__VINEXT_PAGE_LOADERS__?.[nextData.page];
-		if (!loader) scheduleHardNavigationAndThrow(browserUrl, "Navigation failed: no page module URL found");
-		pageModule = await loader();
-	} else {
+	const loader = window.__VINEXT_PAGE_LOADERS__?.[nextData.page];
+	if (loader) pageModule = await loader();
+	else if (!pageModuleUrl) scheduleHardNavigationAndThrow(browserUrl, "Navigation failed: no page module URL found");
+	else {
 		if (!isValidModulePath(pageModuleUrl)) {
 			console.error("[vinext] Blocked import of invalid page module path:", pageModuleUrl);
 			scheduleHardNavigationAndThrow(browserUrl, "Navigation failed: invalid page module path");
@@ -777,18 +1012,20 @@ async function navigateClientHtml(url, fetchUrl, controller, navId, assertStillC
 	assertStillCurrent();
 	let element;
 	if (AppComponent) element = React.createElement(AppComponent, {
+		...props,
 		Component: PageComponent,
-		pageProps
+		pageProps: rawPageProps,
+		router: Router
 	});
 	else element = React.createElement(PageComponent, pageProps);
-	element = wrapWithRouterContext(element);
 	if (pendingRedirectHistoryUrl) {
 		window.history.replaceState(window.history.state ?? {}, "", pendingRedirectHistoryUrl);
-		_lastPathnameAndSearch = window.location.pathname + window.location.search;
+		routerRuntimeState.lastPathnameAndSearch = window.location.pathname + window.location.search;
 	}
 	window.__NEXT_DATA__ = nextData;
 	applyVinextLocaleGlobals(window, nextData);
-	root.render(element);
+	await renderPagesRouterElement(element, options.scroll);
+	assertStillCurrent();
 }
 /**
 * Perform client-side navigation. Prefers the JSON data endpoint when the
@@ -806,43 +1043,49 @@ async function navigateClientHtml(url, fetchUrl, controller, navId, assertStillC
 */
 async function navigateClient(url, fetchUrl = url, options = {}) {
 	if (typeof window === "undefined") return;
-	_activeAbortController?.abort();
+	routerRuntimeState.activeAbortController?.abort();
+	cancelPreviousRenderCommit();
 	const controller = new AbortController();
-	_activeAbortController = controller;
-	const navId = ++_navigationId;
+	routerRuntimeState.activeAbortController = controller;
+	const navId = ++routerRuntimeState.navigationId;
 	/** Check if this navigation is still the active one. If not, throw. */
 	function assertStillCurrent() {
-		if (navId !== _navigationId) throw new NavigationCancelledError(url);
+		if (navId !== routerRuntimeState.navigationId) throw new NavigationCancelledError(url);
 	}
 	try {
 		if (options.allowNotFoundResponse === true) await navigateClientHtml(url, fetchUrl, controller, navId, assertStillCurrent, options);
 		else {
 			let browserUrl = url;
 			let htmlFetchUrl = fetchUrl;
-			const dataTarget = resolvePagesDataNavigationTarget(browserUrl, __basePath);
+			let dataTarget = resolvePagesDataNavigationTarget(browserUrl, __basePath);
+			let middlewareDataResponse;
 			if (!dataTarget) {
-				let redirectLocation;
+				let middlewareEffect;
 				try {
-					redirectLocation = await resolveMiddlewareDataRedirect(browserUrl, controller.signal);
+					middlewareEffect = await resolveMiddlewareDataEffect(browserUrl, controller.signal);
 				} catch (err) {
 					if (err instanceof DOMException && err.name === "AbortError") throw new NavigationCancelledError(browserUrl);
 					throw err;
 				}
 				assertStillCurrent();
+				const redirectLocation = middlewareEffect?.redirectLocation ?? null;
 				if (redirectLocation) {
 					const redirectedUrl = resolveLocalRedirectUrl(redirectLocation);
 					if (!redirectedUrl) scheduleHardNavigationAndThrow(redirectLocation, "Navigation redirected externally");
 					window.history.replaceState(window.history.state ?? {}, "", redirectedUrl);
-					_lastPathnameAndSearch = window.location.pathname + window.location.search;
+					routerRuntimeState.lastPathnameAndSearch = window.location.pathname + window.location.search;
 					browserUrl = redirectedUrl;
 					htmlFetchUrl = redirectedUrl;
+				} else if (middlewareEffect?.rewriteTarget) {
+					dataTarget = resolvePagesDataNavigationTarget(middlewareEffect.rewriteTarget, __basePath);
+					if (dataTarget) middlewareDataResponse = middlewareEffect.response;
 				}
 			}
-			if (dataTarget) await navigateClientData(browserUrl, dataTarget, controller, navId, assertStillCurrent, options);
+			if (dataTarget) await navigateClientData(browserUrl, dataTarget, controller, navId, assertStillCurrent, options, middlewareDataResponse);
 			else await navigateClientHtml(browserUrl, htmlFetchUrl, controller, navId, assertStillCurrent, options);
 		}
 	} finally {
-		if (navId === _navigationId) _activeAbortController = null;
+		if (navId === routerRuntimeState.navigationId) routerRuntimeState.activeAbortController = null;
 	}
 }
 /**
@@ -928,8 +1171,8 @@ function dispatchNavigateEvent() {
 *        locale and the canonical app-relative `as` path.
 */
 function updateHistory(mode, fullUrl, navState) {
-	const previousState = typeof window.history.state === "object" && window.history.state !== null ? window.history.state : null;
-	const key = mode === "push" ? createHistoryKey() : previousState?.key ?? createHistoryKey();
+	const previousKey = getRouterStateKey(window.history.state);
+	const key = mode === "push" ? createHistoryKey() : previousKey ?? routerRuntimeState.currentHistoryKey ?? createHistoryKey();
 	const state = {
 		url: navState?.url ?? fullUrl,
 		as: navState?.as ?? fullUrl,
@@ -939,13 +1182,13 @@ function updateHistory(mode, fullUrl, navState) {
 	};
 	if (mode === "push") window.history.pushState(state, "", fullUrl);
 	else window.history.replaceState(state, "", fullUrl);
-	_lastPathnameAndSearch = window.location.pathname + window.location.search;
-	_routerDidNavigate = true;
+	routerRuntimeState.currentHistoryKey = key;
+	routerRuntimeState.lastPathnameAndSearch = window.location.pathname + window.location.search;
+	routerRuntimeState.routerDidNavigate = true;
 }
-let _historyKeyCounter = 0;
 function createHistoryKey() {
-	_historyKeyCounter += 1;
-	return `vinext_${_historyKeyCounter.toString(36)}_${Math.random().toString(36).slice(2, 9)}`;
+	routerRuntimeState.historyKeyCounter += 1;
+	return `vinext_${routerRuntimeState.historyKeyCounter.toString(36)}_${Math.random().toString(36).slice(2, 9)}`;
 }
 /**
 * Throw the canonical "no router instance" error used when a Pages Router
@@ -993,12 +1236,21 @@ async function performNavigation(url, as, options, mode, onStateUpdate) {
 	const full = normalizePathTrailingSlash(toBrowserNavigationHref(resolved, window.location.href, __basePath), __trailingSlash);
 	const errorRouteHtmlFetchUrl = resolvePagesErrorHtmlFetchUrl(url, navigationLocale);
 	const htmlFetchUrl = errorRouteHtmlFetchUrl ?? getPagesHtmlFetchUrl(full, navigationLocale);
-	const navigateOptions = errorRouteHtmlFetchUrl ? {
-		allowNotFoundResponse: true,
-		mode
-	} : { mode };
 	const shallow = options?.shallow ?? false;
 	const doScroll = options?.scroll !== false;
+	const hash = extractHash(resolved);
+	const scrollTarget = doScroll ? {
+		x: 0,
+		y: 0
+	} : null;
+	const navigateOptions = errorRouteHtmlFetchUrl ? {
+		allowNotFoundResponse: true,
+		mode,
+		scroll: scrollTarget
+	} : {
+		mode,
+		scroll: scrollTarget
+	};
 	const navStateOptions = { shallow };
 	if (navigationLocale !== void 0) navStateOptions.locale = navigationLocale;
 	const resolvedNoHash = stripHash(resolved);
@@ -1007,7 +1259,8 @@ async function performNavigation(url, as, options, mode, onStateUpdate) {
 		as: resolvedNoHash,
 		options: navStateOptions
 	};
-	if (isHashOnlyChange(full)) {
+	if (options?._h !== 1 && isHashOnlyChange(full)) {
+		if (mode === "push") saveScrollPosition();
 		const eventUrl = resolveHashUrl(full);
 		routerEvents.emit("hashChangeStart", eventUrl, { shallow });
 		updateHistory(mode, resolved.startsWith("#") ? resolved : full, navState);
@@ -1020,25 +1273,25 @@ async function performNavigation(url, as, options, mode, onStateUpdate) {
 	const appPath = getLocalPathname(resolved);
 	const appPathNorm = appPath !== null ? removeTrailingSlash(appPath) : null;
 	const appPathEntry = appPathNorm !== null ? getPagesRouterComponentsMap()[appPathNorm] : void 0;
-	if (appPathEntry !== void 0 && "__appRouter" in appPathEntry && appPathEntry.__appRouter) {
+	if (appPathEntry !== void 0 && "__appRouter" in appPathEntry && appPathEntry.__appRouter || ["app", "document"].includes(resolveHybridClientRouteOwner(resolved, __basePath) ?? "")) {
 		if (mode === "push") window.location.assign(full);
 		else window.location.replace(full);
 		return new Promise(() => {});
 	}
 	if (mode === "push") saveScrollPosition();
-	routerEvents.emit("routeChangeStart", resolved, { shallow });
+	const isQueryUpdating = options?._h === 1;
+	if (!isQueryUpdating) routerEvents.emit("routeChangeStart", resolved, { shallow });
 	routerEvents.emit("beforeHistoryChange", resolved, { shallow });
 	updateHistory(mode, full, navState);
 	if (!shallow) {
 		const result = await runNavigateClient(full, resolved, htmlFetchUrl, navigateOptions);
 		if (result === "cancelled") return true;
 		if (result === "failed") return false;
-	}
-	onStateUpdate?.();
-	routerEvents.emit("routeChangeComplete", resolved, { shallow });
-	const hash = extractHash(resolved);
-	if (doScroll) if (hash) scrollToHashTarget(hash);
+	} else if (doScroll) if (hash) scrollToHashTarget(hash);
 	else window.scrollTo(0, 0);
+	onStateUpdate?.();
+	if (!isQueryUpdating) routerEvents.emit("routeChangeComplete", resolved, { shallow });
+	if (doScroll && hash && !shallow) scrollToHashTarget(hash);
 	dispatchNavigateEvent();
 	return true;
 }
@@ -1083,8 +1336,9 @@ async function prefetchUrl(url) {
 */
 function useRouter() {
 	const router = useContext(RouterContext);
-	if (!router) throw new Error("NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted");
-	return router;
+	if (router) return router;
+	if (typeof window !== "undefined" && window.__VINEXT_PAGE_LOADERS__ !== void 0) return Router;
+	throw new Error("NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted");
 }
 function PagesRouterProvider({ children }) {
 	const [{ pathname, query, asPath, isReady }, setState] = useState(getRouterSnapshot);
@@ -1095,9 +1349,11 @@ function PagesRouterProvider({ children }) {
 		window.addEventListener("vinext:navigate", onNavigate);
 		let cancelled = false;
 		const readyTimer = window.setTimeout(() => {
-			if (cancelled || !markPagesRouterReady()) return;
-			setState(getRouterSnapshot());
-			notifyNextNavigationPagesContext();
+			if (cancelled) return;
+			if (markPagesRouterReady()) {
+				setState(getRouterSnapshot());
+				notifyNextNavigationPagesContext();
+			}
 		}, 0);
 		return () => {
 			cancelled = true;
@@ -1140,36 +1396,47 @@ function PagesRouterProvider({ children }) {
 			Router.prefetch(href);
 		}
 	}), []);
-	const content = createElement(RouterContext.Provider, { value: router }, children);
+	const content = createElement(RouterContext.Provider, { value: router }, createElement(Fragment, null, children, createElement(PagesRouterHydrationMarker)));
 	return AppRouterContext ? createElement(AppRouterContext.Provider, { value: appRouter }, content) : content;
 }
-let _beforePopStateCb;
-let _lastPathnameAndSearch = typeof window !== "undefined" ? window.location.pathname + window.location.search : "";
-let _isFirstPopStateEvent = true;
-let _routerDidNavigate = false;
 function isNextRouterState(state) {
 	return typeof state === "object" && state !== null && "__N" in state && state.__N === true;
 }
+function getRouterStateKey(state) {
+	if (!isNextRouterState(state)) return void 0;
+	return typeof state.key === "string" ? state.key : void 0;
+}
 function handlePagesRouterPopState(e) {
 	const browserUrl = window.location.pathname + window.location.search;
 	const appUrl = stripBasePath(window.location.pathname, __basePath) + window.location.search;
 	const state = e.state;
-	const wasFirst = _isFirstPopStateEvent;
-	_isFirstPopStateEvent = false;
+	const wasFirst = routerRuntimeState.isFirstPopStateEvent;
+	routerRuntimeState.isFirstPopStateEvent = false;
 	if (state !== null && state !== void 0 && !isNextRouterState(state)) return;
-	if (wasFirst && !_routerDidNavigate && isNextRouterState(state)) {
+	if (wasFirst && !routerRuntimeState.routerDidNavigate && isNextRouterState(state)) {
 		const currentLocale = window.__VINEXT_LOCALE__;
-		if (state.options?.locale === currentLocale && typeof state.as === "string" && withBasePath(state.as, __basePath) === _lastPathnameAndSearch) return;
+		if (state.options?.locale === currentLocale && typeof state.as === "string" && withBasePath(state.as, __basePath) === routerRuntimeState.lastPathnameAndSearch) return;
 	}
-	const isHashOnly = browserUrl === _lastPathnameAndSearch;
-	if (_beforePopStateCb !== void 0) {
-		if (!_beforePopStateCb({
+	const isHashOnly = browserUrl === routerRuntimeState.lastPathnameAndSearch;
+	const targetKey = getRouterStateKey(state);
+	let forcedScroll;
+	if (manualScrollRestoration) {
+		const currentKey = routerRuntimeState.currentHistoryKey;
+		if (currentKey !== void 0 && currentKey !== targetKey) saveScrollPositionToSessionStorage(currentKey, getWindowScrollPosition());
+		if (targetKey !== void 0 && currentKey !== targetKey) forcedScroll = readScrollPositionFromSessionStorage(targetKey) ?? {
+			x: 0,
+			y: 0
+		};
+	}
+	if (routerRuntimeState.beforePopStateCb !== void 0) {
+		if (!routerRuntimeState.beforePopStateCb({
 			url: appUrl,
 			as: appUrl,
 			options: { shallow: false }
 		})) return;
 	}
-	_lastPathnameAndSearch = browserUrl;
+	if (targetKey !== void 0) routerRuntimeState.currentHistoryKey = targetKey;
+	routerRuntimeState.lastPathnameAndSearch = browserUrl;
 	if (isHashOnly) {
 		const hashUrl = appUrl + window.location.hash;
 		routerEvents.emit("hashChangeStart", hashUrl, { shallow: false });
@@ -1183,9 +1450,12 @@ function handlePagesRouterPopState(e) {
 	routerEvents.emit("routeChangeStart", fullAppUrl, { shallow: false });
 	routerEvents.emit("beforeHistoryChange", fullAppUrl, { shallow: false });
 	(async () => {
-		if (await runNavigateClient(browserUrl, fullAppUrl, getPagesHtmlFetchUrl(browserUrl, effectiveLocale)) === "completed") {
+		const scrollTarget = manualScrollRestoration ? forcedScroll ?? readScrollPosition(state) ?? {
+			x: 0,
+			y: 0
+		} : readScrollPosition(state);
+		if (await runNavigateClient(browserUrl, fullAppUrl, getPagesHtmlFetchUrl(browserUrl, effectiveLocale), { scroll: scrollTarget }) === "completed") {
 			routerEvents.emit("routeChangeComplete", fullAppUrl, { shallow: false });
-			restoreScrollPosition(e.state);
 			dispatchNavigateEvent();
 		}
 	})();
@@ -1198,9 +1468,22 @@ setPagesRouterPopStateHandler(handlePagesRouterPopState);
 * The provider owns the reactive Pages Router snapshot so next/router and
 * next/compat/router consumers share one context value instead of each hook
 * installing its own global URL-change listener.
+*
+* The PagesRouterCommitBoundary exists for client navigations: its layout
+* callback runs scroll restoration at commit time and resolves the navigation
+* at the same root-commit boundary Next.js awaits before routeChangeComplete.
+* Its onError rejection drives the hard-navigation fallback in runNavigateClient.
+* The same boundary intentionally also wraps SSR and initial hydration, where
+* callbacks default to noopCommit: a hydration-time render error is caught
+* here (React still console.error's it) instead of propagating, matching the
+* navigation-path containment.
 */
-function wrapWithRouterContext(element) {
-	return createElement(PagesRouterProvider, null, element);
+function wrapWithRouterContext(element, onCommit = noopCommit, onError = noopCommit) {
+	const { CommitBoundary, Provider } = getPagesRouterRuntimeComponents();
+	return createElement(CommitBoundary, {
+		onCommit,
+		onError
+	}, createElement(Provider, null, element));
 }
 /**
 * Higher-order component that injects the Pages Router `router` instance as
@@ -1263,7 +1546,7 @@ const RouterMethods = {
 	},
 	beforePopState: (cb) => {
 		if (typeof window === "undefined") throwNoRouterInstance();
-		_beforePopStateCb = cb;
+		routerRuntimeState.beforePopStateCb = cb;
 	},
 	events: routerEvents
 };
@@ -1330,7 +1613,7 @@ const Router = Object.defineProperties(RouterMethods, {
 	isReady: {
 		enumerable: true,
 		get() {
-			return isPagesRouterReady();
+			return isPagesRouterReady() && (typeof window === "undefined" || window.__NEXT_HYDRATED === true);
 		}
 	},
 	isPreview: {
@@ -1346,27 +1629,35 @@ const Router = Object.defineProperties(RouterMethods, {
 		}
 	}
 });
-for (const event of [
+routerRuntimeState.publicRouter = Router;
+const deprecatedRouterEvents = [
 	"routeChangeStart",
 	"beforeHistoryChange",
 	"routeChangeComplete",
 	"routeChangeError",
 	"hashChangeStart",
 	"hashChangeComplete"
-]) {
-	const eventField = `on${event.charAt(0).toUpperCase()}${event.substring(1)}`;
-	routerEvents.on(event, (...args) => {
-		const handler = Router[eventField];
-		if (typeof handler === "function") try {
-			handler(...args);
-		} catch (err) {
-			console.error(`Error when running the Router event: ${eventField}`);
-			console.error(err instanceof Error ? `${err.message}\n${err.stack}` : String(err));
-		}
-	});
+];
+if (!routerRuntimeState.deprecatedEventBridgeInstalled) {
+	routerRuntimeState.deprecatedEventBridgeInstalled = true;
+	for (const event of deprecatedRouterEvents) {
+		const eventField = `on${event.charAt(0).toUpperCase()}${event.substring(1)}`;
+		routerEvents.on(event, (...args) => {
+			const handler = (routerRuntimeState.publicRouter ?? Router)[eventField];
+			if (typeof handler === "function") try {
+				handler(...args);
+			} catch (err) {
+				console.error(`Error when running the Router event: ${eventField}`);
+				console.error(err instanceof Error ? `${err.message}\n${err.stack}` : String(err));
+			}
+		});
+	}
+}
+if (typeof window !== "undefined") {
+	installPagesRouterRuntime();
+	installWindowNext({ router: Router });
 }
-if (typeof window !== "undefined") installWindowNext({ router: Router });
 const _PAGES_NAVIGATION_ACCESSOR_KEY = Symbol.for("vinext.navigation.pagesNavigationContextAccessor");
 globalThis[_PAGES_NAVIGATION_ACCESSOR_KEY] = getPagesNavigationContext;
 //#endregion
-export { _registerRouterStateAccessors, applyNavigationLocale, Router as default, getPagesNavigationContext, getPagesNavigationIsReadyFromSerializedState, isExternalUrl, isHashOnlyChange, setSSRContext, useRouter, withRouter, wrapWithRouterContext };
+export { markPagesRouterReady as _markPagesRouterReady, _registerRouterStateAccessors, applyNavigationLocale, Router as default, getPagesNavigationContext, getPagesNavigationIsReadyFromSerializedState, isExternalUrl, isHashOnlyChange, setSSRContext, useRouter, withRouter, wrapWithRouterContext };