Add experimental next/future/image component (#37927)

This PR introduces a new experimental component, `next/future/image`, which is inspired by the existing experimental `layout="raw"`.

The difference is that much of the code has been deleted in order to reduce client-side code as well as reduce complexity:

- No `layout` prop
- No `loader` config (although `loader` prop works)
- No `IntersectionObserver`, use native `loading="lazy"` 
  - No `lazyBoundary`
  - No `lazyRoot`
- No `fill` (yet) so width & height are required
- No `objectFit` (use `style` instead)
- No `objectPosition` (use `style` instead)

This improves performance because native `loading="lazy"` doesn't need to wait for React Hydration and client-side JS.

In a future PR, we will modify `next/image` to remove `layout="raw"` since this new component supersedes it.

## Feature

- [x] Integration tests added
- [x] Documentation added
- [x] Telemetry added. In case of a feature if it's used or not.
- [x] Errors have helpful link attached, see `contributing.md`

docs/manifest.json

@@ -400,6 +400,10 @@
  "title": "next/streaming",
  "path": "/docs/api-reference/next/streaming.md"
  },
+ {
+ "title": "next/future/image (experimental)",
+ "path": "/docs/api-reference/next/future/image.md"
+ },
  {
  "title": "Edge Runtime",
  "path": "/docs/api-reference/edge-runtime.md"

errors/invalid-images-config.md

@@ -39,6 +39,8 @@ module.exports = {
  remotePatterns: [],
  // when true, every image will be unoptimized
  unoptimized: false,
+ // when true, allow `next/future/image` to be imported
+ allowFutureImage: false,
  },
  },
 }

packages/next/build/webpack-config.ts

@@ -1519,6 +1519,7 @@ export default async function getBaseWebpackConfig(
  loader: config.images.loader,
  experimentalUnoptimized: config?.experimental?.images?.unoptimized,
  experimentalLayoutRaw: config.experimental?.images?.layoutRaw,
+ experimentalFuture: config.experimental?.images?.allowFutureImage,
  ...(dev
  ? {
  // pass domains in development to allow validating on the client