How to add forward headers for _next/data/*

[jjanssen]

Describe the issue

Right now we have a site which is mostly based upon getServerSideProps to connect to a large instance of a CMS.

I managed to forward the Authorization and Host in a default scenario. Authorization as I also have basic authentication implemented on a test and acceptance environment. The host as I'm required to do some additional filtering in a multisite environment. There are static pages, but other than that pages/[...slug].jsmanages most of the routing to connect to the CMS.

When accessing the URL directly my hostname gets passed on correctly. But when navigating throughout, the client-side is making a call to /_next/data/something in order to full-fill the server-side call. Yet now my host isn't forwarded anymore as I'm matching the /_next/data/ behaviour in CloudFront.

I'm also able to configure forwarding headers for api/* as per the example in the README.md.
But somehow I'm not able to pass these in the assumption I have to enter _next/data/* to match the behaviour pattern:

    cloudfront:
      priceClass: "PriceClass_100"
      defaults:
        forward:
          headers:
            [
              Authorization,
              Host
            ]
      api/*:
        forward:
          headers:
            [              
              Authorization,
              Host
            ]
      _next/data/*:
        forward:
          headers:
            [
              Authorization,
              Host
            ]

If I would have configured the following it would end-up throwing the following message:

  Error: CloudFront input failed validation. Could not find next.js pages for "_next/data/*"
    at NextjsComponent.validatePathPatterns (/Users/j.janssen/.serverless/components/registry/npm/@sls-next/serverless-component@1.18.0-alpha.7/node_modules/@sls-next/serverless-component/dist/component.js:140:13)
    at NextjsComponent.<anonymous> (/Users/j.janssen/.serverless/components/registry/npm/@sls-next/serverless-component@1.18.0-alpha.7/node_modules/@sls-next/serverless-component/dist/component.js:409:12)
    at Generator.next (<anonymous>)
    at fulfilled (/Users/j.janssen/.serverless/components/registry/npm/@sls-next/serverless-component@1.18.0-alpha.7/node_modules/@sls-next/serverless-component/dist/component.js:15:26)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:94:5)

  39s › my-fancy-website-tst › Error: CloudFront input failed validation. Could not find next.js pages for "_next/data/*"

I have been looking around at other issues and #617 seems identical, except the upgrade didn't make a difference.

Versions

• OS/Environment: OSX 10.14.6
• @sls-next/serverless-component version: 1.18.0-alpha.7
• Next.js version: 9.5.0

Checklist

• You have reviewed the README and FAQs, which answers several common questions.
• Please first try using the latest @sls-next/serverless-component release version, which may have already fixed your issue. Note that the old serverless-next.js component and the serverless-next.js plugin are deprecated and no longer maintained.

How-to reproduce

A basic setup can be found here: https://github.com/jjanssen/serverless-next-bare-example/
A yarn install and serverless would already do the trick and has a fragment of the _next/data commented out.

[dphang]

Yeah, I get the same error. Though even after fixing that it may not work. I have a feeling it's because _next/data/* cache behavior is set close to the end here, and it doesn't seem like it uses any custom cache behavior set for it and just sets it to default values: https://github.com/serverless-nextjs/serverless-next.js/blob/master/packages/serverless-components/nextjs-component/src/component.ts#L489-L500, perhaps moving it earlier before validatePathPatterns or at least unioning it with user-provided configuration may work.

It works on direct page call since your default cache behavior is forwarding Host, but client-side navigation will render the data via /_next/data/* route.

Will check on this case in the next days.

[dphang]

Fixed and published in latest alpha version. Let us know if there are any issues.

[jjanssen]

I just did a test with the example repository and also within the project we are developing and it applies and sets the headers correctly. Thanks for being able to look at this and fix this on such short notice 💯 Thought for a moment I was missing out on some configuration details. 😄