Improve docs for URL Imports (#43615)

This improves the examples and ensures the config at the beginning will work for each of the examples below.

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"
 ```