紧接着上文中，我们对比了包括flutter、react-native、uniapp等跨端技术方案，最终选择了capacitor和nextjs来搭配使用。具体的案例如下：
一、项目初始化
首先，我们需要用nextjs去初始化一个前端项目。关于nextjs，我们可以从它的官网www.nextjs.cn/ 上得知，nextjs是一个用于生产环境的react框架。它具有零配置、
混合模式：SSG和SSR、增量生成、代码拆分和打包等功能。是一种基于vercel平台的开发
框架，目前在国内外有许多react项目都在做nextjs和react的同构，在服务端同样有一款对应的框架nestjs，对于vue则是nuxtjs。
初始化
首先，我们需要确保我们的环境中有安装node，并且node的版本不低于10.13
然后在命令行终端中输入
npx create-next-app cap-next
其中cap-next为该项目的appname，在输入这行代码之后，命令行会提示
是否继续，然后它会自动安装react、react-dom、next相关的依赖，在文件夹下就会生成如下
结构的项目
查看package.json文件，运行cd cap-next && npm run dev，可以发现项目启动成功，在浏览器中打开http://localhost:3000，可以得到下面的页面。至此，我们的项目初始化完成。
二、项目app化
再来仔细看看项目结构，展开每个文件夹我们可以看到
整个项目目录相比普通的react项目而言，最大的区别在于nextjs的项目是没有index.html这个根文件的，那么它是如何渲染到页面上的呢
从官网上可以知道，nextjs是动态渲染，动态生成html文件的，当然如果不通过执行next export命令，你是无法在文件中找到html文件的。记住next export命令很重要，html文件也很重要。因为对于一般的跨端技术方案来说，需要提供一个根文件来导入相关的库，比如react-native。
然而，我们的capacitor.js就可以很好的解决这个问题，具体查看官网相关说明capacitorjs.com/
现在，我们正式开始将nextjs项目进行app化，使用的就是capacitor这个框架。
跟着官方文档的说明，我们需要安装capacitor相关的库
npm i @capacitor/core
npm i @capacitor/cli -D
个人建议，可以改用yarn或者pnpm进行安装，具体操作自行查找资料
npx cap init
进行初始化之后，会生成一个capacitor.config.js的配置文件，用于配置capacitor的原生应用，如下图
这里需要手动将webDir字段修改成out，因为这表示你的h5资源是从哪个文件夹下获取，写成out是为了后面执行next export命令做准备。
现在回到cap-next目录底线，在命令行中输入 npm run build进行打包，会正常执行，接着将package.json修改成
然后执行npm run export 你会发现会报错，原因是image标签缺少loader
解决方案：在next.config.js文件中添加下面的代码
即添加上相应的images-loader，再次执行npm run export，就可以正常导出了。
其结果，我们可以看到会在根文件夹下生成一个out文件夹，这也是为什么刚才配置capacitor.config.js的时候需要将webDir设置成out的原因，在这个out文件夹中我们可以找到对应的html文件。至此，已经成功了一大半了。
接着就是和原生相关的部分了，输入下面的代码
npx cap add android
npx cap add ios
执行完毕会在文件夹中生成对应的android和ios文件夹，这些文件夹就是nextjs对应的原生文件夹。分别加载到android studio和xcode中就可以跑起来了，然后根据具体的需要就可以打包出对应的.apk和.ios文件了。
至此，使用capacitor.js框架结合nextjs完成跨端开发就已经结束。稍微总结一下，capacitor.js框架的好处是可以将纯h5的项目快速打包成一个app，不需要多少原生的基础，并且在capacitor.js官网中，我们还可以使用插件，实现很多原生的功能，比如照相，地图，facebook第三方登录等，在下一期，我将通过接入capacitor-facebook-login-plugin完成facebook在nextjs项目中唤起手机上的facebook app来完成第三方登录的功能。
谢谢大家～
相关的github链接：github.com/Soul-Xu/pac…
