nextjs - ✅(Solved) Fix Docs: Matching loaders on resource queries [1 pull requests, 4 comments, 2 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#90560Fetched 2026-04-08 00:19:53
View on GitHub
Comments
4
Participants
2
Timeline
7
Reactions
0
Timeline (top)
commented ×4cross-referenced ×1issue_type_added ×1referenced ×1

Fix Action

Fixed

PR fix notes

PR #90585: Turbopack operators examples

Description (problem / solution / changelog)

For Contributors

Improving Documentation

What?

Expanded the "Supported customizable operators" section in docs/01-app/03-api-reference/05-config/01-next-config-js/turbopack.mdx.

Why?

The previous documentation provided only brief one-line descriptions for Turbopack's customizable operators. This update adds practical, standalone examples for path, content, query, and contentType, as well as an example demonstrating how to combine operators. This makes the documentation clearer and easier for users to understand and implement these configurations.

How?

Added code snippets and explanations to the turbopack.mdx file, drawing inspiration from existing PRs and common usage patterns.

Fixes #90560


Slack Thread

<p><a href="https://cursor.com/agents/bc-e3ccff0f-36c0-5586-9939-2f6b98894ba1"><picture><source media="(prefers-color-scheme: dark)" srcset="https://cursor.com/assets/images/open-in-web-dark.png"><source media="(prefers-color-scheme: light)" srcset="https://cursor.com/assets/images/open-in-web-light.png"><img alt="Open in Web" width="114" height="28" src="https://cursor.com/assets/images/open-in-web-dark.png"></picture></a>&nbsp;<a href="https://cursor.com/background-agent?bcId=bc-e3ccff0f-36c0-5586-9939-2f6b98894ba1"><picture><source media="(prefers-color-scheme: dark)" srcset="https://cursor.com/assets/images/open-in-cursor-dark.png"><source media="(prefers-color-scheme: light)" srcset="https://cursor.com/assets/images/open-in-cursor-light.png"><img alt="Open in Cursor" width="131" height="28" src="https://cursor.com/assets/images/open-in-cursor-dark.png"></picture></a>&nbsp;</p>

Changed files

  • docs/01-app/03-api-reference/05-config/01-next-config-js/turbopack.mdx (modified, +7/-6)
RAW_BUFFERClick to expand / collapse

What is the documentation issue?

In PR #88644, support for matching loaders on resource queries was added in the canary release. However, there is no documentation explaining how to use this feature with Turbopack.

Is there any context that might help us understand?

There should be clear guidance with examples on how to configure loaders using resource queries and any limitations compared to Webpack.

Also, one question: why does Turbopack require explicit configuration for this, while Webpack seems to handle similar cases automatically?

Does the docs page already exist? Please link to it.

https://nextjs.org/docs/app/api-reference/config/next-config-js/turbopack

extent analysis

Fix: Add Turbopack “resource‑query loader” documentation

1. Create / update the docs page

File: docs/app/api-reference/config/next-config-js/turbopack.md (or the appropriate MDX file in the repo)

Add a new “Resource‑Query Loaders” section with:

## Matching loaders on resource queries (Turbopack)

Turbopack can apply a loader only when a module is imported with a specific
resource‑query string, e.g.:

```js
import img from './logo.png?url'   // → use url‑loader
import img from './logo.png?inline' // → use raw‑loader

Configuration

// next.config.js
module.exports = {
  experimental: {
    // Enable Turbopack (if not already)
    turbopack: true,
  },
  // Turbopack specific options
  turbopack: {
    // The `rules` array works like Webpack's `module.rules`
    rules: [
      {
        // Apply only when the import contains "?url"
        test: /\.png$/i,
        resourceQuery: /url/,
        // Use the built‑in url loader (or a custom one)
        use: [{ loader: 'next-image-loader' }],
      },
      {
        // Apply when "?inline" is present
        test: /\.png$/i,
        resourceQuery: /inline/,
        use: [{ loader: 'raw-loader' }],
      },
    ],
  },
};
  • test – regular

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING