Merge branch 'main' into mk/edge-image-logic

Author: ascorbic

.release-please-manifest.json

@@ -1,4 +1,4 @@
 {
-  "packages/runtime": "4.23.1",
-  "packages/next": "1.3.0"
+  "packages/runtime": "4.23.3",
+  "packages/next": "1.3.1"
 }

README.md

@@ -16,7 +16,7 @@ commands separately will not work, because the Next.js Runtime will not generate
 If you use [`next/image`](https://nextjs.org/docs/basic-features/image-optimization), your images will be automatically
 optimized at runtime, ensuring that they are served at the best size and format. The image will be processed on the
 first request which means it may take longer to load, but the generated image is then cached at the edge and served as a
-static file to future visitors. By default, Next will deliver WebP images if the browser supports it. WebP is a new
+static file to future visitors. By default, Next.js will deliver WebP images if the browser supports it. WebP is a new
 image format with wide browser support that will usually generate smaller files than png or jpg. You can additionally
 enable the AVIF format, which is often even smaller in filesize than WebP. The drawback is that with particularly large
 images AVIF may take too long to generate, meaning the function times-out. You can configure
@@ -48,6 +48,14 @@ Next.js Middleware works out of the box on Netlify. By default, middleware runs
 support for running Middleware at the origin, set the environment variable `NEXT_DISABLE_NETLIFY_EDGE` to `true`. Be
 aware that this will result in slower performance, as all pages that match middleware must use SSR.
 
+For more details on Next.js Middleware with Netlify, see the [middleware docs](https://github.com/netlify/next-runtime/blob/main/docs/middleware.md).
+
+### Limitations
+
+Due to how the site configuration is handled when it's run using Netlify Edge Functions, data such as `locale` and `defaultLocale` will be missing on the `req.nextUrl` object when running `netlify dev`. 
+
+However, this data is available on `req.nextUrl` in a production environment.
+
 ## Monorepos
 
 If you are using a monorepo you will need to change `publish` to point to the full path to the built `.next` directory,
@@ -60,6 +68,8 @@ If you are using Nx, then you will need to point `publish` to the folder inside
 The Next.js Runtime fully supports ISR on Netlify. For more details see
 [the ISR docs](https://github.com/netlify/next-runtime/blob/main/docs/isr.md).
 
+Note that Netlify has a minimum TTL of 60 seconds for revalidation.
+
 ## Use with `next export`
 
 If you are using `next export` to generate a static site, you do not need most of the functionality of this Next.js
@@ -111,7 +121,7 @@ If you previously set these values, they're no longer needed and should be remov
 - `external_node_modules` in `netlify.toml`
 - The environment variable `NEXT_USE_NETLIFY_EDGE` can be removed as this is now the default
 
-The `serverless` and `experimental-serverless-trace` targets are deprecated in Next 12, and all builds with this Next
+The `serverless` and `experimental-serverless-trace` targets are deprecated in Next.js 12, and all builds with this Next.js
 Runtime will now use the default `server` target. If you previously set the target in your `next.config.js`, you should
 remove it.
 

cypress/integration/default/dynamic-routes.spec.ts

@@ -1,127 +1,149 @@
+/* eslint-disable max-lines-per-function */
 describe('Static Routing', () => {
   it('renders correct page via SSR on a static route', () => {
-    cy.request('/getServerSideProps/static/').then((res) => {
+    cy.request({ url: '/getServerSideProps/static/', headers: { 'x-nf-debug-logging': '1' } }).then((res) => {
       expect(res.status).to.eq(200)
-      expect(res.headers).to.have.property('x-render-mode', 'ssr')
+      expect(res.headers).to.have.property('x-nf-render-mode', 'ssr')
       expect(res.body).to.contain('Sleepy Hollow')
     })
   })
   it('serves correct static file on a static route', () => {
-    cy.request('/getStaticProps/static/').then((res) => {
+    cy.request({ url: '/getStaticProps/static/', headers: { 'x-nf-debug-logging': '1' } }).then((res) => {
       expect(res.status).to.eq(200)
-      expect(res.headers).to.not.have.property('x-render-mode')
+      expect(res.headers).to.not.have.property('x-nf-render-mode')
       expect(res.body).to.contain('Dancing with the Stars')
     })
   })
   it('renders correct page via ODB on a static route', () => {
-    cy.request('/getStaticProps/with-revalidate/').then((res) => {
+    cy.request({ url: '/getStaticProps/with-revalidate/', headers: { 'x-nf-debug-logging': '1' } }).then((res) => {
       expect(res.status).to.eq(200)
-      expect(res.headers).to.have.property('x-render-mode', 'isr')
+      expect(res.headers).to.have.property('x-nf-render-mode', 'odb ttl=1')
       expect(res.body).to.contain('Dancing with the Stars')
     })
   })
 })
 
 describe('Dynamic Routing', () => {
   it('renders correct page via SSR on a dynamic route', () => {
-    cy.request('/getServerSideProps/1/').then((res) => {
+    cy.request({ url: '/getServerSideProps/1/', headers: { 'x-nf-debug-logging': '1' } }).then((res) => {
       expect(res.status).to.eq(200)
-      expect(res.headers).to.have.property('x-render-mode', 'ssr')
+      expect(res.headers).to.have.property('x-nf-render-mode', 'ssr')
       expect(res.body).to.contain('Under the Dome')
     })
   })
   it('renders correct page via SSR on a dynamic catch-all route', () => {
-    cy.request('/getServerSideProps/all/1/').then((res) => {
+    cy.request({ url: '/getServerSideProps/all/1/', headers: { 'x-nf-debug-logging': '1' } }).then((res) => {
       expect(res.status).to.eq(200)
-      expect(res.headers).to.have.property('x-render-mode', 'ssr')
+      expect(res.headers).to.have.property('x-nf-render-mode', 'ssr')
       expect(res.body).to.contain('Under the Dome')
     })
   })
   it('serves correct static file on a prerendered dynamic route with fallback: false', () => {
-    cy.request('/getStaticProps/1/').then((res) => {
+    cy.request({ url: '/getStaticProps/1/', headers: { 'x-nf-debug-logging': '1' } }).then((res) => {
       expect(res.status).to.eq(200)
-      expect(res.headers).to.not.have.property('x-render-mode')
+      expect(res.headers).to.not.have.property('x-nf-render-mode')
       expect(res.body).to.contain('Under the Dome')
     })
   })
   it('renders custom 404 on a non-prerendered dynamic route with fallback: false', () => {
-    cy.request({ url: '/getStaticProps/3/', failOnStatusCode: false }).then((res) => {
-      expect(res.status).to.eq(404)
-      expect(res.headers).to.have.property('x-render-mode', 'odb')
-      expect(res.body).to.contain('Custom 404')
-    })
+    cy.request({ url: '/getStaticProps/3/', headers: { 'x-nf-debug-logging': '1' }, failOnStatusCode: false }).then(
+      (res) => {
+        expect(res.status).to.eq(404)
+        expect(res.headers).to.have.property('x-nf-render-mode', 'odb')
+        expect(res.body).to.contain('Custom 404')
+      },
+    )
   })
   it('serves correct static file on a prerendered dynamic route with fallback: true', () => {
-    cy.request('/getStaticProps/withFallback/1/').then((res) => {
+    cy.request({ url: '/getStaticProps/withFallback/1/', headers: { 'x-nf-debug-logging': '1' } }).then((res) => {
       expect(res.status).to.eq(200)
-      expect(res.headers).to.not.have.property('x-render-mode')
+      expect(res.headers).to.not.have.property('x-nf-render-mode')
       expect(res.body).to.contain('Under the Dome')
     })
   })
   it('renders fallback page via ODB on a non-prerendered dynamic route with fallback: true', () => {
-    cy.request('/getStaticProps/withFallback/3/').then((res) => {
+    cy.request({ url: '/getStaticProps/withFallback/3/', headers: { 'x-nf-debug-logging': '1' } }).then((res) => {
       expect(res.status).to.eq(200)
       // expect 'odb' until https://github.com/netlify/pillar-runtime/issues/438 is fixed
-      expect(res.headers).to.have.property('x-render-mode', 'odb')
+      expect(res.headers).to.have.property('x-nf-render-mode', 'odb')
       // expect 'Bitten' until the above is fixed and we can test for fallback 'Loading...' message
       expect(res.body).to.contain('Bitten')
     })
   })
   it('serves correct static file on a prerendered dynamic route with fallback: blocking', () => {
-    cy.request('/getStaticProps/withFallbackBlocking/1/').then((res) => {
-      expect(res.status).to.eq(200)
-      expect(res.headers).to.not.have.property('x-render-mode')
-      expect(res.body).to.contain('Under the Dome')
-    })
+    cy.request({ url: '/getStaticProps/withFallbackBlocking/1/', headers: { 'x-nf-debug-logging': '1' } }).then(
+      (res) => {
+        expect(res.status).to.eq(200)
+        expect(res.headers).to.not.have.property('x-nf-render-mode')
+        expect(res.body).to.contain('Under the Dome')
+      },
+    )
   })
   it('renders correct page via ODB on a non-prerendered dynamic route with fallback: blocking', () => {
-    cy.request('/getStaticProps/withFallbackBlocking/3/').then((res) => {
-      expect(res.status).to.eq(200)
-      expect(res.headers).to.have.property('x-render-mode', 'odb')
-      expect(res.body).to.contain('Bitten')
-    })
+    cy.request({ url: '/getStaticProps/withFallbackBlocking/3/', headers: { 'x-nf-debug-logging': '1' } }).then(
+      (res) => {
+        expect(res.status).to.eq(200)
+        expect(res.headers).to.have.property('x-nf-render-mode', 'odb')
+        expect(res.body).to.contain('Bitten')
+      },
+    )
   })
   it('renders correct page via ODB on a prerendered dynamic route with revalidate and fallback: false', () => {
-    cy.request('/getStaticProps/withRevalidate/1/').then((res) => {
+    cy.request({ url: '/getStaticProps/withRevalidate/1/', headers: { 'x-nf-debug-logging': '1' } }).then((res) => {
       expect(res.status).to.eq(200)
-      expect(res.headers).to.have.property('x-render-mode', 'isr')
+      expect(res.headers).to.have.property('x-nf-render-mode', 'odb ttl=60')
       expect(res.body).to.contain('Under the Dome')
     })
   })
   it('renders custom 404 on a non-prerendered dynamic route with revalidate and fallback: false', () => {
-    cy.request({ url: '/getStaticProps/withRevalidate/3/', failOnStatusCode: false }).then((res) => {
+    cy.request({
+      url: '/getStaticProps/withRevalidate/3/',
+      headers: { 'x-nf-debug-logging': '1' },
+      failOnStatusCode: false,
+    }).then((res) => {
       expect(res.status).to.eq(404)
-      expect(res.headers).to.have.property('x-render-mode', 'odb')
+      expect(res.headers).to.have.property('x-nf-render-mode', 'odb')
       expect(res.body).to.contain('Custom 404')
     })
   })
   it('renders correct page via ODB on a prerendered dynamic route with revalidate and fallback: true', () => {
-    cy.request('/getStaticProps/withRevalidate/withFallback/1/').then((res) => {
-      expect(res.status).to.eq(200)
-      expect(res.headers).to.have.property('x-render-mode', 'isr')
-      expect(res.body).to.contain('Under the Dome')
-    })
+    cy.request({ url: '/getStaticProps/withRevalidate/withFallback/1/', headers: { 'x-nf-debug-logging': '1' } }).then(
+      (res) => {
+        expect(res.status).to.eq(200)
+        expect(res.headers).to.have.property('x-nf-render-mode', 'odb ttl=60')
+        expect(res.body).to.contain('Under the Dome')
+      },
+    )
   })
   it('renders fallback page via ODB on a non-prerendered dynamic route with revalidate and fallback: true', () => {
-    cy.request('/getStaticProps/withRevalidate/withFallback/3/').then((res) => {
-      expect(res.status).to.eq(200)
-      expect(res.headers).to.have.property('x-render-mode', 'isr')
-      // expect 'Bitten' until https://github.com/netlify/pillar-runtime/issues/438 is fixed
-      expect(res.body).to.contain('Bitten')
-    })
+    cy.request({ url: '/getStaticProps/withRevalidate/withFallback/3/', headers: { 'x-nf-debug-logging': '1' } }).then(
+      (res) => {
+        expect(res.status).to.eq(200)
+        expect(res.headers).to.have.property('x-nf-render-mode', 'odb ttl=60')
+        // expect 'Bitten' until https://github.com/netlify/pillar-runtime/issues/438 is fixed
+        expect(res.body).to.contain('Bitten')
+      },
+    )
   })
   it('renders correct page via ODB on a prerendered dynamic route with revalidate and fallback: blocking', () => {
-    cy.request('/getStaticProps/withRevalidate/withFallbackBlocking/1/').then((res) => {
+    cy.request({
+      url: '/getStaticProps/withRevalidate/withFallbackBlocking/1/',
+      headers: { 'x-nf-debug-logging': '1' },
+    }).then((res) => {
       expect(res.status).to.eq(200)
-      expect(res.headers).to.have.property('x-render-mode', 'isr')
+      expect(res.headers).to.have.property('x-nf-render-mode', 'odb ttl=60')
       expect(res.body).to.contain('Under the Dome')
     })
   })
   it('renders correct page via ODB on a non-prerendered dynamic route with revalidate and fallback: blocking', () => {
-    cy.request('/getStaticProps/withRevalidate/withFallbackBlocking/3/').then((res) => {
+    cy.request({
+      url: '/getStaticProps/withRevalidate/withFallbackBlocking/3/',
+      headers: { 'x-nf-debug-logging': '1' },
+    }).then((res) => {
       expect(res.status).to.eq(200)
-      expect(res.headers).to.have.property('x-render-mode', 'isr')
+      expect(res.headers).to.have.property('x-nf-render-mode', 'odb ttl=60')
       expect(res.body).to.contain('Bitten')
     })
   })
 })
+/* eslint-enable max-lines-per-function */

cypress/integration/nx/general.spec.ts

@@ -4,7 +4,7 @@ describe('Default site', () => {
   })
 
   it('loads home page', () => {
-    cy.findByRole('heading', { name: 'Welcome to nx-nextjs-monorepo!' })
+    cy.findByRole('heading', { name: 'Hello there, Welcome demo-monorepo 👋' })
 
     cy.visit('//')
     cy.url().should('eq', `${Cypress.config().baseUrl}/`)

demos/default/next.config.js

@@ -78,7 +78,7 @@ module.exports = {
     includePaths: [path.join(__dirname, 'styles-sass-test')],
   },
   experimental: {
-    optimizeCss: true,
+    optimizeCss: false,
     images: {
       remotePatterns: [
         {

demos/default/pages/getStaticProps/with-revalidate.js

@@ -25,6 +25,7 @@ export async function getStaticProps(context) {
     props: {
       show: data,
     },
+    // ODB handler will use the minimum TTL=60s
     revalidate: 1,
   }
 }

demos/nx-next-monorepo-demo/.gitignore

@@ -0,0 +1,42 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# dependencies
+node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
+
+# Next.js
+.next

demos/nx-next-monorepo-demo/.npmrc

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "nrwl.angular-console",
+    "esbenp.prettier-vscode",
+    "firsttris.vscode-jest-runner",
+    "dbaeumer.vscode-eslint"
+  ]
+}

demos/nx-next-monorepo-demo/.vscode/extensions.json

@@ -1,10 +1,10 @@
-# NxNextjsMonorepo
+# NxNextMonorepo
 
-This project was generated using [Nx](https://nx.dev). It is a demo site to test that Nx monorepos work properly with the Netlify Next Runtime.
+This project was generated using [Nx](https://nx.dev).
 
 <p style="text-align: center;"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png" width="450"></p>
 
-🔎 **Smart, Extensible Build Framework**
+🔎 **Smart, Fast and Extensible Build System**
 
 ## Adding capabilities to your workspace
 
@@ -44,7 +44,7 @@ Run `nx g @nrwl/react:lib my-lib` to generate a library.
 
 > You can also use any of the plugins above to generate libraries as well.
 
-Libraries are shareable across libraries and applications. They can be imported from `@nx-nextjs-monorepo/mylib`.
+Libraries are shareable across libraries and applications. They can be imported from `@nx-next-monorepo/mylib`.
 
 ## Development server
 
@@ -68,13 +68,13 @@ Run `nx affected:test` to execute the unit tests affected by a change.
 
 ## Running end-to-end tests
 
-Run `ng e2e my-app` to execute the end-to-end tests via [Cypress](https://www.cypress.io).
+Run `nx e2e my-app` to execute the end-to-end tests via [Cypress](https://www.cypress.io).
 
 Run `nx affected:e2e` to execute the end-to-end tests affected by a change.
 
 ## Understand your workspace
 
-Run `nx dep-graph` to see a diagram of the dependencies of your projects.
+Run `nx graph` to see a diagram of the dependencies of your projects.
 
 ## Further help
 

demos/nx-next-monorepo-demo/README.md

@@ -1,13 +1,14 @@
 {
-  "root": "apps/demo-monorepo-e2e",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "apps/demo-monorepo-e2e/src",
   "projectType": "application",
   "targets": {
     "e2e": {
       "executor": "@nrwl/cypress:cypress",
       "options": {
         "cypressConfig": "apps/demo-monorepo-e2e/cypress.json",
-        "devServerTarget": "demo-monorepo:serve"
+        "devServerTarget": "demo-monorepo:serve:development",
+        "testingType": "e2e"
       },
       "configurations": {
         "production": {

demos/nx-next-monorepo-demo/apps/demo-monorepo-e2e/project.json

@@ -8,6 +8,6 @@ describe('demo-monorepo', () => {
     cy.login('my-email@something.com', 'myPassword');
 
     // Function helper example, see `../support/app.po.ts` file
-    getGreeting().contains('Welcome to demo-monorepo!');
+    getGreeting().contains('Welcome demo-monorepo');
   });
 });