Tauri 2.0 + Next.js 15 App Router Template

This is a Tauri project template using Next.js, bootstrapped by combining create-next-app and create tauri-app.

This template uses pnpm as the Node.js dependency manager, and uses the App Router model for Next.js.

Template Features

• TypeScript frontend using Next.js 15 React framework
• TailwindCSS 4 as a utility-first atomic CSS framework
  • The example page in this template app has been updated to use only TailwindCSS
  • While not included by default, consider using React Aria components and/or HeadlessUI components for completely unstyled and fully accessible UI components, which integrate nicely with TailwindCSS
• Opinionated formatting and linting already setup and enabled
  • Biome for a combination of fast formatting, linting, and import sorting of TypeScript code, and ESLint for any missing Next.js linter rules not covered by Biome
  • clippy and rustfmt for Rust code
• GitHub Actions to check code formatting and linting for both TypeScript and Rust

Getting Started

Running development server and use Tauri window

After cloning for the first time, change your app identifier inside src-tauri/tauri.conf.json to your own:

{
  // ...
  // The default "com.tauri.dev" will prevent you from building in release mode
  "identifier": "com.my-application-name.app",
  // ...
}

To develop and run the frontend in a Tauri window:

pnpm tauri dev

This will load the Next.js frontend directly in a Tauri webview window, in addition to starting a development server on localhost:3000. Press Ctrl+Shift+I in a Chromium based WebView (e.g. on Windows) to open the web developer console from the Tauri window.

Building for release

To export the Next.js frontend via SSG and build the Tauri application for release:

pnpm tauri build

Source structure

Next.js frontend source files are located in src/ and Tauri Rust application source files are located in src-tauri/. Please consult the Next.js and Tauri documentation respectively for questions pertaining to either technology.

Caveats

Static Site Generation / Pre-rendering

Next.js is a great React frontend framework which supports server-side rendering (SSR) as well as static site generation (SSG or pre-rendering). For the purposes of creating a Tauri frontend, only SSG can be used since SSR requires an active Node.js server.

Please read into the Next.js documentation for Static Exports for an explanation of supported / unsupported features and caveats.

next/image

The next/image component is an enhancement over the regular <img> HTML element with server-side optimizations to dynamically scale the image quality. This is only supported when deploying the frontend onto Vercel directly, and must be disabled to properly export the frontend statically. As such, the unoptimized property is set to true for the next/image component in the next.config.js configuration. This will allow the image to be served as-is, without changes to its quality, size, or format.

ReferenceError: window/navigator is not defined

If you are using Tauri's invoke function or any OS related Tauri function from within JavaScript, you may encounter this error when importing the function in a global, non-browser context. This is due to the nature of Next.js' dev server effectively running a Node.js server for SSR and hot module replacement (HMR), and Node.js does not have a notion of window or navigator.

The solution is to ensure that the Tauri functions are imported as late as possible from within a client-side React component, or via lazy loading.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

And to learn more about Tauri, take a look at the following resources:

• Tauri Documentation - Guides - learn about the Tauri toolkit.