feat: support custom response headers on images served via IPX #1515

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Merged

kodiakhq merged 13 commits into main from ep/support-custom-response-headers-on-images

Aug 12, 2022

ericapisani commented Aug 11, 2022 •

edited by nickytonline

Loading

Summary

Adds support for custom response headers to be added to images served with IPX

Test plan

Visit this page
Inspect the requests for images in the developer tools console (network tab, look for the ones that begin with ?url)
should see 'x-test: foobar' in the response headers

Relevant links (GitHub issues, Notion docs, etc.) or a picture of cute animal

netlify/netlify-ipx#51
https://github.com/netlify/pod-ecosystem-frameworks/issues/148

Standard checks:

Check the Deploy Preview's Demo site for your PR's functionality
Add docs when necessary

🧪 Once merged, make sure to update the version if needed and that it was published correctly.

ericapisani added 3 commits

August 10, 2022 13:55


          feat: support custom response headers in image handler

98b8969

Depends on netlify/netlify-ipx#51


          test: install ipx package in dev

97089c9

includes the changes needed to support custom response headers


          chore(deps): upgrade ipx package

b316864

this version contains changs for supporting custom response headers

ericapisani self-assigned this

netlify bot commented Aug 11, 2022 •

edited

Loading

✅ Deploy Preview for next-hp-edge-demo ready!

Name	Link
🔨 Latest commit	`0812edf`
🔍 Latest deploy log	https://app.netlify.com/sites/next-hp-edge-demo/deploys/62f65c01d7c42e00095bcc05
😎 Deploy Preview	https://deploy-preview-1515--next-hp-edge-demo.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify bot commented Aug 11, 2022 •

edited

Loading

✅ Deploy Preview for netlify-plugin-nextjs-demo ready!

Name	Link
🔨 Latest commit	`0812edf`
🔍 Latest deploy log	https://app.netlify.com/sites/netlify-plugin-nextjs-demo/deploys/62f65c00a05afb000c9b75b5
😎 Deploy Preview	https://deploy-preview-1515--netlify-plugin-nextjs-demo.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify bot commented Aug 11, 2022 •

edited

Loading

✅ Deploy Preview for netlify-plugin-nextjs-nx-monorepo-demo ready!

Name	Link
🔨 Latest commit	`0812edf`
🔍 Latest deploy log	https://app.netlify.com/sites/netlify-plugin-nextjs-nx-monorepo-demo/deploys/62f65c000532d40008b17f0a
😎 Deploy Preview	https://deploy-preview-1515--netlify-plugin-nextjs-nx-monorepo-demo.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

github-actions bot added the type: feature label

netlify bot commented Aug 11, 2022 •

edited

Loading

✅ Deploy Preview for netlify-plugin-nextjs-export-demo ready!

Name	Link
🔨 Latest commit	`0812edf`
🔍 Latest deploy log	https://app.netlify.com/sites/netlify-plugin-nextjs-export-demo/deploys/62f65c00e2f46d0008c2bab0
😎 Deploy Preview	https://deploy-preview-1515--netlify-plugin-nextjs-export-demo.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify bot commented Aug 11, 2022 •

edited

Loading

✅ Deploy Preview for next-plugin-canary ready!

Name	Link
🔨 Latest commit	`0812edf`
🔍 Latest deploy log	https://app.netlify.com/sites/next-plugin-canary/deploys/62f65c01df16550008a1e587
😎 Deploy Preview	https://deploy-preview-1515--next-plugin-canary.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify bot commented Aug 11, 2022 •

edited

Loading

✅ Deploy Preview for netlify-plugin-nextjs-next-auth-demo ready!

Name	Link
🔨 Latest commit	`0812edf`
🔍 Latest deploy log	https://app.netlify.com/sites/netlify-plugin-nextjs-next-auth-demo/deploys/62f65c01be08ef00085f9597
😎 Deploy Preview	https://deploy-preview-1515--netlify-plugin-nextjs-next-auth-demo.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify bot commented Aug 11, 2022 •

edited

Loading

✅ Deploy Preview for ep-custom-response-headers-with-ipx-changes ready!

Name	Link
🔨 Latest commit	`0812edf`
🔍 Latest deploy log	https://app.netlify.com/sites/ep-custom-response-headers-with-ipx-changes/deploys/62f65c019becc20008d680a9
😎 Deploy Preview	https://deploy-preview-1515--ep-custom-response-headers-with-ipx-changes.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify bot commented Aug 11, 2022 •

edited

Loading

✅ Deploy Preview for next-plugin-edge-middleware ready!

Name	Link
🔨 Latest commit	`0812edf`
🔍 Latest deploy log	https://app.netlify.com/sites/next-plugin-edge-middleware/deploys/62f65c01533abd0008e3db8a
😎 Deploy Preview	https://deploy-preview-1515--next-plugin-edge-middleware.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify bot commented Aug 11, 2022 •

edited

Loading

✅ Deploy Preview for next-plugin-rsc-demo ready!

Name	Link
🔨 Latest commit	`0812edf`
🔍 Latest deploy log	https://app.netlify.com/sites/next-plugin-rsc-demo/deploys/62f65c01e2f46d0008c2bab5
😎 Deploy Preview	https://deploy-preview-1515--next-plugin-rsc-demo.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify bot commented Aug 11, 2022 •

edited

Loading

✅ Deploy Preview for next-i18next-demo ready!

Name	Link
🔨 Latest commit	`0812edf`
🔍 Latest deploy log	https://app.netlify.com/sites/next-i18next-demo/deploys/62f65c01bf87190009b29528
😎 Deploy Preview	https://deploy-preview-1515--next-i18next-demo.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify bot commented Aug 11, 2022 •

edited

Loading

✅ Deploy Preview for netlify-plugin-nextjs-static-root-demo ready!

Name	Link
🔨 Latest commit	`0812edf`
🔍 Latest deploy log	https://app.netlify.com/sites/netlify-plugin-nextjs-static-root-demo/deploys/62f65c00c024cc000876eae9
😎 Deploy Preview	https://deploy-preview-1515--netlify-plugin-nextjs-static-root-demo.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify bot commented Aug 11, 2022 •

edited

Loading

✅ Deploy Preview for nextjs-plugin-custom-routes-demo ready!

Name	Link
🔨 Latest commit	`0812edf`
🔍 Latest deploy log	https://app.netlify.com/sites/nextjs-plugin-custom-routes-demo/deploys/62f65c01d7c42e00095bcc07
😎 Deploy Preview	https://deploy-preview-1515--nextjs-plugin-custom-routes-demo.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

cypress bot commented Aug 11, 2022 •

edited

Loading

Test summary

22 • 0 • 0 • 0

Run details


Project	netlify-plugin-nextjs-default-demo
Status	Passed
Commit	`83b6058` ℹ️
Started	Aug 12, 2022 2:02 PM
Ended	Aug 12, 2022 2:03 PM
Duration	01:24 💡
OS	Linux Ubuntu - 20.04
Browser	Chrome 104

View run in Cypress Dashboard ➡️

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

cypress bot commented Aug 11, 2022 •

edited

Loading

Test summary

2 • 0 • 0 • 0

Run details


Project	netlify-plugin-nextjs-nx-monorepo-demo
Status	Passed
Commit	`b1dd0d0` ℹ️
Started	Aug 12, 2022 2:03 PM
Ended	Aug 12, 2022 2:04 PM
Duration	01:10 💡
OS	Linux Ubuntu - 20.04
Browser	Chrome 104

View run in Cypress Dashboard ➡️

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

cypress bot commented Aug 11, 2022 •

edited

Loading

Test summary

7 • 0 • 0 • 0

Run details


Project	netlify-plugin-nextjs-static-demo
Status	Passed
Commit	`83b6058` ℹ️
Started	Aug 12, 2022 2:02 PM
Ended	Aug 12, 2022 2:03 PM
Duration	01:15 💡
OS	Linux Ubuntu - 20.04
Browser	Chrome 104

View run in Cypress Dashboard ➡️

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

ericapisani added 2 commits

August 11, 2022 10:27


          test: add test coverage

87dfb1a


          style: run lint

85e1d7f

ericapisani changed the title ~~feat: support custom response headers on images~~ feat: support custom response headers on images served via IPX

ericapisani added 2 commits

August 11, 2022 10:53


          docs: add info on custom response headers

5c6068d


          Merge branch 'main' into ep/support-custom-response-headers-on-images

c9d589b

ericapisani marked this pull request as ready for review

August 11, 2022 14:58

ericapisani requested a review from a team

August 11, 2022 14:58


          Merge branch 'main' into ep/support-custom-response-headers-on-images

0268a7f

nickytonline commented Aug 11, 2022

I'm looking at the request of e.g. https://deploy-preview-1515--netlify-plugin-nextjs-demo.netlify.app/_next/image/?url=https%3A%2F%2Fraw.githubusercontent.com%2Fnetlify%2Fnetlify-plugin-nextjs%2Fmain%2Fnext-on-netlify.png&w=640&q=75, but there is no x-test: foobar header.

General
Request URL: https://deploy-preview-1515--netlify-plugin-nextjs-demo.netlify.app/_next/image/?url=https%3A%2F%2Fraw.githubusercontent.com%2Fnetlify%2Fnetlify-plugin-nextjs%2Fmain%2Fnext-on-netlify.png&w=640&q=75
Request Method: GET
Status Code: 304 
Remote Address: 35.229.48.116:443
Referrer Policy: strict-origin-when-cross-origin

Response Headers
cache-control: public, max-age=0, must-revalidate
date: Thu, 11 Aug 2022 21:41:19 GMT
etag: "5e-dKUfCdzmICNqFxWPc06PHLoeigM"
server: Netlify
strict-transport-security: max-age=31536000; includeSubDomains; preload
vary: Accept-Encoding
x-nf-request-id: 01GA7DNJ67R10AR7AYFP7YHCFD

Request Headers
:authority: deploy-preview-1515--netlify-plugin-nextjs-demo.netlify.app
:method: GET
:path: /_next/image/?url=https%3A%2F%2Fraw.githubusercontent.com%2Fnetlify%2Fnetlify-plugin-nextjs%2Fmain%2Fnext-on-netlify.png&w=640&q=75
:scheme: https
accept: image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9
dnt: 1
if-none-match: "5e-dKUfCdzmICNqFxWPc06PHLoeigM"
referer: https://deploy-preview-1515--netlify-plugin-nextjs-demo.netlify.app/old/image/
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="104"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "macOS"
sec-fetch-dest: image
sec-fetch-mode: no-cors
sec-fetch-site: same-origin
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.81 Safari/537.36

Contributor

ascorbic commented Aug 12, 2022

@nickytonline That's a 304 Not Modified response though, so you wouldn't expect it to have all the same headers. Try the request without the cache and check the headers for a 200 response. It looks good to me:

MarcL reviewed

View reviewed changes

plugin/src/helpers/utils.ts Outdated Show resolved Hide resolved

MarcL previously approved these changes

View reviewed changes

Contributor

MarcL left a comment

Minor comment but looks good otherwise. Thanks! 🎉

nickytonline commented Aug 12, 2022

@nickytonline That's a 304 Not Modified response though, so you wouldn't expect it to have all the same headers. Try the request without the cache and check the headers for a 200 response. It looks good to me:

Argh. I switched to Arc browser the other day and forgot to change my dev tool settings to disable cache. Thanks @ascorbic!

nickytonline previously approved these changes

View reviewed changes

nickytonline left a comment •

edited

Loading

Looks good! 🚀

Contributor

ascorbic commented Aug 12, 2022

I think Kodiak should be able to resolve these conflicts if you set automerge.

ericapisani added 2 commits

August 12, 2022 08:37


          fix: address CR comments

d94449c


          Merge branch 'ep/support-custom-response-headers-on-images' of github…

d71c694

….com:netlify/netlify-plugin-nextjs into ep/support-custom-response-headers-on-images

ericapisani dismissed stale reviews from nickytonline and MarcL via

d71c694

August 12, 2022 12:38

ericapisani added the automerge label

kodiakhq bot removed the automerge label

Contributor

kodiakhq bot commented Aug 12, 2022

This PR currently has a merge conflict. Please resolve this and then re-add the automerge label.


          Merge branch 'main' into ep/support-custom-response-headers-on-images

5326f80

ericapisani requested review from ascorbic, MarcL and nickytonline

August 12, 2022 12:59

nickytonline previously approved these changes

View reviewed changes

nickytonline left a comment

🚢

ascorbic reviewed

View reviewed changes

test/helpers/utils.spec.ts Outdated Show resolved Hide resolved


          Update test/helpers/utils.spec.ts

9477a4f

Co-authored-by: Matt Kane <[email protected]>

ericapisani dismissed nickytonline’s stale review via

9477a4f

August 12, 2022 13:55


          Merge branch 'main' into ep/support-custom-response-headers-on-images

0812edf

ascorbic approved these changes

View reviewed changes

ericapisani added the automerge label

kodiakhq bot merged commit 40cb8a9 into main

kodiakhq bot deleted the ep/support-custom-response-headers-on-images branch

August 12, 2022 14:30

This was referenced Aug 12, 2022

chore(main): release plugin-nextjs 4.15.0 #1522

Merged

chore: release main #1523

Merged

chore: release main #1539

Merged

chore: release main #1549

Merged

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

automerge type: feature