{"id":13632546,"url":"https://github.com/mlynch/nextjs-tailwind-ionic-capacitor-starter","last_synced_at":"2025-05-15T11:05:59.958Z","repository":{"id":37331913,"uuid":"323224836","full_name":"mlynch/nextjs-tailwind-ionic-capacitor-starter","owner":"mlynch","description":"A starting point for building an iOS, Android, and Progressive Web App with Tailwind CSS, React w/  Next.js, Ionic Framework, and Capacitor","archived":false,"fork":false,"pushed_at":"2024-05-13T07:05:48.000Z","size":6448,"stargazers_count":1791,"open_issues_count":6,"forks_count":358,"subscribers_count":31,"default_branch":"main","last_synced_at":"2025-04-14T19:57:06.647Z","etag":null,"topics":["capacitor","ionic","ionic-framework","nextjs","react","tailwind","tailwind-css"],"latest_commit_sha":null,"homepage":"https://dev.to/ionic/build-mobile-apps-with-tailwind-css-next-js-ionic-framework-and-capacitor-3kij","language":"TypeScript","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/mlynch.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}},"created_at":"2020-12-21T03:54:02.000Z","updated_at":"2025-04-13T05:49:34.000Z","dependencies_parsed_at":"2023-02-18T10:18:14.746Z","dependency_job_id":"93e51728-bbb4-4e51-a144-099b2868af4a","html_url":"https://github.com/mlynch/nextjs-tailwind-ionic-capacitor-starter","commit_stats":null,"previous_names":[],"tags_count":2,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlynch%2Fnextjs-tailwind-ionic-capacitor-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlynch%2Fnextjs-tailwind-ionic-capacitor-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlynch%2Fnextjs-tailwind-ionic-capacitor-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlynch%2Fnextjs-tailwind-ionic-capacitor-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mlynch","download_url":"https://codeload.github.com/mlynch/nextjs-tailwind-ionic-capacitor-starter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254328385,"owners_count":22052632,"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":["capacitor","ionic","ionic-framework","nextjs","react","tailwind","tailwind-css"],"created_at":"2024-08-01T22:03:06.447Z","updated_at":"2025-05-15T11:05:59.896Z","avatar_url":"https://github.com/mlynch.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Next.js + Tailwind CSS + Ionic Framework + Capacitor Mobile Starter\n\n![Screenshot](./screenshot.png)\n\nThis repo is a conceptual starting point for building an iOS, Android, and Progressive Web App with Next.js, Tailwind CSS, [Ionic Framework](https://ionicframework.com/), and [Capacitor](https://capacitorjs.com/).\n\nNext.js handles the production React app experience, Tailwind can be used to style each page of your app, Ionic Framework provides the cross-platform system controls (navigation/transitions/tabs/etc.), and then Capacitor bundles all of it up and runs it on iOS, Android, and Web with full native access.\n\nSee this blog post for an overview of the stack and how it all works: \u003chttps://dev.to/ionic/build-mobile-apps-with-tailwind-css-next-js-ionic-framework-and-capacitor-3kij\u003e\n\n## Usage\n\nThis project is a standard Next.js app, so the typical Next.js development process applies (`npm run dev` for browser-based development). However, there is one caveat: the app must be exported to deploy to iOS and Android, since it must run purely client-side. ([more on Next.js export](https://nextjs.org/docs/advanced-features/static-html-export))\n\nTo build the app, run:\n\n```bash\nnpm run build\n```\n\nAll the client side files will be sent to the `./out/` directory. These files need to be copied to the native iOS and Android projects, and this is where Capacitor comes in:\n\n```bash\nnpm run sync\n```\n\nFinally, use the following run commands to run the app on each platform:\n\n```bash\nnpm run ios\nnpm run android\n```\n\n## Livereload/Instant Refresh\n\nTo enable Livereload and Instant Refresh during development (when running `npm run dev`), find the IP address of your local interface (ex: `192.168.1.2`) and port your Next.js server is running on, and then set the server url config value to point to it in `capacitor.config.json`:\n\n```json\n{\n  \"server\": {\n    \"url\": \"http://192.168.1.2:3000\"\n  }\n}\n```\n\nNote: this configuration wil be easier in Capacitor 3 which [recently went into beta](https://capacitorjs.com/blog/announcing-capacitor-3-0-beta).\n\n## API Routes\n\nAPI Routes can be used but some minimal configuration is required. See [this discussion](https://github.com/mlynch/nextjs-tailwind-ionic-capacitor-starter/issues/4#issuecomment-754030049) for more information.\n\n## Caveats\n\nOne caveat with this project: Because the app must be able to run purely client-side and use [Next.js's Export command](https://nextjs.org/docs/advanced-features/static-html-export), that means no Server Side Rendering in this code base. There is likely a way to SSR and a fully static Next.js app in tandem but it requires [a Babel plugin](https://github.com/erzr/next-babel-conditional-ssg-ssr) or would involve a more elaborate monorepo setup with code sharing that is out of scope for this project.\n\nAdditionally, Next.js routing is not really used much in this app beyond a catch-all route to render the native app shell and engage the Ionic React Router. This is primarily because Next.js routing is not set up to enable native-style transitions and history state management like the kind Ionic uses.\n\n## What is Capacitor?\n\nYou can think of [Capacitor](https://capacitorjs.com/) as a sort of \"electron for mobile\" that runs standard web apps on iOS, Android, Desktop, and Web.\n\nCapacitor provides access to Native APIs and a plugin system for building any native functionality your app needs.\n\nCapacitor apps can also run in the browser as a Progressive Web App with the same code.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmlynch%2Fnextjs-tailwind-ionic-capacitor-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmlynch%2Fnextjs-tailwind-ionic-capacitor-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmlynch%2Fnextjs-tailwind-ionic-capacitor-starter/lists"}