tauri: [bug] NextJS app directory using router.push from next/navigation doesn't render page correctly.

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. See video:

https://user-images.githubusercontent.com/3469263/233442201-cdb9872f-cb3a-4bc1-a4bf-acb8ae18aea5.mov

Screenshot: image

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

Reproduction

  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.

Expected behavior

The page should render correctly like it does in dev.

Platform and versions

› OS: Mac OS 13.0.1 X64
  › Node.js: 18.12.1
  › npm: 8.19.2
  › pnpm: 7.24.2
  › yarn: 1.22.19
  › rustup: 1.25.1
  › rustc: 1.67.0
  › cargo: 1.67.0
  › Rust toolchain: stable-aarch64-apple-darwin

Stack trace

No response

Additional context

No response

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Reactions: 1
  • Comments: 16 (9 by maintainers)

Commits related to this issue

Most upvoted comments

How about we just release v1.4 right now? 👀 Would that work for you too?

@hopedope looks like I’m moving to Astro

@nielsdB97 I know it fixes Linux (with features = ["linux-protocol-headers"] for tauri in your Cargo.toml), and also Windows. I don’t have access to macOS to test there.

Hey @Royceb would you re-open this issue?

Adding forceOptimisticNavigation is a temporary fix that degrades the user experience by forcing hard navigation.

See https://github.com/vercel/next.js/issues/48642#issuecomment-1517477699

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

@reupen I can confirm it works on MacOS as well! 🎉 @FabianLars a patch release would be great since this is quite a blocker for everyone starting a new project, following the Tauri NextJS guide. However, I understand this is a more intricate process considering audits and all.

Thanks again both!

could we get some sort of estimation on when this fix will get released?

Pretty soon, what i heard is that there aren’t that many things left we want to get into 1.4 so after the last few things are in only the audit is left. I’m a bit out of the loop so i don’t want to say something like “probably around 2 weeks” 🤷

Afaik there is no patch for 1.3 planned though.

Doesn’t look like you can build any reasonable application using NextJS and Tauri. You can’t have dynamic routes like /posts/1. Not even search params work, eg. posts?postId=1.

Dynamic route issue: https://github.com/vercel/next.js/issues/48022

looks like I am moving to Vite 🎉