[pull] canary from vercel:canary

docs/01-app/03-api-reference/05-config/01-next-config-js/devIndicators.mdx

@@ -5,16 +5,29 @@ description: Configuration options for the on-screen indicator that gives contex
 
 `devIndicators` allows you to configure the on-screen indicator that gives context about the current route you're viewing during development.
 
-```ts filename="Types"
-  devIndicators: false | {
-    position?: 'bottom-right'
-    | 'bottom-left'
-    | 'top-right'
-    | 'top-left', // defaults to 'bottom-left',
+Open `next.config.ts` and set `position` to choose where the indicator renders. The default is `bottom-left`.
+
+```ts filename="next.config.ts"
+import type { NextConfig } from 'next'
+
+const nextConfig: NextConfig = {
+  devIndicators: {
+    position: 'bottom-right', // 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'
   },
+}
+
+export default nextConfig
 ```
 
-Setting `devIndicators` to `false` will hide the indicator, however Next.js will continue to surface any build or runtime errors that were encountered.
+To hide the indicator entirely, set `devIndicators` to `false`. Next.js will still surface any compile or runtime errors that were encountered.
+
+```ts filename="next.config.ts"
+const nextConfig: NextConfig = {
+  devIndicators: false,
+}
+
+export default nextConfig
+```
 
 ## Troubleshooting
 

examples/with-vercel-blob/.env.local.example

@@ -0,0 +1 @@
+BLOB_READ_WRITE_TOKEN=

examples/with-vercel-blob/README.md

@@ -0,0 +1,41 @@
+# Next.js & Vercel Blob example app
+
+This example shows how to create an image gallery site using Next.js, [Vercel Blob](https://vercel.com/storage/blob), and [Tailwind](https://tailwindcss.com).
+
+Images are discovered at build time via the `@vercel/blob` SDK's `list()` API, then probed with [sharp](https://github.com/lovell/sharp) to derive dimensions and pre-generate base64 blur placeholders for `next/image`. The blob `url` is served as-is — `next/image` (Vercel's image optimizer) takes care of responsive avif/webp variants.
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-vercel-blob&project-name=nextjs-image-gallery&repository-name=with-vercel-blob&env=BLOB_READ_WRITE_TOKEN&envDescription=Read%2Fwrite%20token%20for%20your%20Vercel%20Blob%20store)
+
+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-vercel-blob with-vercel-blob-app
+```
+
+```bash
+yarn create next-app --example with-vercel-blob with-vercel-blob-app
+```
+
+```bash
+pnpm create next-app --example with-vercel-blob with-vercel-blob-app
+```
+
+## Setup
+
+1. [Create a Vercel Blob store](https://vercel.com/docs/storage/vercel-blob) and upload your images to its root.
+2. Copy `.env.local.example` to `.env.local` and set `BLOB_READ_WRITE_TOKEN` to the store's read/write token. (When deploying via the button above, set it as an environment variable on the project.)
+3. `npm install && npm run dev`.
+
+## References
+
+- Vercel Blob: https://vercel.com/docs/storage/vercel-blob
+- `@vercel/blob` SDK: https://vercel.com/docs/storage/vercel-blob/using-blob-sdk
+- `next/image`: https://nextjs.org/docs/api-reference/next/image

examples/with-cloudinary/components/SharedModal.tsx → examples/with-vercel-blob/components/SharedModal.tsx

@@ -72,11 +72,7 @@ export default function SharedModal({
                 className="absolute"
               >
                 <Image
-                  src={`https://res.cloudinary.com/${
-                    process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME
-                  }/image/upload/c_scale,${navigation ? "w_1280" : "w_1920"}/${
-                    currentImage.public_id
-                  }.${currentImage.format}`}
+                  src={currentImage.url}
                   width={navigation ? 1280 : 1920}
                   height={navigation ? 853 : 1280}
                   priority
@@ -118,7 +114,7 @@ export default function SharedModal({
               <div className="absolute top-0 right-0 flex items-center gap-2 p-3 text-white">
                 {navigation ? (
                   <a
-                    href={`https://res.cloudinary.com/${process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME}/image/upload/${currentImage.public_id}.${currentImage.format}`}
+                    href={currentImage.url}
                     className="rounded-full bg-black/50 p-2 text-white/75 backdrop-blur-lg transition hover:bg-black/75 hover:text-white"
                     target="_blank"
                     title="Open fullsize version"
@@ -139,10 +135,7 @@ export default function SharedModal({
                 )}
                 <button
                   onClick={() =>
-                    downloadPhoto(
-                      `https://res.cloudinary.com/${process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME}/image/upload/${currentImage.public_id}.${currentImage.format}`,
-                      `${index}.jpg`,
-                    )
+                    downloadPhoto(currentImage.url, `${index}.jpg`)
                   }
                   className="rounded-full bg-black/50 p-2 text-white/75 backdrop-blur-lg transition hover:bg-black/75 hover:text-white"
                   title="Download fullsize version"
@@ -172,7 +165,7 @@ export default function SharedModal({
                 className="mx-auto mt-6 mb-6 flex aspect-[3/2] h-14"
               >
                 <AnimatePresence initial={false}>
-                  {filteredImages.map(({ public_id, format, id }) => (
+                  {filteredImages.map(({ url, id }) => (
                     <motion.button
                       initial={{
                         width: "0%",
@@ -203,7 +196,7 @@ export default function SharedModal({
                             ? "brightness-110 hover:brightness-110"
                             : "brightness-50 contrast-125 hover:brightness-75"
                         } h-full transform object-cover transition`}
-                        src={`https://res.cloudinary.com/${process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME}/image/upload/c_scale,w_180/${public_id}.${format}`}
+                        src={url}
                       />
                     </motion.button>
                   ))}

examples/with-cloudinary/next.config.js → examples/with-vercel-blob/next.config.js

@@ -3,9 +3,9 @@ module.exports = {
     remotePatterns: [
       {
         protocol: "https",
-        hostname: "res.cloudinary.com",
+        hostname: "*.public.blob.vercel-storage.com",
         port: "",
-        pathname: "/my-account/**",
+        pathname: "/**",
         search: "",
       },
     ],

examples/with-cloudinary/package.json → examples/with-vercel-blob/package.json

@@ -9,17 +9,16 @@
   "dependencies": {
     "@headlessui/react": "^1.7.4",
     "@heroicons/react": "^2.0.13",
-    "cloudinary": "^1.32.0",
+    "@vercel/blob": "^1.0.0",
     "eslint-config-next": "^13.0.1",
     "framer-motion": "^7.6.4",
-    "imagemin": "^8.0.1",
-    "imagemin-jpegtran": "^7.0.0",
     "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hooks-global-state": "^2.0.0",
     "react-swipeable": "^7.0.0",
-    "react-use-keypress": "^1.3.1"
+    "react-use-keypress": "^1.3.1",
+    "sharp": "^0.33.5"
   },
   "devDependencies": {
     "@types/node": "18.11.9",
@@ -29,6 +28,6 @@
     "prettier": "^2.7.1",
     "prettier-plugin-tailwindcss": "^0.1.13",
     "tailwindcss": "^3.2.1",
-    "typescript": "4.8.4"
+    "typescript": "^5.1.0"
   }
 }