nextjs tailwind ionic capacitor starter下载nextjs tailwind ionic capacitor starter器源代码下载

nextjs tailwind ionic capacitor starter

Ai源码

5.0.0

下载

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路由不是设置为启用本机风格的过渡和历史状态管理，例如离子用途。