Document usage of suspense option of next/dynamic

docs/advanced-features/dynamic-import.md

@@ -156,3 +156,25 @@ function Home() {
 
 export default Home
 ```
+
+## With suspense
+
+Option `suspense` let you to load component lazily as `React.lazy` and `<Suspense>` with React 18. Note that it only works on client side and server side will render `fallback` component yet. Fully SSR support in concurrent mode is working in progress.
+
+```jsx
+import dynamic from 'next/dynamic'
+
+const DynamicLazyComponent = dynamic(() => import('../components/hello4'), {
+  suspense: true,
+})
+
+function Home() {
+  return (
+    <div>
+      <Suspense fallback={`loading`}>
+        <DynamicLazyComponent />
+      </Suspense>
+    </div>
+  )
+}
+```

errors/invalid-dynamic-suspense.md

@@ -0,0 +1,13 @@
+# Invalid Usage of `suspense` Option of `next/dynamic`
+
+#### Why This Error Occurred
+
+`<Suspense>` is not allowed under legacy render mode without using React versions above 18.
+
+#### Possible Ways to Fix It
+
+Remove `suspense: true` option in `next/dynamic` usages.
+
+### Useful Links
+
+- [Dynamic Import Suspense Usage](https://nextjs.org/docs/advanced-features/dynamic-import#with-suspense)

packages/next/shared/lib/dynamic.tsx

@@ -119,7 +119,7 @@ export default function dynamic<P = {}>(
     if (!process.env.__NEXT_REACT_ROOT && suspenseOptions.suspense) {
       // TODO: add error doc when this feature is stable
       throw new Error(
-        `Disallowed suspense option usage with next/dynamic in blocking mode`
+        `Invalid suspense option usage in next/dynamic. Read more: https://nextjs.org/docs/messages/invalid-dynamic-suspense`
       )
     }
   }