NextJS on Azure K8s with Ingress Nginx and the BasePath property
Unanswered
Polish posted this in #help-forum
PolishOP
My Issue is, I am trying to run my NextJS server on a subpath of my domain.
Lets say this is my desired URL: https://my-domain.com/next-js
my-domain.com is under my full control and this is where my Ingress-Nginx is running. The logical thing to do was to add a route to my ingress configuration and link that to my application, like this:
At this point, I have not yet set the 'basePath' or 'assetPrefix' property in my next.config.js, so they are both empty Strings.
The error in this scenario is, that I can reach my
Obvious problem, right? Just set the basePath and you are done? Lets try that:
Re-deploy and opening my application again using this URL:
Result: I get the 404 Not found Page from the NextJS Server. Not from the NGINX, but from the NextJS Server. Where is my application running? Right, on this Url:
Does this fix my problems? No, the assets (CSS & JS files) are now retrieved from:
The fix for deploying my NextJS application is updating my next.config.js to this:
So I have a working Setup now. Does it make any sense though? No, in my opinion not. Please enlighten me by answering the following questions:
1) The next.js docs for assetPrefix clearly state the following:
Which indicates to me I should obviously use basePath. the basePath documentation underlines that:
Why doesn't the official docs explain this better?
2) Why does the NextJS Server think its his responsibility to create this sub path / subdomain? I have multiple other applications running in my Kubernetes Cluster, which all had the same issue with the basePath being a subdomain (Python FastAPI App, Java Spring Boot App, multiple Angular Apps)
E.g. in python all I had to do was this:
This doesnt make the my python server create another subdomain under
You can see I am super irritated by this, it has cost me 3 days to figure this out, and I STILL DONT UNDERSTAND WHY.
So if any of you kind people can explain this to me, I would greatly appreciate it
Lets say this is my desired URL: https://my-domain.com/next-js
my-domain.com is under my full control and this is where my Ingress-Nginx is running. The logical thing to do was to add a route to my ingress configuration and link that to my application, like this:
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
name: my-ingress
namespace: default
annotations:
nginx.ingress.kubernetes.io/rewrite-target: /$2
spec:
rules:
- host: my-domain.com
http:
paths:
- path: /next-js(/|$)(.*)
pathType: Prefix
backend:
service:
name: next-js-service
port:
number: 80At this point, I have not yet set the 'basePath' or 'assetPrefix' property in my next.config.js, so they are both empty Strings.
The error in this scenario is, that I can reach my
pages/index.tsx upon opening the URL, however my page is trying to request all CSS+JS files without the path /next-js.Obvious problem, right? Just set the basePath and you are done? Lets try that:
const nextConfig = {
assetPrefix: '',
basePath: '/next-js',
}Re-deploy and opening my application again using this URL:
https://my-domain.com/next-js. Result: I get the 404 Not found Page from the NextJS Server. Not from the NGINX, but from the NextJS Server. Where is my application running? Right, on this Url:
https://my-domain.com/next-js/next-jsDoes this fix my problems? No, the assets (CSS & JS files) are now retrieved from:
https://my-domain.com/next-js/_next/...., all resulting in a HTTP 404.The fix for deploying my NextJS application is updating my next.config.js to this:
const nextConfig = {
assetPrefix: '/pdf-tool',
basePath: '',
}So I have a working Setup now. Does it make any sense though? No, in my opinion not. Please enlighten me by answering the following questions:
1) The next.js docs for assetPrefix clearly state the following:
Good to know: Next.js 9.5+ added support for a customizable Base Path, which is better suited for hosting your application on a sub-path like /docs. We do not suggest you use a custom Asset Prefix for this use case.Which indicates to me I should obviously use basePath. the basePath documentation underlines that:
To deploy a Next.js application under a sub-path of a domain you can use the basePath config option. basePath allows you to set a path prefix for the application.Why doesn't the official docs explain this better?
2) Why does the NextJS Server think its his responsibility to create this sub path / subdomain? I have multiple other applications running in my Kubernetes Cluster, which all had the same issue with the basePath being a subdomain (Python FastAPI App, Java Spring Boot App, multiple Angular Apps)
E.g. in python all I had to do was this:
# Init FastAPI app
root_path = os.getenv('ROOT_PATH', '/')
app = FastAPI(root_path=root_path)This doesnt make the my python server create another subdomain under
https://my-domain.com/python-app/python-app. It simply runs under /python-app and all my resources are then requested with the proper /python-app prefix.You can see I am super irritated by this, it has cost me 3 days to figure this out, and I STILL DONT UNDERSTAND WHY.
So if any of you kind people can explain this to me, I would greatly appreciate it