diff --git a/code/frameworks/nextjs/template/stories/DynamicImport.stories.jsx b/code/frameworks/nextjs/template/stories/DynamicImport.stories.jsx
new file mode 100644
index 000000000000..3c177d670737
--- /dev/null
+++ 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
new file mode 100644
index 000000000000..4863633033f3
--- /dev/null
+++ 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>;
+}