The content of my Next js app is not being loaded in my WebView.
I have a simple next js app that i want to load as static file in a WebView.
To do that i ran:
npx next build
npx next export
then i copied the newly created /out folder in my React-Native app. ( For android android/app/src/main/assets/out ).
This is the index.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta name="next-head-count" content="2" />
<noscript data-n-css=""></noscript>
<script
defer=""
nomodule=""
src="./_next/static/chunks/polyfills-5cd94c89d3acac5f.js"
></script>
<script
src="./_next/static/chunks/webpack-434fefa8f39d8fbc.js"
defer=""
></script>
<script
src="./_next/static/chunks/framework-0e90cbf53d3785fb.js"
defer=""
></script>
<script
src="./_next/static/chunks/main-f65e66e62fc5ca80.js"
defer=""
></script>
<script
src="./_next/static/chunks/pages/_app-d147581f7d5a26ef.js"
defer=""
></script>
<script
src="./_next/static/chunks/ffe6318b-78fdf1aa1284bb62.js"
defer=""
></script>
<script
src="./_next/static/chunks/d9fcd7e1-1af5f391065d9528.js"
defer=""
></script>
<script
src="./_next/static/chunks/957d5091-e6e13748ee910e93.js"
defer=""
></script>
<script
src="./_next/static/chunks/91ed190f-8481ca3f0c149074.js"
defer=""
></script>
<script
src="./_next/static/chunks/fec483df-e3f27fc2944a8470.js"
defer=""
></script>
<script
src="./_next/static/chunks/8015bd09-8f6407b97da9214f.js"
defer=""
></script>
<script
src="./_next/static/chunks/705-03f6e1a04c95ed80.js"
defer=""
></script>
<script
src="./_next/static/chunks/pages/index-7da29ff49b69596f.js"
defer=""
></script>
<script
src="./_next/static/gF9J6oBqA-HcXJwf93Cir/_buildManifest.js"
defer=""
></script>
<script
src="./_next/static/gF9J6oBqA-HcXJwf93Cir/_ssgManifest.js"
defer=""
></script>
<script
src="./_next/static/gF9J6oBqA-HcXJwf93Cir/_middlewareManifest.js"
defer=""
></script>
</head>
<body>
<h1>Hello here</h1>
<div id="__next" data-reactroot=""><div></div></div>
<script id="__NEXT_DATA__" type="application/json">
{
"props": { "pageProps": {} },
"page": "/",
"query": {},
"buildId": "gF9J6oBqA-HcXJwf93Cir",
"nextExport": true,
"autoExport": true,
"isFallback": false,
"scriptLoader": []
}
</script>
</body>
</html>
The <h1>Hello there</h1>
gets rendered, i added it to see if the index.html file is found.
In src="./_next/static/chunks/pages/index-7da29ff49b69596f.js"
is a <div>hi</div>
which doesn’t get rendered, i put it there to test if it loads the files at all.
This is how i load the WebView:
<WebView
ref={webviewRef}
scalesPageToFit={false}
mixedContentMode="compatibility"
onMessage={onMessage}
originWhitelist={['*']}
javaScriptEnabled={true}
source={{
uri: 'file:///android_asset/out/index.html',
}}
/>
What am i doing wrong?
Is this even possible?
2
Answers
You can use props call injectedjavascript from react-native-webview
I have also tried the same. But it didn’t work for me. Cause the
index.html
file generated fromnext/react build
doesn’t behave like regular html file you can open with browser. In order to render the html file you will need a server. I would like to suggest that you host the file in a server and use the url or try to create a local server in the native device on app startup and use the url (though it is not tested, just a theory). Good luck.