From 331c92c979c4a5c0200b5ac42f38a256ec44ee46 Mon Sep 17 00:00:00 2001
From: Fritz <4413963+fritz-c@users.noreply.github.com>
Date: Sun, 26 Feb 2023 08:50:31 -0600
Subject: [PATCH] docs: update next documentation (#829)

The new installation instructions are for a more advanced configuration than originally appeared in these docs, but the original did not actually work in Next 13, and the workaround took nearly as much code, so I've stuck with the slightly longer config here.
---
 website/pages/docs/next.mdx | 49 +++++++++++++++++++++++++++++++------
 1 file changed, 41 insertions(+), 8 deletions(-)

diff --git a/website/pages/docs/next.mdx b/website/pages/docs/next.mdx
index efbb2890..5d59f5dc 100644
--- a/website/pages/docs/next.mdx
+++ b/website/pages/docs/next.mdx
@@ -21,22 +21,42 @@ yarn add --dev @svgr/webpack
 
 ## Usage
 
-Using SVGR into Next.js is possible by configuring `@svgr/webpack`.
+Using SVGR in Next.js is possible with `@svgr/webpack`.
 
 **next.config.js**
 
 ```js
 module.exports = {
   webpack(config) {
-    config.module.rules.push({
-      test: /\.svg$/i,
-      issuer: /\.[jt]sx?$/,
-      use: ['@svgr/webpack'],
-    })
+    // Grab the existing rule that handles SVG imports
+    const fileLoaderRule = config.module.rules.find((rule) =>
+      rule.test?.test?.(".svg")
+    );
 
-    return config
+    config.module.rules.push(
+      // Reapply the existing rule, but only for svg imports ending in ?url
+      {
+        ...fileLoaderRule,
+        test: /\.svg$/i,
+        resourceQuery: /url/, // *.svg?url
+      },
+      // Convert all other *.svg imports to React components
+      {
+        test: /\.svg$/i,
+        issuer: /\.[jt]sx?$/,
+        resourceQuery: { not: /url/ }, // exclude if *.svg?url
+        use: ["@svgr/webpack"],
+      },
+    );
+
+    // Modify the file loader rule to ignore *.svg, since we have it handled now.
+    fileLoaderRule.exclude = /\.svg$/i;
+
+    return config;
   },
-}
+
+  // ...other config
+};
 ```
 
 **Your code**
@@ -51,4 +71,17 @@ const Example = () => (
 )
 ```
 
+Or, using the classic (URL) import:
+
+```js
+import Image from 'next/image'
+import starUrl from './star.svg?url'
+
+const Example = () => (
+  <div>
+    <Image src={starUrl} />
+  </div>
+)
+```
+
 Please refer to [SVGR webpack guide](/docs/webpack/) for advanced use cases.