Next.js Discord

Discord Forum

NextJS on Azure K8s with Ingress Nginx and the BasePath property

Unanswered
Polish posted this in #help-forum
Open in Discord
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:

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: 80


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 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-js
Does 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

0 Replies