vinext 0.1.2 → 0.1.3

package/dist/server/dev-server.js

@@ -6,6 +6,7 @@ import { NEXTJS_DEPLOYMENT_ID_HEADER } from "./headers.js";
 import { normalizeStaticPathname } from "../routing/route-pattern.js";
 import { importModule, reportRequestError } from "./instrumentation.js";
 import { buildCacheStateHeaders } from "./cache-headers.js";
+import { isUnknownRecord } from "../utils/record.js";
 import { _runWithCacheState } from "../shims/cache.js";
 import { NEVER_CACHE_CONTROL, NO_STORE_CACHE_CONTROL } from "./cache-control.js";
 import { buildMissIsrCacheControl, decideIsr } from "./isr-decision.js";
@@ -28,7 +29,8 @@ import { resolvePagesPageMethodResponse } from "./pages-page-method.js";
 import { isSerializableProps } from "./pages-serializable-props.js";
 import { loadUserDocumentInitialProps, runDocumentRenderPage } from "./pages-document-initial-props.js";
 import { callDocumentGetInitialProps } from "./document-initial-head.js";
-import { loadPagesGetInitialProps } from "./pages-get-initial-props.js";
+import { hasPagesGetInitialProps, loadDevAppInitialProps, loadPagesGetInitialProps } from "./pages-get-initial-props.js";
+import { isBotUserAgent } from "../utils/html-limited-bots.js";
 import path from "node:path";
 import React from "react";
 import { renderToReadableStream } from "react-dom/server.edge";
@@ -60,7 +62,7 @@ async function renderIsrPassToStringAsync(element) {
 * (`buildPagesRedirectResponse`) and Next.js's `render.tsx` `__N_REDIRECT`
 * handling. See AGENTS.md "dev and prod server parity".
 */
-function writeGsspRedirect(res, redirect, isDataReq) {
+function writeGsspRedirect(res, redirect, isDataReq, props) {
 	const status = redirect.statusCode ?? (redirect.permanent ? 308 : 307);
 	let dest = redirect.destination;
 	if (!dest.startsWith("http://") && !dest.startsWith("https://")) dest = dest.replace(/^[\\/]+/, "/");
@@ -69,10 +71,14 @@ function writeGsspRedirect(res, redirect, isDataReq) {
 		const dataHeaders = { "Content-Type": "application/json" };
 		if (deploymentId) dataHeaders[NEXTJS_DEPLOYMENT_ID_HEADER] = deploymentId;
 		res.writeHead(200, dataHeaders);
-		res.end(JSON.stringify({ pageProps: {
-			__N_REDIRECT: dest,
-			__N_REDIRECT_STATUS: status
-		} }));
+		res.end(JSON.stringify({
+			...props,
+			pageProps: {
+				...isUnknownRecord(props.pageProps) ? props.pageProps : {},
+				__N_REDIRECT: dest,
+				__N_REDIRECT_STATUS: status
+			}
+		}));
 		return;
 	}
 	res.writeHead(status, { Location: dest });
@@ -190,12 +196,12 @@ function parseCookieLocale(req, i18nConfig) {
 * 4. Render the component to HTML
 * 5. Wrap in _document shell and send response
 */
-function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatcher, basePath = "", trailingSlash = false, hasMiddleware = false, hasRewrites = false, clientTraceMetadata) {
+function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatcher, basePath = "", trailingSlash = false, hasMiddleware = false, hasRewrites = false, clientTraceMetadata, htmlLimitedBots) {
 	const matcher = fileMatcher ?? createValidFileMatcher();
 	const pagePatterns = routes.map((r) => patternToNextFormat(r.pattern));
 	const _alsRegistration = Promise.all([runner.import("vinext/head-state"), runner.import("vinext/router-state")]);
 	_alsRegistration.catch(() => {});
-	return async (req, res, url, statusCode, isDataReq = false) => {
+	return async (req, res, url, statusCode, isDataReq = false, originalUrl = url) => {
 		const _reqStart = now();
 		let _compileEnd;
 		let _renderEnd;
@@ -245,6 +251,11 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 			return;
 		}
 		const { route, params } = match;
+		req.url = originalUrl;
+		const parsedResolvedUrl = new URL(localeStrippedUrl, "http://vinext.local");
+		const originalRequestSearch = new URL(originalUrl, "http://vinext.local").search;
+		const gsspResolvedUrl = parsedResolvedUrl.pathname + originalRequestSearch;
+		const requestAsPath = isDataReq ? gsspResolvedUrl : originalUrl;
 		const userFacingParams = route.isDynamic ? params : null;
 		const query = mergeRouteParamsIntoQuery(parseQueryString(url), params);
 		return runWithRequestContext(createRequestContext(), async () => {
@@ -278,7 +289,7 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 				if (typeof routerShim.setSSRContext === "function") routerShim.setSSRContext({
 					pathname: patternToNextFormat(route.pattern),
 					query,
-					asPath: url,
+					asPath: requestAsPath,
 					navigationIsReady,
 					nextData: pagesNextData,
 					locale: locale ?? currentDefaultLocale,
@@ -312,8 +323,10 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 					}
 				}
 				let pageProps = {};
+				let renderProps = { pageProps };
 				let isrRevalidateSeconds = null;
 				let isFallbackRender = false;
+				let shouldPersistFallbackData = false;
 				if (typeof pageModule.getStaticPaths === "function" && route.isDynamic) {
 					const pathsResult = await pageModule.getStaticPaths({
 						locales: i18nConfig?.locales ?? [],
@@ -344,12 +357,15 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 						await renderErrorPage(server, runner, req, res, url, pagesDir, 404, routerShim.wrapWithRouterContext, matcher);
 						return;
 					}
-					if (fallback === true && !isValidPath && !isDataReq) {
-						isFallbackRender = true;
-						if (typeof routerShim.setSSRContext === "function") routerShim.setSSRContext({
+					const userAgentHeader = req.headers["user-agent"];
+					const userAgent = Array.isArray(userAgentHeader) ? userAgentHeader[0] : userAgentHeader;
+					const isBotRequest = !!userAgent && isBotUserAgent(userAgent, htmlLimitedBots);
+					if (fallback === true && !isValidPath && !isDataReq && !isBotRequest) {
+						isFallbackRender = (await isrGet(pagesIsrCacheKey(url.split("?")[0])))?.value.value?.kind !== "PAGES";
+						if (isFallbackRender && typeof routerShim.setSSRContext === "function") routerShim.setSSRContext({
 							pathname: patternToNextFormat(route.pattern),
 							query,
-							asPath: url,
+							asPath: requestAsPath,
 							navigationIsReady: false,
 							locale: locale ?? currentDefaultLocale,
 							locales: i18nConfig?.locales,
@@ -358,25 +374,71 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 							isFallback: true
 						});
 					}
+					shouldPersistFallbackData = fallback === true && !isValidPath && isDataReq;
 				}
 				const gsspExtraHeaders = {};
+				const hasAppGetInitialProps = hasPagesGetInitialProps(AppComponent);
+				async function loadAppInitialProps() {
+					if (!hasAppGetInitialProps) return false;
+					const appResult = await loadDevAppInitialProps({
+						appComponent: AppComponent,
+						appTree: (appTreeProps) => {
+							const appTree = React.createElement(AppComponent, {
+								...appTreeProps,
+								Component: PageComponent,
+								pageProps: appTreeProps.pageProps,
+								router: routerShim.default
+							});
+							return typeof routerShim.wrapWithRouterContext === "function" ? routerShim.wrapWithRouterContext(appTree) : appTree;
+						},
+						component: PageComponent,
+						req,
+						res,
+						pathname: patternToNextFormat(route.pattern),
+						query,
+						asPath: requestAsPath,
+						locale: locale ?? currentDefaultLocale,
+						locales: i18nConfig?.locales,
+						defaultLocale: currentDefaultLocale
+					});
+					if (appResult.kind === "response-sent") return true;
+					if (appResult.kind === "render") {
+						pageProps = appResult.pageProps;
+						renderProps = appResult.renderProps;
+					}
+					return false;
+				}
 				if (typeof pageModule.getServerSideProps === "function" && !isFallbackRender) {
+					if (await loadAppInitialProps()) return;
+					renderProps = {
+						...renderProps,
+						__N_SSP: true
+					};
 					const headersBeforeGSSP = new Set(Object.keys(res.getHeaders()));
 					const context = {
 						params: userFacingParams,
 						req,
 						res,
 						query,
-						resolvedUrl: localeStrippedUrl,
+						resolvedUrl: gsspResolvedUrl,
 						locale: locale ?? currentDefaultLocale,
 						locales: i18nConfig?.locales,
 						defaultLocale: currentDefaultLocale
 					};
 					const result = await pageModule.getServerSideProps(context);
 					if (res.writableEnded) return;
-					if (result && "props" in result) pageProps = await Promise.resolve(result.props);
+					if (result && "props" in result) {
+						pageProps = {
+							...pageProps,
+							...await Promise.resolve(result.props)
+						};
+						renderProps = {
+							...renderProps,
+							pageProps
+						};
+					}
 					if (result && "redirect" in result) {
-						writeGsspRedirect(res, result.redirect, isDataReq);
+						writeGsspRedirect(res, result.redirect, isDataReq, renderProps);
 						return;
 					}
 					if (result && "notFound" in result && result.notFound) {
@@ -417,7 +479,7 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 					const cacheKey = pagesIsrCacheKey(url.split("?")[0]);
 					const cached = await isrGet(cacheKey);
 					const isOnDemandRevalidate = isOnDemandRevalidateRequest(req.headers[PRERENDER_REVALIDATE_HEADER]);
-					if (!isOnDemandRevalidate && cached && !cached.isStale && cached.value.value?.kind === "PAGES" && !scriptNonce && !isDataReq) {
+					if (!isOnDemandRevalidate && cached && !cached.isStale && cached.value.value?.kind === "PAGES" && !cached.value.value.generatedFromDataRequest && !scriptNonce && !isDataReq) {
 						const cachedHtml = cached.value.value.html;
 						const transformedHtml = await server.transformIndexHtml(url, cachedHtml);
 						const { cacheControl: hitCacheControl } = decideIsr({
@@ -435,12 +497,84 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 						res.end(transformedHtml);
 						return;
 					}
-					if (!isOnDemandRevalidate && cached && cached.isStale && cached.value.value?.kind === "PAGES" && !scriptNonce && !isDataReq) {
+					if (!isOnDemandRevalidate && cached && cached.isStale && cached.value.value?.kind === "PAGES" && !cached.value.value.generatedFromDataRequest && !scriptNonce && !isDataReq) {
 						const cachedHtml = cached.value.value.html;
 						const transformedHtml = await server.transformIndexHtml(url, cachedHtml);
 						triggerBackgroundRegeneration(cacheKey, async () => {
-							return runWithRequestContext(createRequestContext({ executionContext: null }), async () => {
+							return runWithRequestContext(createRequestContext({
+								executionContext: null,
+								ssrContext: {
+									pathname: patternToNextFormat(route.pattern),
+									query,
+									asPath: requestAsPath,
+									navigationIsReady,
+									locale: locale ?? currentDefaultLocale,
+									locales: i18nConfig?.locales,
+									defaultLocale: currentDefaultLocale
+								},
+								i18nContext: i18nConfig ? {
+									locale: locale ?? currentDefaultLocale,
+									locales: i18nConfig.locales,
+									defaultLocale: currentDefaultLocale,
+									domainLocales,
+									hostname: req.headers.host?.split(":", 1)[0]
+								} : null
+							}), async () => {
 								ensureFetchPatch();
+								let freshPageProps = {};
+								let freshRenderProps = { pageProps: freshPageProps };
+								let RegenApp = null;
+								const appPath = path.join(pagesDir, "_app");
+								if (findFileWithExtensions(appPath, matcher)) try {
+									RegenApp = (await runner.import(appPath)).default ?? null;
+								} catch {}
+								if (RegenApp && hasPagesGetInitialProps(RegenApp)) {
+									const regenReq = {
+										url: req.url,
+										headers: req.headers,
+										method: req.method
+									};
+									const regenRes = {
+										headersSent: false,
+										writableEnded: false,
+										statusCode: 200,
+										getHeaders() {
+											return {};
+										}
+									};
+									const initialProps = await loadPagesGetInitialProps(RegenApp, {
+										AppTree: (appTreeProps) => {
+											const appTree = React.createElement(RegenApp, {
+												...appTreeProps,
+												Component: pageModule.default,
+												pageProps: appTreeProps.pageProps,
+												router: routerShim.default
+											});
+											return typeof routerShim.wrapWithRouterContext === "function" ? routerShim.wrapWithRouterContext(appTree) : appTree;
+										},
+										Component: pageModule.default,
+										router: {
+											pathname: patternToNextFormat(route.pattern),
+											query,
+											asPath: requestAsPath
+										},
+										ctx: {
+											req: regenReq,
+											res: regenRes,
+											pathname: patternToNextFormat(route.pattern),
+											query,
+											asPath: requestAsPath,
+											locale: locale ?? currentDefaultLocale,
+											locales: i18nConfig?.locales,
+											defaultLocale: currentDefaultLocale
+										}
+									});
+									if (regenRes.headersSent || regenRes.writableEnded) return;
+									if (initialProps) {
+										freshRenderProps = initialProps;
+										freshPageProps = isUnknownRecord(initialProps.pageProps) ? initialProps.pageProps : {};
+									}
+								}
 								const freshResult = await pageModule.getStaticProps({
 									params: userFacingParams,
 									locale: locale ?? currentDefaultLocale,
@@ -449,13 +583,20 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 									revalidateReason: "stale"
 								});
 								if (freshResult && "props" in freshResult) {
-									const revalidate = typeof freshResult.revalidate === "number" ? freshResult.revalidate : 0;
+									const revalidate = typeof freshResult.revalidate === "number" ? freshResult.revalidate : cached.value.cacheControl?.revalidate ?? 0;
 									if (revalidate > 0) {
-										const freshProps = freshResult.props;
+										freshPageProps = {
+											...freshPageProps,
+											...freshResult.props
+										};
+										freshRenderProps = {
+											...freshRenderProps,
+											pageProps: freshPageProps
+										};
 										if (typeof routerShim.setSSRContext === "function") routerShim.setSSRContext({
 											pathname: patternToNextFormat(route.pattern),
 											query,
-											asPath: url,
+											asPath: requestAsPath,
 											navigationIsReady,
 											locale: locale ?? currentDefaultLocale,
 											locales: i18nConfig?.locales,
@@ -473,15 +614,12 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 												hostname: req.headers.host?.split(":", 1)[0]
 											});
 										}
-										let RegenApp = null;
-										const appPath = path.join(pagesDir, "_app");
-										if (findFileWithExtensions(appPath, matcher)) try {
-											RegenApp = (await runner.import(appPath)).default ?? null;
-										} catch {}
 										let el = RegenApp ? React.createElement(RegenApp, {
+											...freshRenderProps,
 											Component: pageModule.default,
-											pageProps: freshProps
-										}) : React.createElement(pageModule.default, freshProps);
+											pageProps: freshRenderProps.pageProps,
+											router: routerShim.default
+										}) : React.createElement(pageModule.default, freshPageProps);
 										if (routerShim.wrapWithRouterContext) el = routerShim.wrapWithRouterContext(el);
 										const freshBody = await renderIsrPassToStringAsync(withScriptNonce(el, scriptNonce));
 										const viteRoot = server.config?.root;
@@ -497,7 +635,7 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 											}
 										};
 										await isrSet(cacheKey, buildPagesCacheValue(`<!DOCTYPE html><html><head></head><body><div id="__next">${freshBody}</div>${`<script>window.__NEXT_DATA__ = ${safeJsonStringify({
-											props: { pageProps: freshProps },
+											props: freshRenderProps,
 											page: patternToNextFormat(route.pattern),
 											query: params,
 											buildId: process.env.__VINEXT_BUILD_ID,
@@ -507,7 +645,7 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 											defaultLocale: currentDefaultLocale,
 											domainLocales,
 											...freshPagesNextData
-										})}${i18nConfig ? `;window.__VINEXT_LOCALE__=${safeJsonStringify(locale ?? currentDefaultLocale)};window.__VINEXT_LOCALES__=${safeJsonStringify(i18nConfig.locales)};window.__VINEXT_DEFAULT_LOCALE__=${safeJsonStringify(currentDefaultLocale)}` : ""}<\/script>`}\n  ${cachedHtml.match(/<script type="module">[\s\S]*?<\/script>/)?.[0] ?? ""}</body></html>`, freshProps), revalidate);
+										})}${i18nConfig ? `;window.__VINEXT_LOCALE__=${safeJsonStringify(locale ?? currentDefaultLocale)};window.__VINEXT_LOCALES__=${safeJsonStringify(i18nConfig.locales)};window.__VINEXT_DEFAULT_LOCALE__=${safeJsonStringify(currentDefaultLocale)}` : ""}<\/script>`}\n  ${cachedHtml.match(/<script type="module">[\s\S]*?<\/script>/)?.[0] ?? ""}</body></html>`, freshRenderProps), revalidate);
 										setRevalidateDuration(cacheKey, revalidate);
 									}
 								}
@@ -539,10 +677,25 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 						defaultLocale: currentDefaultLocale,
 						revalidateReason: isOnDemandRevalidate ? "on-demand" : "stale"
 					};
-					const result = await pageModule.getStaticProps(context);
-					if (result && "props" in result) pageProps = result.props;
+					const generatedPageData = !isOnDemandRevalidate && cached?.isStale === false && cached?.value.value?.kind === "PAGES" && cached.value.value.generatedFromDataRequest && isUnknownRecord(cached.value.value.pageData) ? cached.value.value.pageData : null;
+					if (!generatedPageData && await loadAppInitialProps()) return;
+					const result = generatedPageData ? null : await pageModule.getStaticProps(context);
+					if (generatedPageData) {
+						renderProps = generatedPageData;
+						pageProps = isUnknownRecord(renderProps.pageProps) ? renderProps.pageProps : {};
+					}
+					if (result && "props" in result) {
+						pageProps = {
+							...pageProps,
+							...await Promise.resolve(result.props)
+						};
+						renderProps = {
+							...renderProps,
+							pageProps
+						};
+					}
 					if (result && "redirect" in result) {
-						writeGsspRedirect(res, result.redirect, isDataReq);
+						writeGsspRedirect(res, result.redirect, isDataReq, renderProps);
 						return;
 					}
 					if (result && "notFound" in result && result.notFound) {
@@ -559,25 +712,48 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 					}
 					if (result && "props" in result) isSerializableProps(patternToNextFormat(route.pattern), "getStaticProps", pageProps);
 					if (typeof result?.revalidate === "number" && result.revalidate > 0) isrRevalidateSeconds = result.revalidate;
+					else if (cached?.value.value?.kind === "PAGES" && cached.value.value.generatedFromDataRequest) isrRevalidateSeconds = cached.value.cacheControl?.revalidate ?? 31536e3;
 				}
-				if (typeof pageModule.getServerSideProps !== "function" && typeof pageModule.getStaticProps !== "function") {
+				if (typeof pageModule.getServerSideProps !== "function" && typeof pageModule.getStaticProps !== "function" && hasAppGetInitialProps) {
+					if (await loadAppInitialProps()) return;
+				}
+				if (typeof pageModule.getServerSideProps !== "function" && typeof pageModule.getStaticProps !== "function" && !hasAppGetInitialProps) {
 					const initialProps = await loadPagesGetInitialProps(PageComponent, {
 						req,
 						res,
 						pathname: patternToNextFormat(route.pattern),
 						query,
-						asPath: url,
+						asPath: requestAsPath,
 						locale: locale ?? currentDefaultLocale,
 						locales: i18nConfig?.locales,
 						defaultLocale: currentDefaultLocale
 					});
 					if (res.headersSent || res.writableEnded) return;
-					if (initialProps) pageProps = {
-						...pageProps,
-						...initialProps
-					};
+					if (initialProps) {
+						pageProps = {
+							...pageProps,
+							...initialProps
+						};
+						renderProps = {
+							...renderProps,
+							pageProps
+						};
+					}
 				}
 				if (isDataReq) {
+					if (shouldPersistFallbackData) {
+						const cacheKey = pagesIsrCacheKey(url.split("?")[0]);
+						const revalidateSeconds = isrRevalidateSeconds ?? 31536e3;
+						await isrSet(cacheKey, {
+							kind: "PAGES",
+							html: "",
+							pageData: renderProps,
+							generatedFromDataRequest: true,
+							headers: void 0,
+							status: void 0
+						}, revalidateSeconds);
+						setRevalidateDuration(cacheKey, revalidateSeconds);
+					}
 					const dataHeaders = { "Content-Type": "application/json" };
 					if (gsspExtraHeaders) for (const [k, v] of Object.entries(gsspExtraHeaders)) dataHeaders[k] = v;
 					const dataRoutePattern = patternToNextFormat(route.pattern);
@@ -586,7 +762,7 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 						if (deploymentId) dataHeaders[NEXTJS_DEPLOYMENT_ID_HEADER] = deploymentId;
 					}
 					res.writeHead(statusCode ?? 200, dataHeaders);
-					res.end(JSON.stringify({ pageProps }));
+					res.end(JSON.stringify(renderProps));
 					_renderEnd = now();
 					return;
 				}
@@ -594,8 +770,10 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 				let element;
 				const wrapWithRouterContext = routerShim.wrapWithRouterContext;
 				if (AppComponent) element = createElement(AppComponent, {
+					...renderProps,
 					Component: PageComponent,
-					pageProps
+					pageProps: renderProps.pageProps,
+					router: routerShim.default
 				});
 				else element = createElement(PageComponent, pageProps);
 				if (wrapWithRouterContext) element = wrapWithRouterContext(element);
@@ -647,11 +825,14 @@ function createSSRHandler(server, runner, routes, pagesDir, i18nConfig, fileMatc
 import "vinext/instrumentation-client";
 import React from "react";
 import { hydrateRoot } from "react-dom/client";
-import { installPagesRouterRuntime } from "vinext/pages-router-runtime";
-import { wrapWithRouterContext } from "next/router";
+import Router, { wrapWithRouterContext } from "next/router";
 
 const nextData = window.__NEXT_DATA__;
-const { pageProps } = nextData.props;
+const props = nextData.props && typeof nextData.props === "object" ? nextData.props : {};
+const rawPageProps = props.pageProps;
+const pageProps = rawPageProps && typeof rawPageProps === "object" ? rawPageProps : {};
+window.__VINEXT_PAGE_LOADERS__ = { [nextData.page]: () => import("${pageModuleUrl}") };
+window.__VINEXT_APP_LOADER__ = ${appModuleUrl ? `() => import("${appModuleUrl}")` : "undefined"};
 
 async function hydrate() {
   let hydrateRootOptions;
@@ -673,24 +854,34 @@ async function hydrate() {
   const appModule = await import("${appModuleUrl}");
   const AppComponent = appModule.default;
   window.__VINEXT_APP__ = AppComponent;
-  element = React.createElement(AppComponent, { Component: PageComponent, pageProps });
+  element = React.createElement(AppComponent, {
+    ...props,
+    Component: PageComponent,
+    pageProps: rawPageProps,
+    router: Router,
+  });
   ` : `
   element = React.createElement(PageComponent, pageProps);
   `}
-  element = wrapWithRouterContext(element);
+  let resolveHydrationCommit;
+  const hydrationCommitted = new Promise((resolve) => { resolveHydrationCommit = resolve; });
+  element = wrapWithRouterContext(element, resolveHydrationCommit);
   const root = hydrateRoot(document.getElementById("__next"), element, hydrateRootOptions);
   window.__VINEXT_ROOT__ = root;
-  installPagesRouterRuntime();
+  await hydrationCommitted;
   const hydratedAt = performance.now();
   window.__VINEXT_HYDRATED_AT = hydratedAt;
   window.__NEXT_HYDRATED = true;
   window.__NEXT_HYDRATED_AT = hydratedAt;
   window.__NEXT_HYDRATED_CB?.();
+  if (nextData.isFallback) {
+    await Router.replace(window.location.pathname + window.location.search + window.location.hash, undefined, { _h: 1, scroll: false });
+  }
 }
 hydrate();
 <\/script>`;
 				const nextDataScript = createInlineScriptTag(`window.__NEXT_DATA__ = ${safeJsonStringify({
-					props: { pageProps },
+					props: renderProps,
 					page: patternToNextFormat(route.pattern),
 					query: params,
 					buildId: process.env.__VINEXT_BUILD_ID,
@@ -726,7 +917,7 @@ hydrate();
 					documentContext: {
 						pathname: patternToNextFormat(route.pattern),
 						query,
-						asPath: url
+						asPath: requestAsPath
 					},
 					enhancePageElement: (renderPageOpts) => {
 						let FinalApp = AppComponent;
@@ -735,6 +926,7 @@ hydrate();
 						if (renderPageOpts && typeof renderPageOpts.enhanceComponent === "function") FinalComp = renderPageOpts.enhanceComponent(FinalComp);
 						let enhancedElement;
 						if (FinalApp) enhancedElement = createElement(FinalApp, {
+							...renderProps,
 							Component: FinalComp,
 							pageProps
 						});
@@ -753,6 +945,7 @@ hydrate();
 				if (typeof routerShim.setSSRContext === "function") routerShim.setSSRContext(null);
 				if (!scriptNonce && isrRevalidateSeconds !== null && isrRevalidateSeconds > 0) {
 					let isrElement = AppComponent ? createElement(AppComponent, {
+						...renderProps,
 						Component: pageModule.default,
 						pageProps
 					}) : createElement(pageModule.default, pageProps);
@@ -767,7 +960,7 @@ hydrate();
 				reportRequestError(e instanceof Error ? e : new Error(String(e)), {
 					path: url,
 					method: req.method ?? "GET",
-					headers: Object.fromEntries(Object.entries(req.headers).map(([k, v]) => [k, Array.isArray(v) ? v.join(", ") : String(v ?? "")]))
+					headers: Object.fromEntries(Object.entries(req.headers).filter(([k]) => !k.startsWith(":")).map(([k, v]) => [k, Array.isArray(v) ? v.join(", ") : String(v ?? "")]))
 				}, {
 					routerKind: "Pages Router",
 					routePath: route.pattern,

package/dist/server/hybrid-route-priority.d.ts

@@ -0,0 +1,22 @@
+//#region src/server/hybrid-route-priority.d.ts
+type HybridRoutePriorityRoute = {
+  isDynamic: boolean;
+  pattern: string;
+  sourcePath?: string | null;
+};
+declare function validateHybridRouteConflicts(pagesRoutes: readonly HybridRoutePriorityRoute[], appRoutes: readonly HybridRoutePriorityRoute[]): void;
+/**
+ * Return whether a matched Pages Router route should own the request instead
+ * of a matched App Router route.
+ *
+ * Next.js registers Pages providers before App providers, then sorts all
+ * dynamic route pathnames together in DefaultRouteMatcherManager. Vinext keeps
+ * separate route tries for each router, so the hybrid boundary needs to apply
+ * that same cross-router ordering after both routers have produced their best
+ * local match. The decision itself lives in
+ * `routing/utils.ts#compareHybridRoutePatterns` so the server and client
+ * always reach the same answer.
+ */
+declare function pagesRouteHasPriorityOverAppRoute(pagesRoute: HybridRoutePriorityRoute, appRoute: HybridRoutePriorityRoute | null): boolean;
+//#endregion
+export { HybridRoutePriorityRoute, pagesRouteHasPriorityOverAppRoute, validateHybridRouteConflicts };

package/dist/server/hybrid-route-priority.js

@@ -0,0 +1,33 @@
+import { compareHybridRoutePatterns } from "../routing/utils.js";
+import { validateRoutePatterns } from "../routing/route-validation.js";
+//#region src/server/hybrid-route-priority.ts
+function validateHybridRouteConflicts(pagesRoutes, appRoutes) {
+	const pagesByPattern = new Map(pagesRoutes.map((route) => [route.pattern, route]));
+	const conflicts = appRoutes.flatMap((appRoute) => {
+		const pagesRoute = pagesByPattern.get(appRoute.pattern);
+		return pagesRoute === void 0 ? [] : [[pagesRoute, appRoute]];
+	});
+	if (conflicts.length > 0) {
+		const message = `Conflicting app and page file${conflicts.length === 1 ? " was" : "s were"} found, please remove the conflicting files to continue:`;
+		throw new Error(`${message}\n${conflicts.map(([pagesRoute, appRoute]) => `  "${pagesRoute.sourcePath ?? pagesRoute.pattern}" - "${appRoute.sourcePath ?? appRoute.pattern}"`).join("\n")}`);
+	}
+	validateRoutePatterns([...pagesRoutes.map((route) => route.pattern), ...appRoutes.map((route) => route.pattern)]);
+}
+/**
+* Return whether a matched Pages Router route should own the request instead
+* of a matched App Router route.
+*
+* Next.js registers Pages providers before App providers, then sorts all
+* dynamic route pathnames together in DefaultRouteMatcherManager. Vinext keeps
+* separate route tries for each router, so the hybrid boundary needs to apply
+* that same cross-router ordering after both routers have produced their best
+* local match. The decision itself lives in
+* `routing/utils.ts#compareHybridRoutePatterns` so the server and client
+* always reach the same answer.
+*/
+function pagesRouteHasPriorityOverAppRoute(pagesRoute, appRoute) {
+	if (appRoute === null) return true;
+	return compareHybridRoutePatterns(pagesRoute.pattern, pagesRoute.isDynamic, appRoute.pattern, appRoute.isDynamic) === "pages";
+}
+//#endregion
+export { pagesRouteHasPriorityOverAppRoute, validateHybridRouteConflicts };

package/dist/server/image-optimization.d.ts

@@ -33,7 +33,15 @@ declare function isImageOptimizationPath(pathname: string): boolean;
  * Controls SVG handling and security headers for the image endpoint.
  */
 type ImageConfig = {
-  /** Allow SVG through the image optimization endpoint. Default: false. */dangerouslyAllowSVG?: boolean;
+  /** Allowed device widths. Defaults to Next.js device sizes. */deviceSizes?: number[]; /** Allowed fixed-image widths. Defaults to Next.js image sizes. */
+  imageSizes?: number[];
+  /**
+   * Allowed output qualities. When unset, any quality from 1-100 is permitted
+   * (matches Next.js: an unset `images.qualities` is not restricted to a single
+   * value). When set, only the listed qualities are accepted.
+   */
+  qualities?: number[]; /** Allow SVG through the image optimization endpoint. Default: false. */
+  dangerouslyAllowSVG?: boolean;
   /**
    * Allow image optimization for hostnames that resolve to private IP addresses.
    * Default: false.
@@ -54,18 +62,19 @@ type ImageConfig = {
  */
 declare const DEFAULT_DEVICE_SIZES: number[];
 declare const DEFAULT_IMAGE_SIZES: number[];
+type ParseImageParamsOptions = {
+  isDev?: boolean;
+};
+declare function resolveDevImageRedirect(requestUrl: URL, allowedWidths?: number[], allowedQualities?: number[], options?: ParseImageParamsOptions): string | null;
 /**
  * Parse and validate image optimization query parameters.
  * Returns null if the request is malformed.
  *
- * When `allowedWidths` is provided, the width must be 0 (no resize) or
- * exactly match one of the allowed values. This matches Next.js behavior
- * where only configured deviceSizes and imageSizes are accepted.
- *
- * When `allowedWidths` is not provided, any width from 0 to ABSOLUTE_MAX_WIDTH
- * is accepted (backwards-compatible fallback).
+ * Ported from Next.js:
+ * test/integration/image-optimizer/test/index.test.ts
+ * https://github.com/vercel/next.js/blob/canary/test/integration/image-optimizer/test/index.test.ts
  */
-declare function parseImageParams(url: URL, allowedWidths?: number[]): {
+declare function parseImageParams(url: URL, allowedWidths?: number[], allowedQualities?: number[], options?: ParseImageParamsOptions): {
   imageUrl: string;
   width: number;
   quality: number;
@@ -113,4 +122,4 @@ type ImageHandlers = {
  */
 declare function handleImageOptimization(request: Request, handlers: ImageHandlers, allowedWidths?: number[], imageConfig?: ImageConfig): Promise<Response>;
 //#endregion
-export { DEFAULT_DEVICE_SIZES, DEFAULT_IMAGE_SIZES, IMAGE_CACHE_CONTROL, IMAGE_CONTENT_SECURITY_POLICY, IMAGE_OPTIMIZATION_PATH, ImageConfig, ImageHandlers, VINEXT_IMAGE_OPTIMIZATION_PATH, handleImageOptimization, isImageOptimizationPath, isSafeImageContentType, negotiateImageFormat, parseImageParams };
+export { DEFAULT_DEVICE_SIZES, DEFAULT_IMAGE_SIZES, IMAGE_CACHE_CONTROL, IMAGE_CONTENT_SECURITY_POLICY, IMAGE_OPTIMIZATION_PATH, ImageConfig, ImageHandlers, ParseImageParamsOptions, VINEXT_IMAGE_OPTIMIZATION_PATH, handleImageOptimization, isImageOptimizationPath, isSafeImageContentType, negotiateImageFormat, parseImageParams, resolveDevImageRedirect };