将flutter web应用程序集成到Nextjs web中

Question

我正试图将一个扑动web应用程序集成到Nextjs网页。我看到过这个问题，但它不起作用。我也希望能够通过一个用户id或字符串的扑动应用程序。

我看到我可以使用Iframe，但我不认为这是最好的方法。

我希望你能帮助我!提前谢谢。

Answer 1

您上面提到的问题(https://stackoverflow.com/a/70935986)不起作用。在React中，它是这样的。但是,Next.js吗?不会的。为什么?因为Next.js为客户端和服务器端呈现两次。

所以，把你的flutter应用程序构建在/public文件夹。在route components on load事件中，用下面的代码加载该应用。

function loadMainDartJs() {
var scriptTag = document.createElement('script');
scriptTag.src = './main.dart.js';
scriptTag.type = 'application/javascript';
document.getElementById('flutterPreview').append(scriptTag);
}
// Should be called on load of client-side render
if (typeof window !== "undefined") loadMainDartJs();

另一个很好的参考阅读:https://github.com/vercel/next.js/issues/5354#issuecomment-520305040