How to Set Up NextJS with Tauri

#nextjs #tauri #rust #react

Introduction

This tutorial shows how to set up NextJS with Tauri to build small-sized native apps on desktop and mobile.

Why NextJS and Tauri

NextJS is the most popular choice of meta-frameworks for React. Alone, it is used for web development, but with a browser "port", it can be exported to desktop and mobile apps.

Tauri is that "port". Its advantage is in its runtime performance. It builds native apps that are just a fraction of the size of Electron apps (300 MB vs 3 MB) and use less runtime memory. And don't forget that Rust is the backend of Tauri apps!

Requirements

Go to Tauri's site to install everything you need!

Start in the Terminal

1. Open your terminal and navigate to where you want to place your NextJS x Tauri app.

2. Run pnpx create-next-app (or use NPM). Use the default recommended settings.

3. Open the project in your IDE, like VSCode, by using code [your-project-name].

Add Tauri

I will add Tauri manually with the terminal inside VSCode to see all the changes live.

1. Make sure you have the Tauri CLI (version 2) installed with cargo install tauri-cli --version "^2.0.0" --locked. I suggest using Cargo, given it is Rust after all.

2. Run cargo tauri init and follow the default suggestions.

3. Make sure these settings are inside src-tauri/tauri.conf.json.

{
  "build": {
    "beforeDevCommand": "pnpm dev",
    "beforeBuildCommand": "pnpm build",
    "devUrl": "http://localhost:3000",
    "frontendDist": "../out"
  }
}

4. Change next.config.ts.

const isProd = process.env.NODE_ENV === 'production';

const internalHost = process.env.TAURI_DEV_HOST || 'localhost';

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Ensure Next.js uses SSG instead of SSR
  // https://nextjs.org/docs/pages/building-your-application/deploying/static-exports
  output: 'export',
  // Note: This feature is required to use the Next.js Image component in SSG mode.
  // See https://nextjs.org/docs/messages/export-image-api for different workarounds.
  images: {
    unoptimized: true,
  },
  // Configure assetPrefix or else the server won't properly resolve your assets.
  assetPrefix: isProd ? undefined : `http://${internalHost}:3000`,
};

export default nextConfig;

5. Make sure this part is in package.json.

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "eslint",
  "tauri": "tauri"
}

Running in Dev Mode

To run the app in dev mode, run cargo tauri dev. The first time you run this, it will be slower because the Rust backend needs to compile from scratch.

You should get the NextJS default site in a Tauri native app.

The buttons will not open the pages in your browser. By default, a Tauri app does not have this permission set up.

Tauri supports hot reloading the Next part of your app when you change the code.

Building for Production

Run cargo tauri build to compile in release mode for the OS you are developing in. Cross-compilation, like building for Mac from Windows, is very experimental right now and not recommended.

When you run this, you should get this error.

It just means you need to change the identifier of your app to something other than the default name.

In src-tauri/tauri.conf.json, change the identifier field to something else.

{
  "identifier": "com.yourname.dev", 
}

Get the Most Optimized Build Possible

If you ran the Tauri build command on its own, it would build an executable that is between 8 and 9 MB. Let's make this even better by following these suggestions!

Inside src-tauri/Cargo.toml, add the following.

[profile.dev]
incremental = true # Compile your binary in smaller steps.

[profile.release]
codegen-units = 1 # Allows LLVM to perform better optimization.
lto = true # Enables link-time-optimizations.
opt-level = "s" # Prioritizes small binary size. Use `3` if you prefer speed.
panic = "abort" # Higher performance by disabling panic handlers.
strip = true # Ensures debug symbols are removed.

After compiling, you will get two files on Mac: a DMG bundle (2.2 MB) and an executable application (3.6 MB). These files are located inside src-tauri/target/release/bundle/. The locations are also printed on the terminal at the end of the compilation.