Introduction

Desktop applications have been an essential part of the software industry for decades. With the increasing demand for user-friendly and responsive applications, developers are always on the lookout for better tools and frameworks to create top-quality desktop applications.

Over the years, several desktop application development frameworks have emerged, with each having its strengths and limitations. However, with the rise of web technologies and the growing popularity of cross-platform development, many developers are turning to web-based frameworks to build desktop applications.

In this article, we will explore how Next.js and Tauri can be used together to build high-quality cross-platform desktop applications using web technologies. We will discuss the advantages of using Next.js and Tauri, how they compare to other popular desktop application development frameworks, and some real-world examples of applications built using these technologies.

Why Tauri and not other technologies?

When comparing desktop application development frameworks, there are numerous popular options available, such as Electron, NW.js, and JavaFX. However, the combination of Next.js and Tauri offers a distinct set of advantages that set them apart from these other frameworks.

Let's take a quick look at the limitations of these frameworks:

Electron

Electron, a widely-used framework, is often criticized for its large memory footprint and slow start-up times, which can negatively impact the user experience. This is primarily because Electron applications bundle an entire Chromium instance, leading to increased resource consumption. This means that even simple applications built with Electron can consume a significant amount of system resources, which can be especially problematic for users with lower-end hardware or those running multiple applications simultaneously. As a result, developers may face challenges in optimizing their applications for performance and efficiency when using Electron as their framework of choice.

NW.js

NW.js, an alternative popular choice among developers, presents its own unique set of limitations, particularly in terms of providing comprehensive support for Linux platforms. This can pose a significant drawback for developers who aspire to design and develop cross-platform applications that cater to a diverse and extensive range of users, including those who rely on Linux-based systems. Consequently, developers may find themselves struggling to ensure seamless functionality and compatibility across different operating systems when utilizing NW.js as their primary framework.

JavaFX

JavaFX, a well-established framework, requires developers to have a solid understanding of the Java programming language. This can be a barrier for those who are not well-versed in Java or prefer to work with other languages. This prerequisite can pose a significant challenge for those who may not have a strong background in Java or have a preference for working with alternative programming languages. As a result, the requirement to master Java can potentially create a barrier to entry for some developers, especially when they are tasked with the development of cross-platform applications catering to a diverse and extensive range of users, including those who rely on Linux-based systems.

---

In contrast, Tauri has emerged as a strong contender in the realm of cross-platform development, boasting remarkable compatibility across a wide variety of platforms, including Windows, macOS, and Linux. This enhanced versatility makes these frameworks a more appealing and flexible option for developers who are seeking to create applications that can effortlessly cater to the needs and preferences of users, irrespective of the operating system they employ.

By opting for Tauri, developers can potentially overcome the challenges associated with NW.js and Electron, thereby delivering a more efficient and high-performing application experience to their end users.

Setting up the Development Environment

Now that we have established a starting point, let's set up our development environment. To accomplish this, we will need to fulfill a few prerequisites, since Tauri is built on top of the Rust language, some additional installations must need to be performed.

I'll be following the guide for macOS since that's my current operating system but feel free to select the one that matches yours.

Prerequisites

• First, install the Xcode Command Line Tools:

xcode-select --install

• Second, install Rust:

curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh

If everything goes well, you'll see a log like this one:

Rust is installed now. Great!

Create a Next.js project

Now let's create a fresh install of a Next.js application:

npx create-next-app@latest --use-npm --typescript

I would call my app my-desktop-app, again name it as you like :)

Important: Next.js will ask you if you want to try the new and experimental app/ directory. You must select No because it does not yet support the next export command.

Then modify the next.config.js and set the image option unoptimized: true. This is required to use NextJS Image in SSG mode.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
+ images: {
+   unoptimized: true,
+ },
}

module.exports = nextConfig

and add an export script to your package.json :

{
  "name": "my-desktop-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
 +  "export": "next export",
    "start": "next start",
    "lint": "next lint"
  },
...

Create a Rust project

As I said before Tauri is built on top of Rust core, so let's add it:

npm install --save-dev @tauri-apps/cli

Also, add a tauri script to your package.json:

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "export": "next export",
    "start": "next start",
    "lint": "next lint",
+   "tauri": "tauri"
  },
...

Now we are good to go with the project generation:

npm run tauri init

After executing that command you should see a similar output log:

and a file structure like this one:

I am planning an article that covers more advanced content related to the Tauri project and the Rust language.

The only step left is to run your project:

npm run tauri dev

You should see your Desktop app up and running!

Wrapping up!

That's it, hope you enjoyed this tutorial, now you can start to craft some amazing cross-platform Desktop apps.

Let me in the comments what you have built with Next and Tauri or if you rather prefer another technology!

Bonus

As usual, I already have created for you a fully-fledged, configured template with several add-ons in this link:

• TypeScript for static type checking

• ESLint for code linting

• Prettier for code formatting

• Pretty-quick runs prettier over changed files

For git integration, it has also:

• Conventional commits for improving commits

• Husky for improving commits

Thank you for reading! Any constructive feedback is greatly appreciated!