archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve docs for URL Imports (#43615)

Browse source 
This improves the examples and ensures the config at the beginning will work for each of the examples below.
This commit is contained in:
Steven 2022-12-01 20:47:59 -05:00 committed by GitHub
parent 4ca12bd544
commit 70d89bc869
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
docs/api-reference/next.config.js/url-imports.md
View file

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