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

[brillout]

Shameless plug: vite-plugin-ssr just added support for Tauri. Example: vite-plugin-ssr.com/tauri.

[jlarmstrongiv]

It seems the forceOptimisticNavigation workaround will be removed soon #47905