Merge branch 'canary' into use-search-params-bailout

.github/workflows/build_test_deploy.yml

@@ -84,11 +84,10 @@ jobs:
       - run: pnpm install
       - run: pnpm run build
       - run: node run-tests.js --timings --write-timings -g 1/1
-      - run: node ./scripts/fetch-tags.mjs ${{ github.sha }}
 
       - id: check-release
         run: |
-          if [[ $(git describe --exact-match 2> /dev/null || :) = v* ]];
+          if [[ $(node ./scripts/check-is-release.js 2> /dev/null || :) = v* ]];
             then
               echo "::set-output name=IS_RELEASE::true"
             else
@@ -893,7 +892,7 @@ jobs:
 
       - run: npm i -g pnpm@${PNPM_VERSION}
       - run: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> ~/.npmrc
-      - run: ./scripts/publish-native.js $GITHUB_REF
+      - run: ./scripts/publish-native.js
       - run: ./scripts/publish-release.js
 
   testDeployE2E:

docs/api-reference/next.config.js/url-imports.md

@@ -14,15 +14,15 @@ To opt-in, add the allowed URL prefixes inside `next.config.js`:
 ```js
 module.exports = {
   experimental: {
-    urlImports: ['https://example.com/modules/'],
+    urlImports: ['https://example.com/assets/', 'https://cdn.skypack.dev'],
   },
 }
 ```
 
 Then, you can import modules directly from URLs:
 
 ```js
-import { a, b, c } from 'https://example.com/modules/some/module.js'
+import { a, b, c } from 'https://example.com/assets/some/module.js'
 ```
 
 URL Imports can be used everywhere normal package imports can be used.
@@ -33,8 +33,8 @@ This feature is being designed with **security as the top priority**. To start,
 
 ## Lockfile
 
-When using URL imports, Next.js will create a lockfile in the `next.lock` directory.
-This directory is intended to be committed to Git and should **not be included** in your `.gitignore` file.
+When using URL imports, Next.js will create a `next.lock` directory containing a lockfile and fetched assets.
+This directory **must be committed to Git**, not ignored by `.gitignore`.
 
 - When running `next dev`, Next.js will download and add all newly discovered URL Imports to your lockfile
 - When running `next build`, Next.js will use only the lockfile to build the application for production
@@ -63,7 +63,7 @@ export default () => {
 
 ```js
 import Image from 'next/image'
-import logo from 'https://github.com/vercel/next.js/raw/canary/test/integration/production/public/vercel.png'
+import logo from 'https://example.com/assets/logo.png'
 
 export default () => (
   <div>
@@ -76,19 +76,16 @@ export default () => (
 
 ```css
 .className {
-  background: url('https://github.com/vercel/next.js/raw/canary/test/integration/production/public/vercel.png');
+  background: url('https://example.com/assets/hero.jpg');
 }
 ```
 
 ### Asset Imports
 
 ```js
-import Image from 'next/image'
+const logo = new URL('https://example.com/assets/file.txt', import.meta.url)
 
-const logo = new URL(
-  'https://github.com/vercel/next.js/raw/canary/test/integration/production/public/vercel.png',
-  import.meta.url
-)
+console.log(logo.pathname)
 
-export default () => <div>{logo.pathname}</div>
+// prints "/_next/static/media/file.a9727b5d.txt"
 ```

examples/with-cloudinary/.env.local.example

@@ -0,0 +1,4 @@
+NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=
+CLOUDINARY_API_KEY=
+CLOUDINARY_API_SECRET=
+CLOUDINARY_FOLDER=

examples/with-cloudinary/.gitignore

@@ -0,0 +1,36 @@
+# 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
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/with-cloudinary/README.md

@@ -0,0 +1,31 @@
+# Next.js & Cloudinary example app
+
+This example shows how to create an image gallery site using Next.js, [Cloudinary](https://cloudinary.com), and [Tailwind](https://tailwindcss.com).
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or view the demo [here](https://nextconf-images.vercel.app/)
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-cloudinary&project-name=nextjs-image-gallery&repository-name=with-cloudinary&env=NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,CLOUDINARY_API_KEY,CLOUDINARY_API_SECRET,CLOUDINARY_FOLDER&envDescription=API%20Keys%20from%20Cloudinary%20needed%20to%20run%20this%20application.)
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example::
+
+```bash
+ npx create-next-app --example with-cloudinary nextjs-image-gallery
+```
+
+```bash
+yarn create next-app --example with-cloudinary nextjs-image-gallery
+```
+
+```bash
+pnpm create next-app --example with-cloudinary nextjs-image-gallery
+```
+
+## References
+
+- Cloudinary API: https://cloudinary.com/documentation/transformation_reference

examples/with-cloudinary/components/Carousel.tsx

@@ -0,0 +1,54 @@
+import Image from 'next/image'
+import { useRouter } from 'next/router'
+import useKeypress from 'react-use-keypress'
+import type { ImageProps } from '../utils/types'
+import { useLastViewedPhoto } from '../utils/useLastViewedPhoto'
+import SharedModal from './SharedModal'
+
+export default function Carousel({
+  index,
+  currentPhoto,
+}: {
+  index: number
+  currentPhoto: ImageProps
+}) {
+  const router = useRouter()
+  const [, setLastViewedPhoto] = useLastViewedPhoto()
+
+  function closeModal() {
+    setLastViewedPhoto(currentPhoto.id)
+    router.push('/', undefined, { shallow: true })
+  }
+
+  function changePhotoId(newVal: number) {
+    return newVal
+  }
+
+  useKeypress('Escape', () => {
+    closeModal()
+  })
+
+  return (
+    <div className="fixed inset-0 flex items-center justify-center">
+      <button
+        className="absolute inset-0 z-30 cursor-default bg-black backdrop-blur-2xl"
+        onClick={closeModal}
+      >
+        <Image
+          src={currentPhoto.blurDataUrl}
+          className="pointer-events-none h-full w-full"
+          alt="blurred background"
+          fill
+          priority={true}
+        />
+      </button>
+      <SharedModal
+        index={index}
+        changePhotoId={changePhotoId}
+        currentPhoto={currentPhoto}
+        closeModal={closeModal}
+        navigation={false}
+      />
+    </div>
+  )
+}

examples/with-cloudinary/components/Icons/Bridge.tsx

@@ -0,0 +1,126 @@
+export default function Bridge() {
+  return (
+    <svg
+      aria-labelledby="conf-city-title"
+      fill="none"
+      role="img"
+      viewBox="0 0 620 704"
+      width="620"
+      height="704"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title id="conf-city-title">
+        Line drawing of the Golden Gate Bridge in San Francisco.
+      </title>
+      <path d="M372.5 299.5L616.5 335" stroke="currentColor" />
+      <path
+        d="M370 16.5C429.833 101.833 562.9 284 616.5 330"
+        stroke="currentColor"
+      />
+      <path
+        d="M329.5 34.5L325 36L322 38C321.333 38.5 320 39.6 320 40C320 40.4 319.333 41.1667 319 41.5L318.5 45.5V72L322.5 73M329.5 34.5C336.667 34 351.1 33 351.5 33C351.9 33 354 33.3333 355 33.5L356.5 34.5L358 36L358.5 38L358 70L357.5 70.5L354 72L350.5 73.5H330L322.5 73M329.5 34.5L324.5 38L323.5 40.5L322.5 43.5V73"
+        stroke="currentColor"
+      />
+      <path d="M321 315V397H356.5" stroke="currentColor" />
+      <path
+        d="M332 234L329 240L328 241V245H327V251H326.5V261.5L325.5 262V289.5"
+        stroke="currentColor"
+      />
+      <path
+        d="M-0.5 158.5L27 171.5L43.5 190L48.5 202L85 218.5L95.5 246.5C98.1667 254.333 103.7 270.6 104.5 273C105.5 276 117 291 119 294.5C121 298 125.5 307 127 310C128.5 313 142 324.5 145 328C147.4 330.8 154.333 338.833 157.5 342.5L164 358C167.5 362 174.9 370.5 176.5 372.5C178.5 375 191 386.5 193.5 390C196 393.5 200.5 403 202 405.5C203.2 407.5 205.5 415 206.5 418.5C207.833 422.833 210.7 432 211.5 434C212.3 436 216.833 451.5 219 459C221.333 464.5 226 476.6 226 481C226 486.5 223.5 497.5 223.5 500C223.5 502.5 222 503 230.5 512.5C239 522 245.5 529.5 247 532C248.2 534 255.5 546.5 259 552.5"
+        stroke="currentColor"
+      />
+      <path
+        d="M164 357.5L206 353L237.5 345.5C242.667 345.5 254.5 345.5 260.5 345.5C268 345.5 277.5 342 279.5 341C281.1 340.2 289.5 337 293.5 335.5H305H309.5"
+        stroke="currentColor"
+      />
+      <path
+        d="M309.5 314V399.5L306 402V411.5L303 414.5V433H262.5V440.5H420.5V433H381.5L380 416.5H375.5V402L373 400.5L372 184.5L370 15H371V11L369.5 10.5L366 6V3L364.5 1L363.5 2.5L363 6C308.667 47.5 163.6 137.8 18 167"
+        stroke="currentColor"
+      />
+      <path
+        d="M352.5 14C347.333 14.6667 334.3 15.8 323.5 15C321.9 12.6 320.5 11 320 10.5V6L318.5 4.5L316.5 6V10C276.667 42 158 116.7 2 159.5"
+        stroke="currentColor"
+      />
+      <path
+        d="M313 14V69.5L311.5 71.5V131.5L310 133V207L309 208.5V287"
+        stroke="currentColor"
+      />
+      <path
+        d="M321 288.5V261.5H323V250.5H324.5V244H325.5V241L329.5 234.5L334.5 233.5H351L352 237.5L353.5 238.5L354 243L355 244.5V249L355.5 250.5L356 259.5V292.5L355.5 328.5L356.5 330.5V334V397.5"
+        stroke="currentColor"
+      />
+      <path d="M214 440.5H262.5M420.5 440.5H622" stroke="currentColor" />
+      <path d="M404 475L427.059 474L453 475" stroke="currentColor" />
+      <path d="M585 454L594.882 453L606 454" stroke="currentColor" />
+      <path d="M543 450L552.882 449L564 450" stroke="currentColor" />
+      <path d="M339 511.5L379.5 508L424 511.5" stroke="currentColor" />
+      <path d="M339 577L393.318 573L453 577" stroke="currentColor" />
+      <path d="M453 703L547.818 695L652 703" stroke="currentColor" />
+      <path d="M460 536L505.741 533L556 536" stroke="currentColor" />
+      <path d="M508 467L531.347 465L557 467" stroke="currentColor" />
+      <path d="M315 455L338.347 453L364 455" stroke="currentColor" />
+      <path d="M449 453L464.247 451L481 453" stroke="currentColor" />
+      <path d="M252 487L275.347 484L301 487" stroke="currentColor" />
+      <path
+        d="M277.5 552.5L209.5 550L109.5 571L46 584.5L9.5 604H-22"
+        stroke="currentColor"
+      />
+      <path
+        d="M355.5 318.5L117.5 293M113 286.5L355.5 313.5M373 315L616.5 346.5M373 321L567.5 346.5"
+        stroke="currentColor"
+      />
+      <path d="M100.5 262L356 293M372.5 295L616 331.5" stroke="currentColor" />
+      <path
+        d="M372.5 330L388 328.5L401.5 329.5L411 328.5C413.167 328.5 417.6 328.5 418 328.5C418.4 328.5 423.833 328.167 426.5 328"
+        stroke="currentColor"
+      />
+      <path
+        d="M513 440.5V433H568M568 433V346.5H616.5V320H622M568 433H622M591 433V364.5H595.5M604.5 433V364.5H595.5M595.5 364.5V433"
+        stroke="currentColor"
+      />
+      <path
+        d="M323 165.5V208L328 209C334.5 209.167 347.6 209.4 348 209C348.4 208.6 350.833 208.5 352 208.5L356.5 204.5V199.5L356 198.5V195.5L357 195V170L355.5 168.5V164.5L355 163V160.5L351.5 156.5H331.5L329 159L326.5 159.5L325.5 161.5L324 162.5V165L323 165.5Z"
+        stroke="currentColor"
+      />
+      <path
+        d="M329 159L327.5 162.5V166L326 166.5V171.5L325.5 172.5L326 208.5"
+        stroke="currentColor"
+      />
+      <path
+        d="M333.5 92.5L326 93.5L324 95L322.5 96V98V100.5H321V103L319.5 104.5V132L324 134M333.5 92.5H354.5L357 95V97.5L357.5 99V129L356.5 130L356 132L353 133L349.5 134H324M333.5 92.5L327 94.5L326 97L325.5 101.5L324.5 102.5V105.5L324 107V134"
+        stroke="currentColor"
+      />
+      <path d="M371 87C472.6 225.4 545 303 568.5 324.5" stroke="currentColor" />
+      <path d="M334.5 34C339 41.1667 350 58.2 358 69" stroke="currentColor" />
+      <path
+        d="M326 315.5L334.5 324V329.5L321.5 346M335.5 316.5L340 322L344 317.5M351.5 318L346 324V329.5L356.5 342M340 332.5L328 347.5H352.5L340 332.5Z"
+        stroke="currentColor"
+      />
+      <path
+        d="M321 390L334.5 377L334.5 371.5L321 354.5M322 397L340 379L354.5 397M356.5 390L346 377L346 371.5L356.5 359.5M340 368.5L328 353.5L352.5 353.5L340 368.5Z"
+        stroke="currentColor"
+      />
+      <path d="M325.5 315.5V341" stroke="currentColor" />
+      <path d="M325.5 360V385.5" stroke="currentColor" />
+      <path d="M355.5 310.5L123 283.5V270L356 297.5" stroke="currentColor" />
+      <path d="M372.5 311.5L616.5 344" stroke="currentColor" />
+      <path d="M86.5 149V222" stroke="currentColor" />
+      <path d="M122 137V265" stroke="currentColor" />
+      <path d="M155 124V268" stroke="currentColor" />
+      <path d="M188 109L188 273" stroke="currentColor" />
+      <path d="M220 93L220 276.5" stroke="currentColor" />
+      <path d="M251 77L251 280" stroke="currentColor" />
+      <path d="M281 60L281 284" stroke="currentColor" />
+      <path d="M391 46L391 298" stroke="currentColor" />
+      <path d="M417 82L417 302" stroke="currentColor" />
+      <path d="M441 115L441 305" stroke="currentColor" />
+      <path d="M465 147L465 309" stroke="currentColor" />
+      <path d="M488 178L488 312" stroke="currentColor" />
+      <path d="M511 208L511 316" stroke="currentColor" />
+      <path d="M532 235L532 319" stroke="currentColor" />
+      <path d="M553 261L553 322" stroke="currentColor" />
+      <path d="M571 282L571 325" stroke="currentColor" />
+    </svg>
+  )
+}