{"id":13800424,"url":"https://github.com/kvnxiao/tauri-nextjs-template","last_synced_at":"2025-05-16T04:03:38.480Z","repository":{"id":47476922,"uuid":"513734670","full_name":"kvnxiao/tauri-nextjs-template","owner":"kvnxiao","description":"A Tauri 2.0 + Next.js (SSG) template, with TailwindCSS, opinionated linting, and GitHub Actions preconfigured","archived":false,"fork":false,"pushed_at":"2025-05-12T14:08:11.000Z","size":3683,"stargazers_count":428,"open_issues_count":1,"forks_count":45,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-12T15:28:20.852Z","etag":null,"topics":["biome","biomejs","nextjs","react","rust","tailwindcss","tauri","tauri-app","template","typescript","webview"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kvnxiao.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null}},"created_at":"2022-07-14T02:32:57.000Z","updated_at":"2025-05-12T14:08:08.000Z","dependencies_parsed_at":"2023-02-08T10:02:06.907Z","dependency_job_id":"b994cc62-08dc-48d0-ae3d-2791a919b637","html_url":"https://github.com/kvnxiao/tauri-nextjs-template","commit_stats":{"total_commits":277,"total_committers":4,"mean_commits":69.25,"dds":"0.26714801444043323","last_synced_commit":"5a39622b46ad49f35b3199818b4c87e6c0d9f52f"},"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kvnxiao%2Ftauri-nextjs-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kvnxiao%2Ftauri-nextjs-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kvnxiao%2Ftauri-nextjs-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kvnxiao%2Ftauri-nextjs-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kvnxiao","download_url":"https://codeload.github.com/kvnxiao/tauri-nextjs-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254464891,"owners_count":22075570,"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":["biome","biomejs","nextjs","react","rust","tailwindcss","tauri","tauri-app","template","typescript","webview"],"created_at":"2024-08-04T00:01:12.462Z","updated_at":"2025-05-16T04:03:38.464Z","avatar_url":"https://github.com/kvnxiao.png","language":"JavaScript","funding_links":[],"categories":["Free Boilerplates","Getting Started"],"sub_categories":["Templates"],"readme":"# Tauri 2.0 + Next.js 15 App Router Template\n\n![Tauri window screenshot](public/tauri-nextjs-template-2_screenshot.png)\n\nThis is a [Tauri](https://v2.tauri.app/) project template using [Next.js](https://nextjs.org/),\nbootstrapped by combining [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app)\nand [`create tauri-app`](https://v2.tauri.app/start/create-project/).\n\nThis template uses [`pnpm`](https://pnpm.io/) as the Node.js dependency\nmanager, and uses the [App Router](https://nextjs.org/docs/app) model for Next.js.\n\n## Template Features\n\n- TypeScript frontend using [Next.js 15](https://nextjs.org/) React framework\n- [TailwindCSS 4](https://tailwindcss.com/) as a utility-first atomic CSS framework\n  - The example page in this template app has been updated to use only TailwindCSS\n  - While not included by default, consider using\n    [React Aria components](https://react-spectrum.adobe.com/react-aria/index.html)\n    and/or [HeadlessUI components](https://headlessui.com/) for completely unstyled and\n    fully accessible UI components, which integrate nicely with TailwindCSS\n- Opinionated formatting and linting already setup and enabled\n  - [Biome](https://biomejs.dev/) for a combination of fast formatting, linting, and\n    import sorting of TypeScript code, and [ESLint](https://eslint.org/) for any missing\n    Next.js linter rules not covered by Biome\n  - [clippy](https://github.com/rust-lang/rust-clippy) and\n    [rustfmt](https://github.com/rust-lang/rustfmt) for Rust code\n- GitHub Actions to check code formatting and linting for both TypeScript and Rust\n\n## Getting Started\n\n### Running development server and use Tauri window\n\nAfter cloning for the first time, change your app identifier inside\n`src-tauri/tauri.conf.json` to your own:\n\n```jsonc\n{\n  // ...\n  // The default \"com.tauri.dev\" will prevent you from building in release mode\n  \"identifier\": \"com.my-application-name.app\",\n  // ...\n}\n```\n\nTo develop and run the frontend in a Tauri window:\n\n```shell\npnpm tauri dev\n```\n\nThis will load the Next.js frontend directly in a Tauri webview window, in addition to\nstarting a development server on `localhost:3000`.\nPress \u003ckbd\u003eCtrl\u003c/kbd\u003e+\u003ckbd\u003eShift\u003c/kbd\u003e+\u003ckbd\u003eI\u003c/kbd\u003e in a Chromium based WebView (e.g. on\nWindows) to open the web developer console from the Tauri window.\n\n### Building for release\n\nTo export the Next.js frontend via SSG and build the Tauri application for release:\n\n```shell\npnpm tauri build\n```\n\n### Source structure\n\nNext.js frontend source files are located in `src/` and Tauri Rust application source\nfiles are located in `src-tauri/`. Please consult the Next.js and Tauri documentation\nrespectively for questions pertaining to either technology.\n\n## Caveats\n\n### Static Site Generation / Pre-rendering\n\nNext.js is a great React frontend framework which supports server-side rendering (SSR)\nas well as static site generation (SSG or pre-rendering). For the purposes of creating a\nTauri frontend, only SSG can be used since SSR requires an active Node.js server.\n\nPlease read into the Next.js documentation for [Static Exports](https://nextjs.org/docs/app/building-your-application/deploying/static-exports)\nfor an explanation of supported / unsupported features and caveats.\n\n### `next/image`\n\nThe [`next/image` component](https://nextjs.org/docs/basic-features/image-optimization)\nis an enhancement over the regular `\u003cimg\u003e` HTML element with server-side optimizations\nto dynamically scale the image quality. This is only supported when deploying the\nfrontend onto Vercel directly, and must be disabled to properly export the frontend\nstatically. As such, the\n[`unoptimized` property](https://nextjs.org/docs/api-reference/next/image#unoptimized)\nis set to true for the `next/image` component in the `next.config.js` configuration.\nThis will allow the image to be served as-is, without changes to its quality, size,\nor format.\n\n### ReferenceError: window/navigator is not defined\n\nIf you are using Tauri's `invoke` function or any OS related Tauri function from within\nJavaScript, you may encounter this error when importing the function in a global,\nnon-browser context. This is due to the nature of Next.js' dev server effectively\nrunning a Node.js server for SSR and hot module replacement (HMR), and Node.js does not\nhave a notion of `window` or `navigator`.\n\nThe solution is to ensure that the Tauri functions are imported as late as possible\nfrom within a client-side React component, or via [lazy loading](https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading).\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and\n  API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nAnd to learn more about Tauri, take a look at the following resources:\n\n- [Tauri Documentation - Guides](https://v2.tauri.app/start/) - learn about the Tauri\n  toolkit.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkvnxiao%2Ftauri-nextjs-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkvnxiao%2Ftauri-nextjs-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkvnxiao%2Ftauri-nextjs-template/lists"}