docs: Verbose troubleshooting for unconfigured hosts (#84271)

Closes: https://linear.app/vercel/issue/DOC-5151/unconfigured-image-host

---------

Co-authored-by: Rich Haines <[email protected]>

Author: icyJoseph

errors/next-image-unconfigured-host.mdx

@@ -6,6 +6,28 @@ title: '`next/image` Un-configured Host'
 
 One of your pages that leverages the `next/image` component, passed a `src` value that uses a hostname in the URL that isn't defined in the `images.remotePatterns` in `next.config.js`.
 
+Each part of the `src` value is strictly matched against your `images.remotePatterns` definitions. Matching is exact and case-sensitive, meaning a mismatch in any single part will fail the check.
+
+For a URL like `https://example.org/images/example?v=1234`, the following parts must match the pattern you configured:
+
+- **Protocol**: `http` vs `https` must match exactly.
+- **Hostname**: `example.org` is different from `www.example.org` and from subdomains like `assets.example.org`.
+- **Port**: If present (e.g. `:3000`), it must be included.
+- **Pathname**: The path must be covered by your glob, e.g. `/**` or `/images/**`.
+- **Search**: If specified in a pattern, it must match the full search string exactly (including the leading `?`). Globs are not supported for search.
+
+If any of these differ from the actual `src`, the image will be rejected.
+
+Common pitfalls that cause this error:
+
+- Using `https` in `src` but only allowing `http` (or vice‑versa).
+- Loading from a subdomain like `assets.example.com` while only configuring `example.com`.
+- Missing a port during local/dev usage, e.g. `http://localhost:3000`.
+- A too‑narrow pathname pattern (e.g. `/images/` instead of `/images/**`).
+- When using the `URL` constructor, if no `search` is specified, then the `search` property is set to an empty string `''`, which means search params are **NOT** allowed.
+
+See the [Remote Patterns](/docs/pages/api-reference/components/image#remotepatterns) reference for details.
+
 ## Possible Ways to Fix It
 
 Add the protocol, hostname, port, and pathname to the `images.remotePatterns` config in `next.config.js`:
@@ -18,6 +40,39 @@ module.exports = {
 }
 ```
 
+### With specific search params
+
+To allow a single search param, `v=1234`:
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    remotePatterns: [
+      new URL('https://assets.example.com/account123/**?v=1234'),
+    ],
+  },
+}
+```
+
+### Any search params
+
+To allow any search parameter, use the remote pattern object, omitting the `search` key.
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'assets.example.com',
+        port: '',
+        pathname: '/account123/**',
+      },
+    ],
+  },
+}
+```
+
 ### Fixing older versions of Next.js
 
 <details>