For languages that have a prefix in the url causes full page fetches of the whole html document, instead of separate pages

[timothyman1]

Using the Prefix strategy in @inlang/paraglide-next, if switching to a language which is not the default one, causing the url path to contain a prefix (for example for german domain/de/smthing) causes every transition to a different page to fully fetch the whoole html document, causing every layout and everything to rerender. It seems like it is happening because there is no dynamic route for the prefix and nextjs returns a 404 for this page path, cause there isnt a path.
Following the docs, it doesnt say to add a dynamic route for this strategy.

in the network tab you can that it falls while fetching a single page and then right after fetches for the whole html document, every layout and eveything to rerender

im using:

   "@inlang/paraglide-next": "^0.6.0",
   "@inlang/paraglide-js": "1.11.8",
   "next": "^14.2.24",

[samuelstroschein]

Hey, try using the Paraglide JS 2.0 beta.

Paraglide JS 1.0 and adapter issues are not being fixed anymore. Paraglide JS 2.0 doesn;'t even need adapters any more #201 (comment).

Docs for Next JS with 2.0 can be found here. https://inlang.com/m/gerre34r/library-inlang-paraglideJs/next-js PRs that improve the docs are welcome!

[timothyman1]

@samuelstroschein will this work with Nextjs v14? and is it compatible with @inlang/paraglide-next ?

[samuelstroschein]

@timothyman1 yes, works with nextjs14. @inlang/paraglide-next is deprecated. use @inlang/paraglide-js directly

[timothyman1]

@samuelstroschein the @inlang/paraglide-next lib provided localized wrappers for some next navigations hooks/functions from the Navigation function, like usePathName, useRouter, redirect and Link. I've seen in the SSR example that the Link just uses localizeUrl for the href, but what about the hooks, like useRouter which has a push method, does that mean that i need to always add the desirable path in the localizeUrl function? and what about usePathName, does it delocalize the url?

[samuelstroschein]

@timothyman1 would using localizeHref/localizeUrl not work?

 
function ActiveLink({ children, href }) {
  const router = useRouter()
 
  const handleClick = (e) => {
    e.preventDefault()
    router.push(localizeHref("/page"))
  }
 
  return (
    <button onClick={handleClick}>
      {children}
    </button>
  )
}

[samuelstroschein]

and what about usePathName, does it delocalize the url?

Probably not if it's a client side API. You would need to wrap it with deLocalizeHref.