basePath, Nextra with NextJs13, issues with dev server and public assets.
Answered
Golden northern bumble bee posted this in #help-forum

Golden northern bumble beeOP
I have changed my
Secondly, I have images in
basePath
in next.config.js
to /foo/bar
, but when I run the app using yarn dev
(or yarn build
followed by yarn start
), it always starts at localhost:3000
and I have to navigate to localhost:3000/foo/bar
to make it work. Is this expected? How can I make this work?Secondly, I have images in
<project-root>/public/images
and my documentation pages ae in <project-root>/pages
. However, after changing the basePath
as above, the images don't load unless I change the image URLs to /foo/bar/images/<image-name>
. How to fix this?Answered by Clown
Ok so if i remember correctly, basePath just means that your next app is deployed under url+basePath. Meaning it wont do the redirection for you. It just adds that basePath automatically to some stuff like links.
You can set up a simple redirect to that location if you want to.
How to create a redirect:
https://nextjs.org/docs/app/api-reference/next-config-js/redirects
For the image issue read this first:
https://nextjs.org/docs/app/api-reference/next-config-js/basePath#images
You can set up a simple redirect to that location if you want to.
How to create a redirect:
https://nextjs.org/docs/app/api-reference/next-config-js/redirects
For the image issue read this first:
https://nextjs.org/docs/app/api-reference/next-config-js/basePath#images
5 Replies

Ok so if i remember correctly, basePath just means that your next app is deployed under url+basePath. Meaning it wont do the redirection for you. It just adds that basePath automatically to some stuff like links.
You can set up a simple redirect to that location if you want to.
How to create a redirect:
https://nextjs.org/docs/app/api-reference/next-config-js/redirects
For the image issue read this first:
https://nextjs.org/docs/app/api-reference/next-config-js/basePath#images
You can set up a simple redirect to that location if you want to.
How to create a redirect:
https://nextjs.org/docs/app/api-reference/next-config-js/redirects
For the image issue read this first:
https://nextjs.org/docs/app/api-reference/next-config-js/basePath#images
Answer

Golden northern bumble beeOP
@SupremeDeity Thank you! I will read through the docs that you've linked.
Just one question though - is there a way to configure
npm run dev
(meaing next dev
) for local development? It starts off the dev server at localhost:300
instead of localhost:3000/foo/bar
(which makes sense as you say), but it's very tedious to have to manually change that URL every time!(Oh, if I read you correctly, the redirects bit should resolve this issue, right?)
As in, I can make
localhost:3000
to redirect to localhost:3000/foo/bar
?