Skip to content

feat: add support for experimental image remotePatterns #1375

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 20 commits into from
Jun 14, 2022

Conversation

sarahetter
Copy link

@sarahetter sarahetter commented Jun 9, 2022

Summary

This adds support for Next's experimental remotePatterns with help from the changes I've made to our @netlify/ipx package. We are now writing the remotePatterns to file (imageconfig.js) which is then read by the ipx.ts file used by the ipx function.

I've added a demo site to be used for features that should all work with the latest Next.js canary release (12.1.7-canary.29 is what I'm using at the moment). I didn't change the default demo to the latest canary, as there are some breaking changes re: middleware that we want to wait on before investigating further.

Test plan

  1. Visit the Deploy Preview next-plugin-canary
  2. If the "Netlify + Next.js" image loads, it works!

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

Closes #1375
Screen Shot 2022-06-09 at 1 38 11 PM

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.

@sarahetter sarahetter requested a review from a team June 9, 2022 17:38
@sarahetter sarahetter self-assigned this Jun 9, 2022
@netlify
Copy link

netlify bot commented Jun 9, 2022

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

Name Link
🔨 Latest commit 6c3d039
🔍 Latest deploy log https://app.netlify.com/sites/netlify-plugin-nextjs-static-root-demo/deploys/62a87e844525d800086010d6
😎 Deploy Preview https://deploy-preview-1375--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.

@netlify
Copy link

netlify bot commented Jun 9, 2022

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

Name Link
🔨 Latest commit 6c3d039
🔍 Latest deploy log https://app.netlify.com/sites/netlify-plugin-nextjs-demo/deploys/62a87e84b5855400087fca59
😎 Deploy Preview https://deploy-preview-1375--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.

@github-actions github-actions bot added the type: feature code contributing to the implementation of a feature and/or user facing functionality label Jun 9, 2022
@netlify
Copy link

netlify bot commented Jun 9, 2022

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

Name Link
🔨 Latest commit 6c3d039
🔍 Latest deploy log https://app.netlify.com/sites/next-plugin-rsc-demo/deploys/62a87e8450faae000940989c
😎 Deploy Preview https://deploy-preview-1375--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 9, 2022

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

Name Link
🔨 Latest commit 6c3d039
🔍 Latest deploy log https://app.netlify.com/sites/netlify-plugin-nextjs-export-demo/deploys/62a87e84bb92f80008dc2978
😎 Deploy Preview https://deploy-preview-1375--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 9, 2022

Deploy Preview for next-plugin-canary canceled.

Name Link
🔨 Latest commit b4410f8
🔍 Latest deploy log https://app.netlify.com/sites/next-plugin-canary/deploys/62a73ab52d680c0009bae1a1

@netlify
Copy link

netlify bot commented Jun 9, 2022

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

Name Link
🔨 Latest commit 6c3d039
🔍 Latest deploy log https://app.netlify.com/sites/netlify-plugin-nextjs-next-auth-demo/deploys/62a87e842a768400087efb29
😎 Deploy Preview https://deploy-preview-1375--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 9, 2022

Deploy Preview for next-i18next-demo ready!

Name Link
🔨 Latest commit 6c3d039
🔍 Latest deploy log https://app.netlify.com/sites/next-i18next-demo/deploys/62a87e84b5855400087fca5e
😎 Deploy Preview https://deploy-preview-1375--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.

@netlify
Copy link

netlify bot commented Jun 9, 2022

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

Name Link
🔨 Latest commit 6c3d039
🔍 Latest deploy log https://app.netlify.com/sites/netlify-plugin-nextjs-nx-monorepo-demo/deploys/62a87e841b8be20008ecfdb4
😎 Deploy Preview https://deploy-preview-1375--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 9, 2022

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

Name Link
🔨 Latest commit 6c3d039
🔍 Latest deploy log https://app.netlify.com/sites/next-plugin-edge-middleware/deploys/62a87e844525d800086010db
😎 Deploy Preview https://deploy-preview-1375--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.

@cypress
Copy link

cypress bot commented Jun 9, 2022



Test summary

7 0 0 0


Run details

Project netlify-plugin-nextjs-static-demo
Status Passed
Commit d7acca8 ℹ️
Started Jun 14, 2022 12:29 PM
Ended Jun 14, 2022 12:31 PM
Duration 01:13 💡
OS Linux Ubuntu - 20.04
Browser Chrome 102

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 9, 2022



Test summary

21 0 0 0


Run details

Project netlify-plugin-nextjs-default-demo
Status Passed
Commit d7acca8 ℹ️
Started Jun 14, 2022 12:30 PM
Ended Jun 14, 2022 12:31 PM
Duration 01:25 💡
OS Linux Ubuntu - 20.04
Browser Chrome 102

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 9, 2022



Test summary

2 0 0 0


Run details

Project netlify-plugin-nextjs-nx-monorepo-demo
Status Passed
Commit d7acca8 ℹ️
Started Jun 14, 2022 12:30 PM
Ended Jun 14, 2022 12:31 PM
Duration 01:09 💡
OS Linux Ubuntu - 20.04
Browser Chrome 102

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


export const handler: Handler = createIPXHandler({
basePath,
domains,
remotePatterns,
}) as Handler

Choose a reason for hiding this comment

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

Not related to your PR, but createIPXHandler should be returning the type Handler so there is no need to cast it as Handler. I'll make a note to make a small PR for that when I have a bit of down time.

Copy link

@ericapisani ericapisani left a comment

Choose a reason for hiding this comment

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

Other than the comment that Nick has already left re: the Cypress test, this is looking good to me

@sarahetter
Copy link
Author

sarahetter commented Jun 10, 2022

The last commit re: cypress tests isn't complete, it's pending access to our Cypress dashboard (requested in slack) to create a project for the canary site, to add the projectId to cypress/config/canary.json and will also need to add the CYPRESS_RECORD_KEY (CANARY_CYPRESS_RECORD_KEY) secret to this repo.

@netlify
Copy link

netlify bot commented Jun 14, 2022

Deploy Preview for next-plugin-canary ready!

Name Link
🔨 Latest commit 6c3d039
🔍 Latest deploy log https://app.netlify.com/sites/next-plugin-canary/deploys/62a87e84bb92f80008dc297d
😎 Deploy Preview https://deploy-preview-1375--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.

@sarahetter sarahetter force-pushed the image-remotepatterns branch from f6601a4 to c658715 Compare June 14, 2022 12:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
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.

3 participants