Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/leon3s/nextauri
A Next.js + Tauri template, with minimal best practice setup and weekly updates!
https://github.com/leon3s/nextauri
next nextauri nextjs nextjs-starter nextjs-template react rust starter tauri tauri-starter tauri-template template typescript webview
Last synced: 6 days ago
JSON representation
A Next.js + Tauri template, with minimal best practice setup and weekly updates!
- Host: GitHub
- URL: https://github.com/leon3s/nextauri
- Owner: leon3s
- Created: 2022-05-27T12:30:18.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-12-09T21:09:38.000Z (18 days ago)
- Last Synced: 2024-12-15T00:08:29.413Z (13 days ago)
- Topics: next, nextauri, nextjs, nextjs-starter, nextjs-template, react, rust, starter, tauri, tauri-starter, tauri-template, template, typescript, webview
- Language: TypeScript
- Homepage:
- Size: 2.77 MB
- Stars: 139
- Watchers: 2
- Forks: 5
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
Nextauri
❤️ Next.js + Tauri = Nextauri ❤️
[](https://github.com/leon3s/nextauri)
[](https://github.com/leon3s/nextauri)
[](https://github.com/leon3s/nextauri)
[](https://discord.gg/WV4Aac8uZg)
[](https://github.com/leon3s/nextauri/actions/workflows/eslint_clippy.yml)
[](https://github.com/leon3s/nextauri/actions/workflows/build.yml)
## ❓ What is Nextauri ?
Nextauri is your favorite template for create cross-platform application using `Tauri` with `Next.js`.
It came with minimal best practice setup so you can add anything fit your need.
You can it use to develop `Windows`, `Linux` and `Mac` desktop application.
But Tauri plan to have a mobile compatibility in the futur !
## 💡 Features
As recommanded by the community, Nextauri come with the best practice features such as :
- Recommanded Eslint when working with Next.js
- Recommanded Clippy when working with Tauri
- Github workflow when pushing and creating pull request for :
* Lint your Next.JS project with Eslint
* Lint your Tauri project with Clippy
* Build your application for `Linux`, `Windows` and `Mac`
- Weekly dependencies update
## 💪 Motivation
Tauri is great to make secure cross platform application backed by `Rust` !
It will load an `HTML` page inside a `Webview` and give the ability to do system call with `IPC`.
If 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.
That 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.
The `benefit` of using Next.js `SSG` mode is pre-rendered React code in static HTML/JavaScript.
This means your app will load faster.
React doesn't have to render the `HTML` on the client-side but will hydrate it on the first load if needed.
The `downside` is that we cannot use `getServerSideProps` or use any type of `data fetching` for rendering our page for a request.
Instead we will use `getStaticProps` to generate our page at build time.
Note that if you still want the power of `Rust` for generate your page you may have a look at [Neon](https://neon-bindings.com).
It will allow you to call `Rust` code from Node.js !
## 📦 Installation
Be sure you have [NodeJS](https://nodejs.org/en/) and [Rust](https://www.rust-lang.org/) installed on your system
1. See Tauri [prerequisites](https://tauri.app/v1/guides/getting-started/prerequisites/) to prepare your system to build `Tauri`
2. Clone or fork this repository
```sh
git clone https://github.com/leon3s/nextauri
cd nextauri
```
3. Install node dependencies
```sh
npm install
```
## 🎨 Developing
To get started you only need one command
```sh
npm run dev
```
This will start both Tauri and Next.js in development mode.
> Note that tauri is waiting for an http server to be alive on localhost:3000.
> It's the default Next.js `port` while running in development
You can modify the `port` by updating `src-tauri/tauri.conf.json`.
```json
"beforeDevCommand": "npm run next dev -- -p 8080",
"devPath": "http://localhost:8080",
```
### Source structure
- `src-next/` are where Next.js files are located.
- `src-tauri/` contain Tauri source files.
## 🧪 Testing
To test your application we recommand you to use [Cypress](https://www.cypress.io) using Tauri [mocking technique](https://tauri.app/v1/guides/testing/mocking).
If you want me to add `Cypress` as part of the template react to this [discussion](https://github.com/leon3s/nextauri/discussions/19).
You may also want to take a look to pre-alpha [WebDriver Testing](https://tauri.app/v1/guides/testing/webdriver/introduction) from Tauri.
## ⚡Production
To build in production you can do it in a single command.
This will build and export Next.js and build Tauri for your current environnement.
```sh
npm run tauri build
```
Look into `src-tauri/tauri.conf.json` to tweak the settings,
and refer to [Tauri](https://tauri.app/v1/guides/building) building documentation for more information.
## ⚠️ Warning
If you are new to Next.js beware when working with it in development !
It will start a `Nodejs` server in background in order to have `HMR` (Hot Module Replacement) capability but also `SSR` (Server Side Rendering).
That mean your React/Typescript code have two execution context :
1. On the `Server`
- Code is executed by Node.js runtime.
- There is no notion of `window` or `navigator` it's part of `Browser API`
- You cannot call `Tauri API` in this context since Tauri injection happen in the `Browser` side
2. On the `Browser`
- Code is executed by the Tauri `Webview`
- `Tauri API` will work fine and any other `Browser API` package `d3.js` for example
Note that your production code will alway be running in a `Browser` side context.
Since we use the `SSG` feature from Next.js no Node.js server will be packaged in production.
```
referenceError: navigator is not defined
```
This error can orcur when importing `@tauri-apps/api` for example.
There is 2 workarounds that you can use :
1. Dynamic component method
- Create your component
```tsx
import React from 'react'
import { window } from '@tauri-apps/api';
const { appWindow } = window;
export default function MyComponent() {
{appWindow.label}
}
```
- Import your component
```tsx
import dynamic from "next/dynamic";
const MyComponent = dynamic(() => import("./path/to/my/component"), {
ssr: false,
});
```
1. Is browser method
```js
import { invoke } from '@tauri-apps/api/tauri'
const isBrowser = typeof window !== 'undefined'
if (isBrowser) {
/// Code will only execute on browser side
}
```
In 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.
## 📚 Documentation
To learn more about Tauri and Next.js, take a look at the following resources:
- [Tauri Guides](https://tauri.app/v1/guides/) - guide about Tauri.
- [Tauri API](https://tauri.app/v1/api/js) - discover javascript Tauri api.
- [Next.js Documentation](https://nextjs.org/docs) - learn more about Next.js.
- [Next.js Tutorial](https://nextjs.org/learn) - interactive Next.js tutorial.