'Integrate flutter web application into Nextjs web

I am trying to integrate a flutter web app into a Nextjs webpage. I have seen this question but it is not working. I also want to be able to pass a user id or string to the flutter app.

I saw that I can use an Iframe but I don't think that's the best way.

I hope you can help me! Thanks in advance.

Solution 1:^[1]

The question you mention above (https://stackoverflow.com/a/70935986) is not working. In the case of React, it does. But, Next.js? Won't. Why? Because Next.js renders twice for client-side and server-side.

So, put your flutter app build inside /public folder. And inside route components on load event, load that application with the below code.

    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();

Another good reference to read: https://github.com/vercel/next.js/issues/5354#issuecomment-520305040

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	ImBIOS

'Integrate flutter web application into Nextjs web

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]