Rebuilt my application with Nextjs 13, and modified everything to flow though the app router. Everything works in dev, builds, and even serves on the IP. When using an Nginx proxy passthrough to serve the domain https://www.example.com (how I've been doing it for a long time, see config below), the site throughs the following error:
Application error: a client-side exception has occurred (see the browser console for more information).
Upon further inspection my Dynamic Pages router /app/[...slug] is receiving requests for the js chunks and other asset files (but only when recieiving traffic via the domian name). It is not setup to handle this request, only requests to pages prerendered by generateStaticParams(). console logging from the params received by the page indicates the following:
Page({ params }) {
slug: [ '_next', 'static', 'chunks', 'app', '%5B...slug%5D', 'page-ce65b45953b9e7b2.js' ] }
Another interesting note, it only happens on pages one path down, handled via dynanmic routing. The homepage is unaffected and can fetch the js chunks (which are requetsed at the same locations). In other words, the paths of the requested files are not being affected, just the handling of them with my dynamic slug handling page.
Generate static parameters and dynamic Page look like this:
export async function generateStaticParams() {
let data = await getPagePathData()
return data.paths.map((item) => {
let newStr
if (item[0] == '/') { //Remove Leading /
newStr = item.substring(1);
}
if (item.slice(-1) == '/') {//Remove Trailing /
newStr = item.slice(0, -1);
}
newStr = newStr.split('/') // Split into array.
return ({ slug: newStr })
})
}
export default async function Page({ params }) {
console.log('Page({ params }) ', params)
const { slug } = params
const path = `/${slug.join('/')}` //convert back to long fromat url
if(path.includes('_next')){
console.log(' Page path.includes(_next)){',path)
}
let data = await getPageData(path)
let { page, navEntries, subNavEntries, branding, appearance } = data
let {allPages} = await getAllPageData()
if (!data) { return (<h1>Page does not exist</h1>) }
return <ClientPageLayout navEntries={navEntries} subNavEntries={subNavEntries} branding={branding} page={page} appearance={appearance} allPages={allPages}/>
}
Nginx config looks like this,
location / {
proxy_pass http://localhost:3011/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
#redirect file
#include /var/www/lookoutvalleychiro/lookoutvalleychiro.com.redirects.conf; # need to check if this exists.
}
Any direction or help at all would be greatly appreciated, completely stuck.