Refreshing Page on Route Returns Data Instead of HTML

[bestickley]

Hi, thank you for this incredible open source CDK construct!

I've run into an issue where I've deployed my Next.js site successfully and it mostly works, except when I refresh the page route on a specific route. Here is what happens:

I load the website by accessing it here: https://d1p0a0h0rn07pc.cloudfront.net which works great. See screenshot below for what I see:

You'll notice that the URL in the screenshot is https://d1p0a0h0rn07pc.cloudfront.net/batches because my app/page.tsx looks like:

export default function Root() {
  const router = useRouter();
  useEffect(() => {
    router.push("/batches");
  }, [router]);
}

Now, the issue occurs when I refresh the page on https://d1p0a0h0rn07pc.cloudfront.net/batches, I get this:

I'm not sure if this is an issue with this construct or I'm doing something wrong. I guess I could do redirect on server, but thought maybe this is an edge case this construct would want to fix.

Folder structure layout:

[khuezy]

This is likely due to the cache headers policy not setting rsc, next-router-prefetch, and next-router-state-tree
If you add those to the server cache policy, it should properly grab the correct cache.

[bestickley]

@khuezy, thanks for the quick response! I did what you suggested by adding those headers to the "Nextjs Lambda Default Cache Policy" (CloudFront > Policies > Cache > Custom Policies) like below and it works now!

Do you think these headers should always be added in Cache key settings? Should I create a PR? Why aren't these cache key headers already included in this construct?

[khuezy]

Yes, they should always be added. I think it was missed b/c this is specific to the appDir feature w/ the prefetch logics.
We would greatly appreciate a PR.

[bestickley]

@khuezy, I'd be happy to support this project by providing a PR. Thank you for your help!

[revmischa]

PRs very much welcome!