Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve docs for URL Imports #43615

Merged
merged 1 commit into from Dec 2, 2022
Merged

Improve docs for URL Imports #43615

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
21 changes: 9 additions & 12 deletions docs/api-reference/next.config.js/url-imports.md
View file
Open in desktop
Expand Up @@ -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.
Expand All @@ -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
Expand Down Expand Up @@ -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>
Expand All @@ -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"
```