Tauri + NextJS app directory using router.push from next/navigation doesn't render page correctly

[Royceb]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.1.0: Sun Oct  9 20:15:09 PDT 2022; root:xnu-8792.41.9~2/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.12.1
      npm: 8.19.2
      Yarn: 1.22.19
      pnpm: 7.24.2
    Relevant packages:
      next: 13.3.1-canary.16
      eslint-config-next: 13.3.0
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true), Routing (next/router, next/navigation, next/link), Static HTML Export (output: "export")

Link to the code that reproduces this issue

https://github.com/Royceb/nextjs-app-dir-tauri-router-push-example

To Reproduce

1. Ran npx create-next-app@latest --experimental-app

2. Set up Tauri

   2.1: Ran pnpm add -D @tauri-apps/cli

   2.2: Added tauri to package.json scripts. Ran pnpm tauri init.

3. Updated next.config.js to use output: "export" for SSG (Static Generation).

4. Made a simple page at app/examplePage/page.tsx

5. Imported next/navigation in app/page.tsx and added a button that calls router.push('/examplePage').

6. Ran pnpm tauri dev and clicked the button. The app navigated to the example page as expected and rendered it properly.

7. Ran pnpm tauri build and opened the app. Clicked the button. The app did naviate to the example page, but it did not render it properly. The page rendered code as text instead of rendering the page.

Describe the Bug

I was uncertain whether to open this in Tauri or NextJS, so I opened issues in both platforms.

While utilizing a NextJS application, version 13, and the experimental app directory, I encountered an issue where using router.push to navigate to a new page fails to render correctly. Although the navigation occurs successfully, the page only displays code as text instead of rendering the expected content. I have not found any console logs or errors related to this issue.

This problem only arises after building and running the application. Locally, everything seems to be functioning correctly.

Recording: https://user-images.githubusercontent.com/3469263/233444738-73f955e9-2aae-43fb-a92b-d0a4c1dd3c3e.mov

Screenshot:

Expected Behavior

The page should render correctly.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[reyamir]

confirmed, I have same issue in my app

[reyamir]

same issue with <Link> component, but if we add prefetch={false}, it work fine

[reyamir]

I don't know why, but {forceOptimisticNavigation: true} to router.push is fixed this issue

[reyamir]

nope, this still temp solution, add forceOptimisticNavigation will force hard navigation

[reyamir]

hey @Royceb , please reopen this issue, we need official fix, instead of tricky solution

[Kazzuk]

Confirmed I’m also facing the same issue when using the Link component.

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Home
Binaries:
  Node: 18.16.0
  npm: N/A
  Yarn: N/A
  pnpm: 8.3.1
Relevant packages:
  next: 13.3.1
  eslint-config-next: 13.3.1
  react: 18.2.0
  react-dom: 18.2.0

[jlarmstrongiv]

It seems the forceOptimisticNavigation workaround will be removed soon #47905

[Kazzuk]

This pull request #48383 could be related to the issue, yet to test before this pull request.

[Royceb]

This pull request #48383 could be related to the issue, yet to test before this pull request.

I tried with the latest canary (13.3.2-canary.6) and still had the same issue.

[Kazzuk]

This pull request #48383 could be related to the issue, yet to test before this pull request.

I tried with the latest canary (13.3.2-canary.6) and still had the same issue.

Can you try 13.3.2-canary.10? Someone made a change regarding making prefetch not async

[Royceb]

This pull request #48383 could be related to the issue, yet to test before this pull request.

I tried with the latest canary (13.3.2-canary.6) and still had the same issue.

Can you try 13.3.2-canary.10? Someone made a change regarding making prefetch not async

No luck with 13.3.2-canary.10.

[reupen]

I did some further investigation here: tauri-apps/tauri#6762 (comment)

In short, the content-type response header for the .txt file is not set. That causes Next.js to navigate to the .txt file when the route is opened.

The behaviour could be improved on both sides IMO – is it necessary to do that because the content type is not set?

The relevant code in Next.js is here:

next.js/packages/next/src/client/components/router-reducer/fetch-server-response.ts

Lines 78 to 93 in 38d9d2e

	const contentType = res.headers.get('content-type') || ''
	let isFlightResponse = contentType === RSC_CONTENT_TYPE_HEADER
	if (process.env.NODE_ENV === 'production') {
	if (process.env.__NEXT_CONFIG_OUTPUT === 'export') {
	if (!isFlightResponse) {
	isFlightResponse = contentType.startsWith('text/plain')
	}
	}
	}
	// If fetch returns something different than flight response handle it like a mpa navigation
	// If the fetch was not 200, we also handle it like a mpa navigation
	if (!isFlightResponse || !res.ok) {
	return [res.url, undefined]
	}

Thanks