tldr

Search tldr

By Melvin Oostendorp in Engineering2 min read

Tauri v2 with Next.js: A Monorepo Guide

A practical blueprint for using Tauri v2, Next.js, and Turborepo to ship one React-based application across the web, iOS, Android, Windows, macOS, and Linux. It demonstrates shared UI, a Next.js API backend, and Tauri native integration through a text-analysis example.

Share

Tauri v2 with Next.js: A Monorepo Guide

Author: Melvin Oostendorp | Published: 2025-01-30 | Generated: 2025-02-10 | Domain: melvinoostendorp.nl
Tags: ‘#tauri’ ‘#nextjs’ ‘#monorepo’ ‘#turborepo’ ‘#react’ ‘#crossplatform’

TLDR

This guide builds a Tauri v2 and Next.js monorepo for a single React codebase targeting web, mobile, and desktop platforms. It uses Turborepo for workspace orchestration, a shared Tailwind/Shadcn UI package for consistent interfaces, and Next.js API routes for backend functionality. The example text-analysis app validates requests with Zod, analyzes text with natural, and shows how Tauri can invoke Rust-backed native commands when platform APIs are needed.

Key Takeaways

  • Why Tauri over Expo or Electron: Tauri was selected for its lightweight WebView-based architecture, native-like performance, security focus, and support across web, iOS, Android, Windows, macOS, and Linux; Electron bundles Chromium and lacks mobile support, while Expo is primarily mobile-oriented.
  • Monorepo foundation: Initialize a pnpm-managed Turborepo, retain the Next.js web app, add a React-based Tauri native app, and centralize common commands such as clean, check-types, Shadcn generation, and Tauri CLI execution.
  • Shared design system: The @repo/ui workspace package exports reusable components, hooks, types, views, global styles, and Tailwind/PostCSS configurations. Tailwind, Lucide, and Shadcn components (button, card, and textarea) provide a consistent UI across web and native shells.
  • API example and validation: A Next.js POST /api/text-analysis route accepts text between 1 and 10,000 characters, validates it with Zod, then returns word count, character count, most frequent word, and AFINN-based sentiment using natural.
  • Native integration and delivery: Tauri Rust commands can be exposed to React through window.tauri.invoke, illustrated with a get_platform command. Development commands include pnpm tauri android dev and pnpm tauri ios dev; web can deploy to Vercel while Tauri packages target mobile stores and desktop distribution channels.

Images & Media

  • Tauri v2 with Next.js hero image — Article cover illustration for the Tauri and Next.js monorepo guide.
  • Browser app — The shared text-analysis interface running in the Next.js browser app.
  • Android app — The text-analysis application running in Tauri on Android.
  • Windows app — The same application rendered in a Tauri Windows desktop window.
  • Complete monorepo source repository — Full implementation accompanying the guide.
  • Tauri — Cross-platform application framework with a Rust backend and web frontend.
  • Next.js — React framework used for the web frontend and API routes.
  • Turborepo documentation — Monorepo build-system and task-orchestration documentation.
  • Shadcn UI — Component generator used to create reusable UI primitives.
  • Zod — TypeScript-first schema validation library used for API input validation.
  • natural — Node.js natural-language-processing library used for tokenization and sentiment analysis.
  • Tauri v2 Next.js monorepo author — Melvin Oostendorp’s GitHub profile.

Keep reading