nextjs tailwind ionic capacitor starter

next.js + tailwind CSS +離子框架 +電容器移動啟動器

此存儲庫是使用Next.js，Tailwind CSS，離子框架和電容器構建iOS，Android和Progressive Web應用程序的概念起點。

Next.js處理生產React App App Experienca，Tailwind可用於設計應用程序的每一頁，離子框架提供了跨平台系統控件（導航/Transitions/Tabs/etc。），然後將所有電容器包裝並在iOS，Android和Android上運行，並具有完整的本機訪問。

請參閱此博客文章以獲取堆棧的概述以及所有功能的工作方式：https：//dev.to/ionic/build-mobile-apps-with-tailwind-css-next-next-js-js-ionic-framework-framework-and-capacitor-3kij

用法

該項目是一個標準的Next.js應用程序，因此典型的Next.js開發過程適用（基於瀏覽器的開發的npm run dev ）。但是，有一個警告：該應用必須導出以部署到iOS和Android，因為它必須純粹運行客戶端。 （有關Next.js導出的更多信息）

要構建應用程序，請運行：

npm run build

所有客戶端文件將發送到./out/目錄。這些文件需要復製到本機iOS和Android項目，這是電容器所在的地方：

npm run sync

最後，使用以下運行命令在每個平台上運行該應用：

npm run ios
npm run android

livereload/Instant Refresh

要在開發過程中啟用LiverEload和Instant Refresh（運行npm run dev時），請找到本地接口的IP地址（例如： 192.168.1.2 ），然後將您的next.js Server運行，然後將服務器url url配置值設置為capacitor.config.json ：config.json：config.json：

{
  "server" : {
    "url" : " http://192.168.1.2:3000 "
  }
}

注意：在最近進入Beta的電容器3中，這種配置會更容易。

API路線

可以使用API路由，但需要一些最小的配置。有關更多信息，請參見此討論。

警告

該項目的一個警告：因為該應用程序必須能夠純粹運行客戶端並使用Next.js的導出命令，所以這意味著在此代碼庫中沒有服務器端渲染。 SSR可能有一種方法和完全靜態的Next.js應用程序，但它需要一個Babel插件，或者將涉及更精細的MonorePo設置，並具有代碼共享的代碼共享，而該項目的範圍不超出該項目的範圍。

此外，Next.js路由在此應用程序中並沒有真正用於渲染本機應用程序外殼並參與離子React路由器的所有路線之外。這主要是因為Next.js路由不是設置為啟用本機風格的過渡和歷史狀態管理，例如離子用途。

什麼是電容器？

您可以將電容器視為一種在iOS，Android，Desktop和Web上運行標準Web應用程序的“移動電子電子”。

電容器提供了對本機API和插件系統的訪問，以構建應用您的應用所需的任何本機功能。

電容器應用程序還可以作為具有相同代碼的漸進式Web應用程序在瀏覽器中運行。