[Tauri] Getting Started with Next.js

데스크톱 앱을 next.js로 만들어 볼까 하는 데, Tauri도 어느정도 더 발전했을 것 같아서 시도를 해보았습니다. ^^

우선 기본적인 프로젝트 생성 방법을 살펴보겠습니다.

기존 포스팅들도 있고 하니 기본적인 개발환경 구성은 되어 있다고 생각하겠습니다. ^^;;

제가 사용한 rustc 버전은 1.75.0입니다.

Create Frontend Project

먼저, frontend로 사용할 Next.js 프로젝트를 생성해 줍니다.

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

원하는 정보를 입력해 줍니다.

Configure Frontend

생성된 폴더 내에서 tsconfig.json 파일을 찾아 다음과 같이 설정을 추가해 줍니다.

  "exclude": [
    "node_modules",
    "src-tauri"
  ]

다음으로, next.config.mjs 파일을 찾아 다음과 같이 설정을 추가해 줍니다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
}

module.exports = nextConfig

Install for Create-Tauri-App

이제 Tauri app을 만들기 위한 작업을 해줍니다.

Cli를 위한 툴을 설치해 주세요.

$ cargo install tauri-cli

현재 기준으로 v.1.5.9 버전이 설치됩니다.

Create Tauri Project

다음으로 Tauri 프로젝트를 생성해 주도록 하겠습니다.

$ cargo tauri init

원하는대로 정보를 입력하면 생성이 완료됩니다.

Run the Application

이제 app을 실행해 봅시다.

$ cargo tauri dev

깔끔하게 잘 실행되네요. ^^

Build the Application

마지막으로, 번들링 하는 것을 살펴보겠습니다.

tauri.conf.json 파일을 열고, identifier를 원하는 값으로 설정해 줍니다.

...
"tauri": {
  ...
  "bundle" : {
    ...
    "identifier": HERE
    ...
  },
  ...
}

이제 build 명령을 입력해 줍니다.

$ cargo tauri build

src-tauri/target/release 폴더에 실행파일이 잘 생성됩니다.

Cross-Platform compile도 지원되고 편하네요. ^^

Wrap Up

이번에는 next.js로 만든 application을 tauri를 사용하여 desktop app으로 만드는 방법에 대해 살펴보았습니다.

살을 붙여나가면서 필요한 내용이 있다면 또 공유를 드리도록 하겠습니다. ^^