{"id":17249289,"url":"https://github.com/leon3s/nextauri","last_synced_at":"2025-04-05T05:07:29.725Z","repository":{"id":59509768,"uuid":"496988579","full_name":"leon3s/nextauri","owner":"leon3s","description":"A Next.js + Tauri template, with minimal best practice setup and weekly updates!","archived":false,"fork":false,"pushed_at":"2025-01-13T21:20:42.000Z","size":3275,"stargazers_count":150,"open_issues_count":10,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-19T08:13:27.916Z","etag":null,"topics":["next","nextauri","nextjs","nextjs-starter","nextjs-template","react","rust","starter","tauri","tauri-starter","tauri-template","template","typescript","webview"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leon3s.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["leon3s"]}},"created_at":"2022-05-27T12:30:18.000Z","updated_at":"2025-01-17T01:13:22.000Z","dependencies_parsed_at":"2023-10-03T04:33:28.149Z","dependency_job_id":"703fdc98-0000-49e1-a4a2-b1c1b6d10ec9","html_url":"https://github.com/leon3s/nextauri","commit_stats":{"total_commits":465,"total_committers":4,"mean_commits":116.25,"dds":0.1591397849462366,"last_synced_commit":"36599ff71c2261baf7c4abc15a1f2a8c605c0664"},"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leon3s%2Fnextauri","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leon3s%2Fnextauri/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leon3s%2Fnextauri/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leon3s%2Fnextauri/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leon3s","download_url":"https://codeload.github.com/leon3s/nextauri/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234883318,"owners_count":18901365,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["next","nextauri","nextjs","nextjs-starter","nextjs-template","react","rust","starter","tauri","tauri-starter","tauri-template","template","typescript","webview"],"created_at":"2024-10-15T06:43:52.847Z","updated_at":"2025-02-16T15:12:24.353Z","avatar_url":"https://github.com/leon3s.png","language":"TypeScript","funding_links":["https://github.com/sponsors/leon3s"],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003eNextauri\u003c/h1\u003e\n  \u003ch3\u003e❤️ Next.js + Tauri = Nextauri ❤️\u003c/h3\u003e\n\n\n\u003cp\u003e\n\n\n[![Stars](https://img.shields.io/github/stars/leon3s/nextauri?style=social)](https://github.com/leon3s/nextauri)\n[![Rust](https://img.shields.io/badge/built_with-Rust-dca282.svg)](https://github.com/leon3s/nextauri)\n[![Typescript](https://img.shields.io/badge/built_with-Typescript-3178C6.svg)](https://github.com/leon3s/nextauri)\n[![Discord](https://img.shields.io/discord/1011267493114949693?label=chat\u0026logo=discord)](https://discord.gg/WV4Aac8uZg)\n\n\n\u003c/p\u003e\n\n\u003cp\u003e\n\n[![Eslint \u0026 Clippy](https://github.com/leon3s/nextauri/actions/workflows/eslint_clippy.yml/badge.svg)](https://github.com/leon3s/nextauri/actions/workflows/eslint_clippy.yml)\n[![Build](https://github.com/leon3s/nextauri/actions/workflows/build.yml/badge.svg)](https://github.com/leon3s/nextauri/actions/workflows/build.yml)\n\n\u003cp\u003e\n\n\u003cimg src=\"https://download.next-hat.com/ressources/images/nextauri.png\" /\u003e\n\n\u003c/div\u003e\n\n## ❓ What is Nextauri ?\n\nNextauri is your favorite template for create cross-platform application using `Tauri` with `Next.js`. \u003cbr /\u003e\nIt came with minimal best practice setup so you can add anything fit your need. \u003cbr /\u003e\nYou can it use to develop `Windows`, `Linux` and `Mac` desktop application. \u003cbr /\u003e\nBut Tauri plan to have a mobile compatibility in the futur !\n\n## ✨ Key Features\nNextauri integrates community-endorsed best practices with powerful tooling out of the box:\n\n### Code Quality Assurance\n- Community-recommended ESLint configuration for Next.js projects\n- Rust best practices enforced through Clippy linter for Tauri\n\n### Automated CI/CD Pipeline\n- GitHub Actions workflows that trigger when pushing and creating pull request:\n  - Next.js project linting with ESLint\n  - Tauri project analysis with Clippy\n  - Production builds for all platforms:\n      \n      • Linux\n      \n      • Windows\n      \n      • macOS\n\n### Maintenance Automation\n- Automated weekly dependency updates keeping your stack fresh\n\n## 💪 Motivation\n\nTauri is great to make secure cross platform application backed by `Rust` ! \u003cbr /\u003e\nIt will load an `HTML` page inside a `Webview` and give the ability to do system call with `IPC`. \u003cbr /\u003e\nIf you are familliar with `electron` or `nextron` you can see it as a very good replacement with smaller bundle size, smaller memory usage and more secure.\n\nThat make Next.js the perfect fit for bundle React application with Tauri since it comes with great Static-Site Generation `SSG` capability that will allow us to generates static files that will be included in the final binary.\n\nThe `benefit` of using Next.js `SSG` mode is pre-rendered React code in static HTML/JavaScript. \u003cbr /\u003e This means your app will load faster. \u003cbr /\u003e\nReact doesn't have to render the `HTML` on the client-side but will hydrate it on the first load if needed.\n\nThe `downside` is that we cannot use `getServerSideProps` or use any type of `data fetching` for rendering our page for a request. \u003cbr /\u003e\nInstead we will use `getStaticProps` to generate our page at build time. \u003cbr /\u003e\n\nNote that if you still want the power of `Rust` for generate your page you may have a look at [Neon](https://neon-bindings.com). \u003cbr /\u003e\nIt will allow you to call `Rust` code from Node.js !\n\n## 📦 Installation\n\nBe sure you have [NodeJS](https://nodejs.org/en/) and [Rust](https://www.rust-lang.org/) installed on your system\n\n1.  See Tauri [prerequisites](https://tauri.app/v1/guides/getting-started/prerequisites/) to prepare your system to build `Tauri`\n\n2.  Clone or fork this repository\n    ```sh\n    git clone https://github.com/leon3s/nextauri\n    cd nextauri\n    ```\n3.  Install node dependencies\n    ```sh\n    npm install\n    ```\n\n## 🎨 Developing\n\nTo get started you only need one command\n\n```sh\nnpm run dev\n```\n\nThis will start both Tauri and Next.js in development mode.\n\n\u003e Note that tauri is waiting for an http server to be alive on localhost:3000. \u003cbr /\u003e\n\u003e It's the default Next.js `port` while running in development\n\nYou can modify the `port` by updating `src-tauri/tauri.conf.json`. \u003cbr /\u003e\n\n```json\n\"beforeDevCommand\": \"npm run next dev -- -p 8080\",\n\"devPath\": \"http://localhost:8080\",\n```\n\n### Source structure\n\n- `src-next/` are where Next.js files are located.\n- `src-tauri/` contain Tauri source files.\n\n## 🧪 Testing\n\nTo test your application we recommand you to use [Cypress](https://www.cypress.io) using Tauri [mocking technique](https://tauri.app/v1/guides/testing/mocking).\n\nIf you want me to add `Cypress` as part of the template react to this [discussion](https://github.com/leon3s/nextauri/discussions/19).\n\nYou may also want to take a look to pre-alpha [WebDriver Testing](https://tauri.app/v1/guides/testing/webdriver/introduction) from Tauri.\n\n## ⚡Production\n\nTo build in production you can do it in a single command.\nThis will build and export Next.js and build Tauri for your current environnement.\n\n```sh\nnpm run tauri build\n```\n\nLook into `src-tauri/tauri.conf.json` to tweak the settings,\nand refer to [Tauri](https://tauri.app/v1/guides/building) building documentation for more information.\n\n\n## ⚠️ Warning\n\nIf you are new to Next.js beware when working with it in development ! \u003cbr /\u003e\nIt will start a `Nodejs` server in background in order to have `HMR` (Hot Module Replacement) capability but also `SSR` (Server Side Rendering).\nThat mean your React/Typescript code have two execution context :\n\n1.  On the `Server`\n    - Code is executed by Node.js runtime.\n    - There is no notion of `window` or `navigator` it's part of `Browser API`\n    - You cannot call `Tauri API` in this context since Tauri injection happen in the `Browser` side\n\n2.  On the `Browser`\n    - Code is executed by the Tauri `Webview`\n    - `Tauri API` will work fine and any other `Browser API` package `d3.js` for example\n\nNote that your production code will alway be running in a `Browser` side context. \u003cbr /\u003e\nSince we use the `SSG` feature from Next.js no Node.js server will be packaged in production.\n\n```\nreferenceError: navigator is not defined\n```\n\nThis error can orcur when importing `@tauri-apps/api` for example. \u003cbr /\u003e\nThere is 2 workarounds that you can use :\n\n1.  Dynamic component method\n\n    -   Create your component\n        ```tsx\n        import React from 'react'\n\n        import { window } from '@tauri-apps/api';\n\n        const { appWindow } = window;\n\n        export default function MyComponent() {\n          \u003cdiv\u003e\n            {appWindow.label}\n          \u003c/div\u003e\n        }\n        ```\n\n    -   Import your component\n        ```tsx\n        import dynamic from \"next/dynamic\";\n\n        const MyComponent = dynamic(() =\u003e import(\"./path/to/my/component\"), {\n          ssr: false,\n        });\n\n        ```\n\n1.  Is browser method\n\n    ```js\n    import { invoke } from '@tauri-apps/api/tauri'\n\n    const isBrowser = typeof window !== 'undefined'\n\n    if (isBrowser) {\n      /// Code will only execute on browser side\n    }\n    ```\n\nIn general to safely invoke `Tauri API` you should use it in `componentDidMount`, `useEffect` or on user based `events` that will be alway executed in client side.\n\n## 📚 Documentation\n\nTo learn more about Tauri and Next.js, take a look at the following resources:\n\n- [Tauri Guides](https://tauri.app/v1/guides/) - guide about Tauri.\n- [Tauri API](https://tauri.app/v1/api/js) - discover javascript Tauri api.\n- [Next.js Documentation](https://nextjs.org/docs) - learn more about Next.js.\n- [Next.js Tutorial](https://nextjs.org/learn) - interactive Next.js tutorial.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleon3s%2Fnextauri","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleon3s%2Fnextauri","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleon3s%2Fnextauri/lists"}