feat: add support for experimental image remotePatterns

.github/workflows/cypress-canary.yml

@@ -0,0 +1,73 @@
+name: Run e2e (canary demo)
+on:
+  pull_request:
+    types: [opened, labeled, unlabeled, synchronize]
+  push:
+    branches:
+      - main
+    paths:
+      - 'demos/canary/**/*.{js,jsx,ts,tsx}'
+      - 'cypress/integration/canary/**/*.{ts,js}'
+      - 'src/**/*.{ts,js}'
+jobs:
+  cypress:
+    name: Cypress
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        containers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Generate Github token
+        uses: navikt/github-app-token-generator@v1
+        id: get-token
+        with:
+          private-key: ${{ secrets.TOKENS_PRIVATE_KEY }}
+          app-id: ${{ secrets.TOKENS_APP_ID }}
+
+      - name: Checkout @netlify/wait-for-deploy-action
+        uses: actions/checkout@v2
+        with:
+          repository: netlify/wait-for-deploy-action
+          token: ${{ steps.get-token.outputs.token }}
+          path: ./.github/actions/wait-for-netlify-deploy
+
+      - name: Wait for Netlify Deploy
+        id: deploy
+        uses: ./.github/actions/wait-for-netlify-deploy
+        with:
+          site-name: netlify-plugin-nextjs-demo
+          timeout: 300
+
+      - name: Deploy successful
+        if: ${{ steps.deploy.outputs.origin-url }}
+        run: echo ${{ steps.deploy.outputs.origin-url }}
+
+      - name: Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '16'
+
+      - run: npm install
+
+      - name: Cypress run
+        if: ${{ steps.deploy.outputs.origin-url }}
+        id: cypress
+        uses: cypress-io/github-action@v2
+        with:
+          browser: chrome
+          headless: true
+          record: true
+          parallel: true
+          config-file: cypress/config/ci.json
+          group: 'Next Plugin - Demo Canary'
+          spec: cypress/integration/canary/*
+        env:
+          DEBUG: '@cypress/github-action'
+          CYPRESS_baseUrl: ${{ steps.deploy.outputs.origin-url }}
+          CYPRESS_NETLIFY_CONTEXT: ${{ steps.deploy.outputs.context }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CYPRESS_RECORD_KEY: ${{ secrets.CANARY_CYPRESS_RECORD_KEY }}

cypress/config/canary.json

@@ -0,0 +1,5 @@
+{
+  "baseUrl": "http://localhost:3000",
+  "integrationFolder": "cypress/integration/canary",
+  "projectId": "66va58" // TODO: CHANGEME!
+}

cypress/integration/canary/images.spec.ts

@@ -0,0 +1,15 @@
+/**
+ * @see {@link https://nextjs.org/docs/api-reference/next/image#required-props}
+ */
+describe('next/images', () => {
+  it('should show image from /public', () => {
+    cy.visit('/')
+    cy.findByRole('img').should('be.visible').and(($img) => {
+      // "naturalWidth" and "naturalHeight" are set when the image loads
+      expect(
+        $img[0].naturalWidth,
+        'image has natural width'
+      ).to.be.greaterThan(0)
+    })
+  })
+})

demos/canary/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

demos/canary/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# netlify
+.netlify

demos/canary/README.md

@@ -0,0 +1,28 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

demos/canary/netlify.toml

@@ -0,0 +1,15 @@
+[build]
+command = "next build"
+publish = ".next"
+ignore = "git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF . ../../plugin"
+
+[build.environment]
+TERM = "xterm"
+NODE_VERSION = "17"
+
+[[plugins]]
+package = "../plugin-wrapper/"
+
+# This is a fake plugin, that makes it run npm install
+[[plugins]]
+package = "@netlify/plugin-local-install-core"

demos/canary/next.config.js

@@ -0,0 +1,21 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  eslint: {
+    // Warning: This allows production builds to successfully complete even if
+    // your project has ESLint errors.
+    ignoreDuringBuilds: true,
+  },
+  experimental: {
+    images: {
+      remotePatterns: [
+        {
+          protocol: 'https',
+          hostname: '*.githubusercontent.com',
+        },
+      ],
+    },
+  },
+}
+
+module.exports = nextConfig