Is it OK to rely on/import addBasePath
and delBasePath
?
#16047
-
I have a component that takes a url as a prop, and raises an event when the link inside that component is clicked: import { addBasePath, delBasePath } from "next/dist/next-server/lib/router/router"
// this is all simplified for example purposes
<MyComponent
url="/some-page"
onButtonClick={e => router.push(e.detail.url)}
/> Because I don't have access to the internals of this component, I have to manually call However, with a base path set in next.config.js, I also need to ensure that the base path is added when passing the url to the component (so that the url rendered in the browser is correct), and that the base path is removed when calling import { addBasePath, delBasePath } from "next/dist/next-server/lib/router/router"
// again this is a contrived example...
// i realise i don't actually need delBasePath here,
// but in other instances i do, so it's included for illustration
<MyComponent
url={addBasePath("/some-page")}
onButtonClick={e => router.push(delBasePath(e.detail.url))}
/> So my question is, is it safe to rely on these functions? They're imported from Or are these considered private internals that are likely to change? If they are not safe to rely on, I wonder if these should be exposed as part of some public API (the router perhaps)? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
No—they are not safe to use, anything you import from You can read from the router object instead: import { useRouter } from 'next/router';
const { basePath } = useRouter(); |
Beta Was this translation helpful? Give feedback.
No—they are not safe to use, anything you import from
dist/...
is considered private and may break or change at any time.You can read from the router object instead: