From 70d89bc869b6d4035939b790d9f02958fb2adb80 Mon Sep 17 00:00:00 2001
From: Steven <steven@ceriously.com>
Date: Thu, 1 Dec 2022 20:47:59 -0500
Subject: [PATCH] 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.
---
 .../next.config.js/url-imports.md             | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/docs/api-reference/next.config.js/url-imports.md b/docs/api-reference/next.config.js/url-imports.md
index 1473c7dd571..7a1c65448e0 100644
--- a/docs/api-reference/next.config.js/url-imports.md
+++ b/docs/api-reference/next.config.js/url-imports.md
@@ -14,7 +14,7 @@ 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'],
   },
 }
 ```
@@ -22,7 +22,7 @@ module.exports = {
 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"
 ```