Merge pull request #20066 from storybookjs/valentin/document-next-dyn…

…amic Add story for next/dynamic usage
storybookjs · Dec 3, 2022 · 5ec53aa · 5ec53aa
2 parents 366c067 + 934ca01
commit 5ec53aa
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 0 deletions.
diff --git a/code/frameworks/nextjs/template/stories/DynamicImport.stories.jsx b/code/frameworks/nextjs/template/stories/DynamicImport.stories.jsx
@@ -0,0 +1,20 @@
+import dynamic from 'next/dynamic';
+import React, { Suspense } from 'react';
+
+const DynamicComponent = dynamic(() => import('./dynamic-component'), {
+  ssr: false,
+});
+
+function Component() {
+  return (
+    <Suspense fallback="Loading...">
+      <DynamicComponent />
+    </Suspense>
+  );
+}
+
+export default {
+  component: Component,
+};
+
+export const Default = {};
diff --git a/code/frameworks/nextjs/template/stories/dynamic-component.js b/code/frameworks/nextjs/template/stories/dynamic-component.js
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function DynamicComponent() {
+  return <div>I am a dynamically loaded component</div>;
+}