How do I setup my project with next.js, ionic react, capacitator, and tauri

Question

So I'm currently going to be working on a project, that's a social network. I wanted to start off by developing the web app using next.js, and then export it to cross-platform desktop apps with Tauri, and to cross-platform mobile app with Capacitator, while using the Ionic React framework to help me flesh out the mobile side off things.

It might be a dumb question but I'm new to all of this so help would be greatly appreciateed. Or if there is a better solution to all of this then that would also be helpful.

I started making it following the documentation for Tauri, with next.js (installing typescript, ESLint, and Tailwind), then I install Capacitator and then Ionic React following the documentation for adding those two into existing projects. However whenever I try running npm run static I get an error like this, which is caused by Ionic React

unhandledRejection .\my-app\node_modules\@ionic\react\dist\index.js:1
import React, { useContext, useRef, useEffect, createElement, useState, useMemo, Fragment, useCallback } from 'react';

Here is my package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "export": "next export",
    "start": "next start",
    "tauri": "tauri",
    "lint": "next lint",
    "static": "next build && next export"
  },
  "dependencies": {
    "@capacitor/android": "^5.0.3",
    "@capacitor/core": "^5.0.3",
    "@capacitor/ios": "^5.0.3",
    "@ionic/react": "^7.0.6",
    "@ionic/react-router": "^7.0.6",
    "@tauri-apps/api": "^1.3.0",
    "@types/node": "20.1.4",
    "@types/react": "18.2.6",
    "@types/react-dom": "18.2.4",
    "autoprefixer": "10.4.14",
    "eslint": "8.40.0",
    "eslint-config-next": "13.4.2",
    "next": "13.4.2",
    "postcss": "8.4.23",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.2",
    "typescript": "5.0.4"
  },
  "devDependencies": {
    "@capacitor/cli": "^5.0.3",
    "@tauri-apps/cli": "^1.3.1"
  }
}

I'm adding _app.tsx, since it's different in the Ionic React doc thanks to next.js so it could be this?

import '@/styles/globals.css'
import type { AppProps } from 'next/app'
import '@ionic/react/css/core.css';
import { setupIonicReact } from '@ionic/react';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

setupIonicReact();

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}