Skip to content

feat: use edge functions for content negotiation by default #1438

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.

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

Merged
merged 2 commits into from
Jun 30, 2022

Conversation

ascorbic
Copy link
Contributor

@ascorbic ascorbic commented Jun 30, 2022

Summary

This PR enables content negotiation for images using edge functions to be opt-out, rather than opt-in. The PR ensures that the old redirect is also written, but it will not match if the edge function runs.

This PR also ensures that the edge function respects the Next image formats config option, which means that by default webp is the only modern format offered, but that AVIF is an option.

The PR adds some docs on the behaviour, as well as some general information about image handling. I rearranged some of the docs to adjust priorities.

@KyleBlankRollins This adds a new env var: NEXT_DISABLE_EDGE_IMAGES, which disables the edge fucntion used for content negotiation and instead always serves the fallback format (jpg or png)

Test plan

  1. Load the default demo deploy preview and check that the image page serves a webp image
  2. Load the canary demo and check that an avif image is served

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

Fixes #1374. Fixes #1437
capybara among flowers

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.

@ascorbic ascorbic requested a review from a team June 30, 2022 11:30
@netlify
Copy link

netlify bot commented Jun 30, 2022

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

Name Link
🔨 Latest commit 0e1f88f
🔍 Latest deploy log https://app.netlify.com/sites/netlify-plugin-nextjs-export-demo/deploys/62bda171a60d700008e238eb
😎 Deploy Preview https://deploy-preview-1438--netlify-plugin-nextjs-export-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

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
Copy link

netlify bot commented Jun 30, 2022

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

Name Link
🔨 Latest commit 0e1f88f
🔍 Latest deploy log https://app.netlify.com/sites/netlify-plugin-nextjs-demo/deploys/62bda1714ac36c0009d28daf
😎 Deploy Preview https://deploy-preview-1438--netlify-plugin-nextjs-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

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
Copy link

netlify bot commented Jun 30, 2022

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

Name Link
🔨 Latest commit 0e1f88f
🔍 Latest deploy log https://app.netlify.com/sites/netlify-plugin-nextjs-nx-monorepo-demo/deploys/62bda172fe785d00080f7ba0
😎 Deploy Preview https://deploy-preview-1438--netlify-plugin-nextjs-nx-monorepo-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

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
Copy link

netlify bot commented Jun 30, 2022

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

Name Link
🔨 Latest commit 0e1f88f
🔍 Latest deploy log https://app.netlify.com/sites/netlify-plugin-nextjs-static-root-demo/deploys/62bda1719182e50008342782
😎 Deploy Preview https://deploy-preview-1438--netlify-plugin-nextjs-static-root-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

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 github-actions bot added the type: feature code contributing to the implementation of a feature and/or user facing functionality label Jun 30, 2022
@netlify
Copy link

netlify bot commented Jun 30, 2022

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

Name Link
🔨 Latest commit 0e1f88f
🔍 Latest deploy log https://app.netlify.com/sites/netlify-plugin-nextjs-next-auth-demo/deploys/62bda172ad3a0f00095d43ef
😎 Deploy Preview https://deploy-preview-1438--netlify-plugin-nextjs-next-auth-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

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
Copy link

netlify bot commented Jun 30, 2022

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

Name Link
🔨 Latest commit 0e1f88f
🔍 Latest deploy log https://app.netlify.com/sites/next-plugin-edge-middleware/deploys/62bda172983c6d0008b112a7
😎 Deploy Preview https://deploy-preview-1438--next-plugin-edge-middleware.netlify.app
📱 Preview on mobile
Toggle QR Code...

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
Copy link

netlify bot commented Jun 30, 2022

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

Name Link
🔨 Latest commit 0e1f88f
🔍 Latest deploy log https://app.netlify.com/sites/next-plugin-rsc-demo/deploys/62bda17260075f0007108547
😎 Deploy Preview https://deploy-preview-1438--next-plugin-rsc-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

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
Copy link

netlify bot commented Jun 30, 2022

Deploy Preview for next-plugin-canary ready!

Name Link
🔨 Latest commit 0e1f88f
🔍 Latest deploy log https://app.netlify.com/sites/next-plugin-canary/deploys/62bda17268a3860008a3fe3c
😎 Deploy Preview https://deploy-preview-1438--next-plugin-canary.netlify.app/
📱 Preview on mobile
Toggle QR Code...

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
Copy link

netlify bot commented Jun 30, 2022

Deploy Preview for next-i18next-demo ready!

Name Link
🔨 Latest commit 0e1f88f
🔍 Latest deploy log https://app.netlify.com/sites/next-i18next-demo/deploys/62bda172a6870b00085784e5
😎 Deploy Preview https://deploy-preview-1438--next-i18next-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

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
Copy link

cypress bot commented Jun 30, 2022



Test summary

7 0 0 0


Run details

Project netlify-plugin-nextjs-static-demo
Status Passed
Commit 2108b03 ℹ️
Started Jun 30, 2022 1:17 PM
Ended Jun 30, 2022 1:18 PM
Duration 01:23 💡
OS Linux Ubuntu - 20.04
Browser Chrome 103

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
Copy link

cypress bot commented Jun 30, 2022



Test summary

20 0 0 0


Run details

Project netlify-plugin-nextjs-default-demo
Status Passed
Commit 2108b03 ℹ️
Started Jun 30, 2022 1:16 PM
Ended Jun 30, 2022 1:18 PM
Duration 01:27 💡
OS Linux Ubuntu - 20.04
Browser Chrome 103

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
Copy link

cypress bot commented Jun 30, 2022



Test summary

2 0 0 0


Run details

Project netlify-plugin-nextjs-nx-monorepo-demo
Status Passed
Commit 2108b03 ℹ️
Started Jun 30, 2022 1:17 PM
Ended Jun 30, 2022 1:18 PM
Duration 01:09 💡
OS Linux Ubuntu - 20.04
Browser Chrome 103

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

@ascorbic ascorbic force-pushed the mk/edge-ipx-for-all branch 4 times, most recently from dc0b64c to 49a03ac Compare June 30, 2022 12:04
@ascorbic ascorbic force-pushed the mk/edge-ipx-for-all branch from 49a03ac to dab9985 Compare June 30, 2022 12:09
Copy link

@sarahetter sarahetter left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. On first load, the Canary demo showed a broken image, but on refresh it did load. Not sure if this is related to this PR, or just a fluke.

@ascorbic
Copy link
Contributor Author

Was probably AVIF timing-out. Let's see how it gets on in the wild. We may need to disable it, if it fails too much.

@kodiakhq kodiakhq bot merged commit 0bac0e0 into main Jun 30, 2022
@kodiakhq kodiakhq bot deleted the mk/edge-ipx-for-all branch June 30, 2022 14:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
automerge type: feature code contributing to the implementation of a feature and/or user facing functionality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Enable image content negotiation by default Support nextConfig.images.formats
2 participants