曾经想制作一个移动应用程序,但从不想处理多个代码库?

使用 Next.js 和电容器,您可以!

Next.js 近来变得非常流行,其中大部分是有道理的。与它一起工作是一种绝对的快乐,并提供了惊人的开发人员体验。

今天我将告诉你如何使用与 next.js 应用程序相同的代码库构建移动应用程序,并作为原生应用程序在移动设备上运行!还有一个关于如何将其用作桌面应用程序的奖励部分!

tl;博士

使用 Next.js 制作 Android、iOS 和桌面应用程序。

如果你只想要代码,你可以访问

github.com/k4u5h4L/next-capacitor-demo

你应该在生产中使用它吗?

好吧,这取决于你... Everythinig 是一种权衡,Next.js + Capacitor 也不完美。

优点:

• 轻松为您的 Web 和移动应用程序维护一个代码库。

• 你不必离开你心爱的 Next.js 和 React 生态系统。

• 使用跨平台应用程序更具商业意义。

缺点:

• Next.js 的某些原生功能无法在移动或桌面应用程序中使用。因此需要进行项目更改。

• 性能可能会受到影响。

• 这个项目还不成熟,虽然很令人兴奋,但仍然很新。

需要考虑的事项

• 如果你习惯了 Next.js,你会使用它的服务器端渲染功能,比如getServerSideProps。遗憾的是,它们不适用于电容器。 Next.js 并不是真的要用于移动开发。

• 对于实时重新加载,您的笔记本电脑/台式机和手机需要通过 WiFi 连接,至少如果您正在关注本文。

让我们开始吧!

先决条件:

• 您需要安装 Node.js。

• 任何 nodejs 包管理器。我在这里使用yarn,但您也可以使用npm。

• 已打开 USB 调试的物理移动设备连接到您的系统

• Java 已安装。最好是版本 8。这是为 android 构建您的应用程序。通过运行检查版本

java -version

进入全屏模式 退出全屏模式

话不多说,开始吧!

• 让我们初始化一个新的 Next.js 项目。跑

yarn create next-app next-capacitor-app

进入全屏模式 退出全屏模式

• 下载完所有内容后,让我们在我们的项目中安装电容器。

yarn add @capacitor/core @capacitor/cli @capacitor/android @capacitor/ios

进入全屏模式 退出全屏模式

• 安装依赖后,让我们初始化电容器。

npx cap init next-capacitor-app com.nextcap.app --web-dir=out

# The format as per capacitor docs
# npx cap init [name] [id] --web-dir=build

进入全屏模式 退出全屏模式

我们将web-dir设置为out,因为当我们导出资产时,它会在out目录中。

• 安装您定位的本机平台

npx cap add android
npx cap add ios

进入全屏模式 退出全屏模式

现在你应该开始使用它了。转到您的pages/index.js并对其进行编辑以获取基本页面。

import React from 'react'

export default function Home() {
  return (
    <div>
      <h1>
        Hey there!
      </h1>
    </div>
  )
}

进入全屏模式 退出全屏模式

现在,让我们从下一个导出静态资产!

yarn run build && npx next export

进入全屏模式 退出全屏模式

专业提示:您可以将next export命令添加到package.json中的scripts部分。

现在,将您的 next.js 资产与 android 和 ios 平台同步

npx cap sync

进入全屏模式 退出全屏模式

在此之后,连接您的物理设备运行该应用程序。先检查手机是否被adb识别。

adb devices

# if a device appears, run the next command.
# else accept a pop up if it appears on your device

npx cap run

进入全屏模式 退出全屏模式

现在您应该会看到手机上安装了该应用程序,并且您可以像其他任何应用程序一样与之交互!

但是等等,我们忘记了一件事。在开发过程中,实时更改将不起作用。您每次都需要构建、导出和运行。这很忙,所以让我们现在开始实时重新加载!

当您运行npx cap init [***]时,将在项目的根目录中创建一个capacitor.config.json文件。让我们继续编辑它,以便我们可以添加一个用于实时重新加载的服务器!

要获取系统的 IP 地址,请运行

ifconfig

进入全屏模式 退出全屏模式

或任何其他等效命令,具体取决于您的操作系统。顺便说一句,我使用 Arch Linux,所以ifconfig可以正常工作。如果你在 Windows 上,你可以尝试运行ipconfig。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--Uo3Mx3t9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/uploads/articles/zebi5g4op4w3vvuksvdh.png)

那将是您的本地网络IP。我的是192.168.1.9。所以我将使用它。

在您的capacitor.config.json中,添加以下内容:

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

进入全屏模式 退出全屏模式

现在有了这个设置,运行

yarn run build
npx next export

npx cap sync

进入全屏模式 退出全屏模式

现在你可以运行 next.js 给出的开发服务器了

yarn dev

进入全屏模式 退出全屏模式

现在随着开发服务器的运行,您的应用程序也在您的物理设备上运行。

npx cap run

进入全屏模式 退出全屏模式

伟大的!您现在可以使用您的应用进行实时重新加载!请记住在构建发布 APK 之前从capacitor.config.json中删除服务器配置。

奖金部分

恭喜你已经做到了这一步!现在我们将构建应用程序以使用 electron.js 以及桌面应用程序!

加装电容器电子平台

yarn add @capacitor-community/electron
npx cap add electron
npx cap sync

进入全屏模式 退出全屏模式

要运行您的应用程序,

npx cap open electron

进入全屏模式 退出全屏模式

现在享受您的 Next.js 代码库跨越 Web、Android、iOS、Windows、MacOS 和 Linux 的生活。

嗯,就是这样。希望这篇文章对大家有所帮助。干杯!