In a Nextjs app, I updated next.config.js to include:
module.exports = { basePath: '/project-name', };
I made this change for the following reasons:
My
ingress.yamlhas thatpathlisted below:-
apiVersion: networking.k8s.io/v1 kind: Ingress metadata: name: project-name-ingress annotations: konghq.com/plugins: public konghq.com/strip-path: "true" spec: ingressClassName: kong-gateway rules: - http: paths: - path: /project-name/ pathType: Prefix backend: service: name: project-name port: number: 3000
-
When I tried to access:
https://kong.k8s.development.{region}.{company}.cloud/{project-name}, I got back an empty UI despite a successful fetch ofindex.html. Each ofhtml's chunk requests failed. It requested paths like:/_next/static/chunks/{hash}.js.- When I searched in the browser search bar
https://kong.k8s.development.{region}.{company}.cloud/project-name/_next/static/chunks/{hash}.js, I did get back data, mainly because it included theproject-namein the url. That's why I updatednext.config.jsto include that basePath.
- When I searched in the browser search bar
However, after merging the change of the basePath in next.config.js, the path did update to include project-name but now even the fetching for the first file (index.html) fails.
I get back:
Request URL: https://kong.k8s.development.{region}.{company}.cloud/{project-name}/
Request Method: GET Status Code: 404 Not Found
In the response section, I get:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charSet="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="preload" href="/project-name/_next/static/media/{hash}.p.woff2" as="font" crossorigin="" type="font/woff2"/>
<link rel="stylesheet" href="/project-name/_next/static/css/{hash}.css" data-precedence="next"/>
<link rel="preload" as="script" fetchPriority="low" href="/project-name/_next/static/chunks/webpack-{hash}.js"/>
<script src="/project-name/_next/static/chunks/{hash}.js" async=""></script>
<script src="/project-name/_next/static/chunks/{hash}.js" async=""></script>
<script src="/project-name/_next/static/chunks/main-app-{hash}.js" async=""></script>
<script src="/project-name/_next/static/chunks/{hash}.js" async=""></script>
<script src="/project-name/_next/static/chunks/app/layout-{hash}.js" async=""></script>
<meta name="robots" content="noindex"/>
<title>PROJECT Title</title>
<meta name="description" content="Generated by create next app"/>
<link rel="icon" href="/logo.svg"/>
<meta name="next-size-adjust"/>
<script src="/project-name/_next/static/chunks/polyfills-{hash}.js" noModule=""></script>
</head>
<body class="__className_{hash}">
// {...more <script> tags...}
</body>
</html>
What is going wrong? Why is it that now even the first file is returning a 404, along with every chunk? Searching for every chunk in the browser fails.
How do I successfully load up and access the app with the url: https://kong.k8s.development.{region}.{company}.cloud/{project-name}/?
I tried to resolve the issue by adding the basePath, but it didn't solve the issue...