Error "Unable to open asset URL" when using Nextjs + Capacitor

15 hours ago 1
ARTICLE AD BOX

My application only loads the index page, and I can't redirect the page
This is logcat from Android Studio:
enter image description here

ERROR:

2026-03-27 13:55:18.498 6849-6898 Capacitor club.booster.app D Handling local request: https://localhost/_next/data/clqgJW42PbnoFZ-zbIEum/auth/register.json 2026-03-27 13:55:18.500 6849-6898 Capacitor club.booster.app E Unable to open asset URL: https://localhost/_next/data/clqgJW42PbnoFZ-zbIEum/auth/register.json 2026-03-27 13:55:18.502 6849-6898 Capacitor club.booster.app E Unable to open asset URL: https://localhost/_next/data/clqgJW42PbnoFZ-zbIEum/auth/register.json 2026-03-27 13:55:18.505 6849-6898 Capacitor club.booster.app E Unable to open asset URL: https://localhost/_next/data/clqgJW42PbnoFZ-zbIEum/auth/register.json 2026-03-27 13:55:18.506 6849-6898 Capacitor club.booster.app E Unable to open asset URL: https://localhost/_next/data/clqgJW42PbnoFZ-zbIEum/auth/register.json

My next config:

const path = require('path'); /** * @type { import('next').NextConfig } */ const nextConfig = { output: 'export', compress: true, // react 18 about strict mode https://reactjs.org/blog/2022/03/29/react-v18.html#new-strict-mode-behaviors reactStrictMode: false, distDir: '.next', eslint: { // Warning: This allows production builds to successfully complete even if // your project has ESLint errors. in development we need to run yarn lint ignoreDuringBuilds: true }, images: { unoptimized: true, minimumCacheTTL: 300, remotePatterns: [{ protocol: 'https', hostname: `**.${process.env.DOMAIN}` }, { protocol: 'https', hostname: '**.xscripts.info' }, { protocol: 'https', hostname: '**.googleusercontent.com' }, { protocol: 'https', hostname: 'adaptive-scratchiest-ming.ngrok-free.dev' } ], domains: ['localhost', 'api.example.club'] }, // rewrites() { // return { // afterFiles: [{ // // default landing page is login page // source: '/', // destination: '/landing' // }] // }; // }, optimizeFonts: true, poweredByHeader: false, swcMinify: true, transpilePackages: ['antd', 'antd-img-crop', '@ant-design', '@rc-component', 'rc-util', 'rc-pagination', 'rc-picker', 'rc-notification', 'rc-tooltip', 'rc-tree', 'rc-table'], serverRuntimeConfig: { // Will only be available on the server side API_ENDPOINT: process.env.API_SERVER_ENDPOINT || process.env.API_ENDPOINT }, publicRuntimeConfig: { // Will be available on both server and client NODE_ENV: process.env.NODE_ENV, API_ENDPOINT: process.env.API_ENDPOINT, API_ANDROID_ENDPOINT: process.env.API_ANDROID_ENDPOINT, MAX_SIZE_IMAGE: process.env.MAX_SIZE_IMAGE || 5, MAX_SIZE_FILE: process.env.MAX_SIZE_FILE || 100, MAX_SIZE_TEASER: process.env.MAX_SIZE_TEASER || 200, MAX_SIZE_VIDEO: process.env.MAX_SIZE_VIDEO || 2000, HASH_PW_CLIENT: process.env.HASH_PW_CLIENT || true, DOMAIN: process.env.DOMAIN, SITE_URL: process.env.SITE_URL || `https://${process.env.DOMAIN}` } }; module.exports = nextConfig;

Capacitor config:

import type { CapacitorConfig } from '@capacitor/cli'; import * as dotenv from 'dotenv'; import path from 'path'; dotenv.config({ path: path.resolve(__dirname, '.env') }); const config: CapacitorConfig = { appId: 'club.example.app', appName: 'Example', webDir: 'out' // Remove/comment "server" before building the apk file. // server: { // url: process.env.SITE_URL || 'http://10.0.2.2:8081', // cleartext: true, // allowNavigation: [process.env.DOMAIN, '10.0.2.2:8081'] // } }; export default config;

Capacitor version:

"@capacitor/android": "^8.2.0", "@capacitor/app": "^8.0.1", "@capacitor/camera": "^8.0.2", "@capacitor/core": "^8.2.0", "@capacitor/ios": "^8.2.0", "@capacitor/preferences": "^8.0.1",

Nextjs:

"next": "^14.2.3",

I searched AI and it said to change all <Link /> to <a />, router.push -> window.location.replace,... I did all of that but it didn't work. I think I made a mistake in the configuration

Is there any way I can switch pages?

Read Entire Article