Move handling of navigation to pages from new router

packages/next/client/components/app-router.client.tsx

@@ -65,6 +65,14 @@ export async function fetchServerResponse(
     ? urlToUrlWithoutFlightMarker(res.url)
     : undefined
 
+  const isFlightResponse =
+    res.headers.get('content-type') === 'application/octet-stream'
+
+  // If fetch returns something different than flight response handle it like a mpa navigation
+  if (!isFlightResponse) {
+    return [res.url, undefined]
+  }
+
   // Handle the `fetch` readable stream that can be unwrapped by `React.use`.
   const flightData: FlightData = await createFromFetch(Promise.resolve(res))
   return [flightData, canonicalUrl]

packages/next/export/worker.ts

@@ -407,7 +407,6 @@ export default async function exportPage({
               page,
               query,
               curRenderOpts as any,
-              false,
               true
             )
             const html = result?.toUnchunkedString()

packages/next/server/app-render.tsx

@@ -6,7 +6,7 @@ import type { ServerRuntime } from '../types'
 // @ts-ignore
 import React, { experimental_use as use } from 'react'
 
-import { ParsedUrlQuery, stringify as stringifyQuery } from 'querystring'
+import { ParsedUrlQuery } from 'querystring'
 import { createFromReadableStream } from 'next/dist/compiled/react-server-dom-webpack'
 import { NextParsedUrlQuery } from './request-meta'
 import RenderResult from './render-result'
@@ -609,7 +609,6 @@ export async function renderToHTMLOrFlight(
   pathname: string,
   query: NextParsedUrlQuery,
   renderOpts: RenderOpts,
-  isPagesDir: boolean,
   isStaticGeneration: boolean = false
 ): Promise<RenderResult | null> {
   const isFlight = req.headers.__rsc__ !== undefined
@@ -638,32 +637,6 @@ export async function renderToHTMLOrFlight(
     ComponentMod,
   } = renderOpts
 
-  // Handle client-side navigation to pages directory
-  // This is handled before
-  if (isFlight && isPagesDir) {
-    stripInternalQueries(query)
-    const search = stringifyQuery(query)
-
-    // For pages dir, there is only the SSR pass and we don't have the bundled
-    // React subset. Here we directly import the flight renderer with the
-    // unbundled React.
-    // TODO-APP: Is it possible to hard code the flight response here instead of
-    // rendering it?
-    const ReactServerDOMWebpack = require('next/dist/compiled/react-server-dom-webpack/writer.browser.server')
-
-    // Empty so that the client-side router will do a full page navigation.
-    const flightData: FlightData = pathname + (search ? `?${search}` : '')
-    return new FlightRenderResult(
-      ReactServerDOMWebpack.renderToReadableStream(
-        flightData,
-        serverComponentManifest,
-        {
-          onError: flightDataRendererErrorHandler,
-        }
-      ).pipeThrough(createBufferedTransformStream())
-    )
-  }
-
   patchFetch(ComponentMod)
 
   const staticGenerationAsyncStorage = ComponentMod.staticGenerationAsyncStorage

packages/next/server/next-server.ts

@@ -826,18 +826,13 @@ export default class NextNodeServer extends BaseServer {
     renderOpts.serverCSSManifest = this.serverCSSManifest
     renderOpts.fontLoaderManifest = this.fontLoaderManifest
 
-    if (
-      this.nextConfig.experimental.appDir &&
-      (renderOpts.isAppPath || req.headers.__rsc__)
-    ) {
-      const isPagesDir = !renderOpts.isAppPath
+    if (this.nextConfig.experimental.appDir && renderOpts.isAppPath) {
       return appRenderToHTMLOrFlight(
         req.originalRequest,
         res.originalResponse,
         pathname,
         query,
-        renderOpts,
-        isPagesDir
+        renderOpts
       )
     }
 

test/e2e/app-dir/index.test.ts

@@ -524,18 +524,21 @@ describe('app dir', () => {
         }
       })
 
-      // TODO-APP: should enable when implemented
-      it.skip('should allow linking from app page to pages page', async () => {
+      it('should allow linking from app page to pages page', async () => {
         const browser = await webdriver(next.url, '/pages-linking')
 
         try {
           // Click the link.
           await browser.elementById('app-link').click()
-          await browser.waitForElementByCss('#pages-link')
+          expect(await browser.waitForElementByCss('#pages-link').text()).toBe(
+            'To App Page'
+          )
 
           // Click the other link.
           await browser.elementById('pages-link').click()
-          await browser.waitForElementByCss('#app-link')
+          expect(await browser.waitForElementByCss('#app-link').text()).toBe(
+            'To Pages Page'
+          )
         } finally {
           await browser.close()
         }