I am working on a NextJS project and need to define a function that can be invoked by native code (Android/iOS) and call another function which in turn triggers the native code.
My goal is to make these functions accessible throughout the entire project so they can be called whenever needed without any issues.
I currently have a snippet of working code:
<html>
<head></head>
<body>
<script>
var counter = 1;
function buttonClicked(e) {
invokeCSharpAction(counter++);
}
function nativeDemand(data) {
var el = document.getElementById('webtext');
el.innerHTML = data;
return 'test'
}
</script>
<button onclick='javascript:buttonClicked(event)'>Click Me!</button>
<div id='webtext' style='font-family: script'><b>This web text will change when you push the native button.</b></div>
</div>
</html>
"
However, I am facing difficulties integrating these functions into my next project. When I add them to a page, they are not recognized as app functions. Additionally, since the invokeCSharpAction function is not defined anywhere (since it is picked up by the native app), the build process fails.
I attempted to create a script item in the public/static/ folder with these functions and include them on the page using
<script type="text/javascript" src="/static/script.js" async>As a newcomer to NextJs, any advice or guidance would be greatly appreciated.