Next.js SSR开发的Web应用打包为Android APK的解决方案咨询

方案1：直接用Android WebView打包原生壳应用 #

这是最直接的方案，完全绕开SSR的问题——本质就是做一个只加载你指定域名的简易浏览器壳，WebView会直接访问线上的Next.js站点，和用户用手机浏览器访问效果一致。

步骤如下：

• 打开Android Studio，新建一个空的Android项目
• 在activity_main.xml布局文件中添加WebView组件：

<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

• 在MainActivity.kt（或Java版本的MainActivity.java）中配置WebView，启用JS并拦截导航避免跳转到系统浏览器：

import android.os.Bundle
import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        val webView = findViewById<WebView>(R.id.webview)
        webView.settings.javaScriptEnabled = true
        // 拦截链接跳转，在WebView内打开
        webView.webViewClient = object : WebViewClient() {
            override fun shouldOverrideUrlLoading(view: WebView?, url: String?): Boolean {
                url?.let { view?.loadUrl(it) }
                return true
            }
        }
        // 加载你的目标域名
        webView.loadUrl("https://example.com")
    }
}

• 在AndroidManifest.xml中添加网络权限：

<uses-permission android:name="android.permission.INTERNET" />

• 最后直接打包生成APK即可。

方案2：使用Cordova打包外部URL应用 #

Cordova和Capacitor类似，但它支持直接加载外部线上URL，不需要把本地项目打包进去，完全不受Next.js SSR的限制。

操作步骤：

1. 安装Cordova CLI：npm install -g cordova
2. 创建新项目：cordova create MyApp com.example.myapp MyApp
3. 进入项目目录：cd MyApp
4. 添加Android平台：cordova platform add android
5. 修改config.xml，设置启动URL为你的目标域名，同时允许访问该域名：

<!-- 设置启动URL -->
<content src="https://example.com" />
<!-- 允许访问目标域名 -->
<access origin="https://example.com" />
<!-- 允许导航到该域名下的所有子链接 -->
<allow-navigation href="https://example.com/*" />

6. 打包APK：cordova build android

方案3：若Next.js应用支持静态导出，继续用Capacitor #

如果你的Next.js应用没有依赖getServerSideProps或getInitialProps这类必须SSR的特性，可以先把项目导出为静态HTML，再用Capacitor打包：

• 在next.config.js中配置静态导出：

module.exports = {
  output: 'export',
}

• 执行npm run build && next export，生成out目录
• 把out目录下的所有文件复制到Capacitor项目的www目录
• 然后正常执行npx cap sync android和打包命令即可

内容的提问来源于stack exchange，提问作者IsoW