Nextjs + F7 routing issues

Questions
1

I just cloned the default f7+nextjs repo from github: GitHub - framework7io/framework7-nextjs-starter
Updated all libraries to latest version (7…0.8 for f7)
Running, seems all ok but shows popup errors
DEMO: https://by6lb7-3000.preview.csb.app/

Schermata 2022-10-20 alle 23.19.16
Schermata 2022-10-20 alle 23.19.161542×2082 286 KB

2

here is your (real) source code:

function MyApp({ Component, pageProps, userAgent }) {
  
  const router = useRouter();
  const url = `${process.env.NEXT_PUBLIC_HOST}${router.asPath}`;
  return (
    <App routes={routes} userAgent={userAgent} url={url}>
      <Panel left cover>
        <View url="/left-panel" />
      </Panel>
      <View
        main
        browserHistory
        browserHistorySeparator=""
        browserHistoryInitialMatch={true}
        browserHistoryStoreHistory={false}
        url="/"
      >
        <Component initialPage {...pageProps} />
      </View>
    </App>
  );
}

here is how webpack (really) build it (just part of it):

function MyApp(param) {
    var Component = param.Component, pageProps = param.pageProps, userAgent = param.userAgent;
    _s();
    var router = (0,next_router__WEBPACK_IMPORTED_MODULE_1__.useRouter)();
    var url = "".concat("http://localhost:3000/").concat(router.asPath);

the end result is:

url = "".concat("http://localhost:3000/").concat("/")
url = http://localhost:3000//

and if you call:

console.log(f7.passedParams.url)

you get => http://localhost:3000//

seems like you messed with [.env.development,.env.production]
make sure it is correct
it must be:
dev => http://localhost:3000 (not http://localhost:3000/)
prod => https://by6lb7-3000.preview.csb.app

or just remove ‘browserHistory’ if you dont really need it

here is a minimal demo (without browserHistory) => restless-haze-tereve

3

seems correctly setted, but if you type manually the url it won’t work, also url is not showing when change:
https://tereve-3000.preview.csb.app/blog/1231

4

Ok I think I solved it, thanks a lot:

function MyApp({ Component, pageProps, userAgent }) {
  
  const router = useRouter();
  const url = `${process.env.NEXT_PUBLIC_HOST}${router.asPath}`;
  return (
    <App routes={routes} userAgent={userAgent} url={url}>
      <View
        main
        browserHistory
        browserHistorySeparator=""
        browserHistoryInitialMatch={true}
        browserHistoryStoreHistory={false}
        animate={false}
        url="/"
      >
        <Component initialPage {...pageProps} />
      </View>
    </App>
  );
}