diff --git a/code/frameworks/nextjs/template/cli/js/Configure.mdx b/code/frameworks/nextjs/template/cli/js/Configure.mdx
new file mode 100644
index 000000000000..48ad8507160f
--- /dev/null
+++ b/code/frameworks/nextjs/template/cli/js/Configure.mdx
@@ -0,0 +1,309 @@
+import { Meta } from '@storybook/blocks';
+import Image from 'next/image';
+
+import Accessibility from "./assets/accessibility.svg";
+import Checkmark from "./assets/checkmark.svg";
+import Document from "./assets/document.svg";
+import Typography from "./assets/typography.svg";
+import Github from "./assets/github.svg";
+import Discord from "./assets/discord.svg";
+import Youtube from "./assets/youtube.svg";
+import Chromatic from "./assets/chromatic.svg";
+import Figma from "./assets/figma.svg";
+import Tutorials from "./assets/tutorials.svg";
+import Styling from "./assets/styling.jpg";
+import Context from "./assets/context.jpg";
+import Assets from "./assets/assets.jpg";
+
+
+
+# Configure your project
+
+Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.
+
+
+
+
+
+
Add styling and CSS
+
+ Like with web applications, there are many ways to include CSS within
+ Storybook. Learn more about setting up styling within Storybook.
+
+ Often when a story doesn't render, it's because your component is
+ expecting a specific environment or context (like a theme provider) to
+ be available. Learn more about solving these issues by providing context
+ and mocking to Storybook.
+
+ To link static files (like fonts) to your projects and stories, use the
+ `staticDirs` configuration option to specify folders to load when
+ starting Storybook.
+
+
+# Do more with Storybook
+
+Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
+
+
+
+
+
+
+
+
Autodocs
+
+ Auto-generate living, interactive reference documentation from your
+ components and stories.
+
+
+# Explore and Connect
+
+Connect with our community on Discord or start contributing directly on Github. You might also be interesting in watching some videos on Youtube explaining how to take full advantage of Storybook.
+
+
+
+
+
+
diff --git a/code/frameworks/nextjs/template/cli/js/Introduction.mdx b/code/frameworks/nextjs/template/cli/js/Introduction.mdx
deleted file mode 100644
index 7055076a5273..000000000000
--- a/code/frameworks/nextjs/template/cli/js/Introduction.mdx
+++ /dev/null
@@ -1,230 +0,0 @@
-import { Meta } from '@storybook/blocks';
-import Image from 'next/image';
-
-import Code from './assets/code-brackets.svg';
-import Colors from './assets/colors.svg';
-import Comments from './assets/comments.svg';
-import Direction from './assets/direction.svg';
-import Flow from './assets/flow.svg';
-import Plugin from './assets/plugin.svg';
-import Repo from './assets/repo.svg';
-import StackAlt from './assets/stackalt.svg';
-
-
-
-
-
-# Welcome to Storybook
-
-Storybook helps you build UI components in isolation from your app's business logic, data, and context.
-That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
-
-Browse example stories now by navigating to them in the sidebar.
-View their code in the `stories` directory to learn how they work.
-We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
-
-
- TipEdit the Markdown in stories/Introduction.mdx
-
diff --git a/code/frameworks/nextjs/template/cli/ts-3-8/Configure.mdx b/code/frameworks/nextjs/template/cli/ts-3-8/Configure.mdx
new file mode 100644
index 000000000000..48ad8507160f
--- /dev/null
+++ b/code/frameworks/nextjs/template/cli/ts-3-8/Configure.mdx
@@ -0,0 +1,309 @@
+import { Meta } from '@storybook/blocks';
+import Image from 'next/image';
+
+import Accessibility from "./assets/accessibility.svg";
+import Checkmark from "./assets/checkmark.svg";
+import Document from "./assets/document.svg";
+import Typography from "./assets/typography.svg";
+import Github from "./assets/github.svg";
+import Discord from "./assets/discord.svg";
+import Youtube from "./assets/youtube.svg";
+import Chromatic from "./assets/chromatic.svg";
+import Figma from "./assets/figma.svg";
+import Tutorials from "./assets/tutorials.svg";
+import Styling from "./assets/styling.jpg";
+import Context from "./assets/context.jpg";
+import Assets from "./assets/assets.jpg";
+
+
+
+# Configure your project
+
+Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.
+
+
+
+
+
+
Add styling and CSS
+
+ Like with web applications, there are many ways to include CSS within
+ Storybook. Learn more about setting up styling within Storybook.
+
+ Often when a story doesn't render, it's because your component is
+ expecting a specific environment or context (like a theme provider) to
+ be available. Learn more about solving these issues by providing context
+ and mocking to Storybook.
+
+ To link static files (like fonts) to your projects and stories, use the
+ `staticDirs` configuration option to specify folders to load when
+ starting Storybook.
+
+
+# Do more with Storybook
+
+Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
+
+
+
+
+
+
+
+
Autodocs
+
+ Auto-generate living, interactive reference documentation from your
+ components and stories.
+
+
+# Explore and Connect
+
+Connect with our community on Discord or start contributing directly on Github. You might also be interesting in watching some videos on Youtube explaining how to take full advantage of Storybook.
+
+
+
+
+
+
diff --git a/code/frameworks/nextjs/template/cli/ts-3-8/Introduction.mdx b/code/frameworks/nextjs/template/cli/ts-3-8/Introduction.mdx
deleted file mode 100644
index 2418db1e8772..000000000000
--- a/code/frameworks/nextjs/template/cli/ts-3-8/Introduction.mdx
+++ /dev/null
@@ -1,230 +0,0 @@
-import { Meta } from '@storybook/blocks';
-import Image from 'next/image';
-
-import Code from './assets/code-brackets.svg';
-import Colors from './assets/colors.svg';
-import Comments from './assets/comments.svg';
-import Direction from './assets/direction.svg';
-import Flow from './assets/flow.svg';
-import Plugin from './assets/plugin.svg';
-import Repo from './assets/repo.svg';
-import StackAlt from './assets/stackalt.svg';
-
-
-
-
-
-# Welcome to Storybook
-
-Storybook helps you build UI components in isolation from your app's business logic, data, and context.
-That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
-
-Browse example stories now by navigating to them in the sidebar.
-View their code in the `stories` directory to learn how they work.
-We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
-
-
- TipEdit the Markdown in stories/Introduction.mdx
-
diff --git a/code/frameworks/nextjs/template/cli/ts-4-9/Configure.mdx b/code/frameworks/nextjs/template/cli/ts-4-9/Configure.mdx
new file mode 100644
index 000000000000..48ad8507160f
--- /dev/null
+++ b/code/frameworks/nextjs/template/cli/ts-4-9/Configure.mdx
@@ -0,0 +1,309 @@
+import { Meta } from '@storybook/blocks';
+import Image from 'next/image';
+
+import Accessibility from "./assets/accessibility.svg";
+import Checkmark from "./assets/checkmark.svg";
+import Document from "./assets/document.svg";
+import Typography from "./assets/typography.svg";
+import Github from "./assets/github.svg";
+import Discord from "./assets/discord.svg";
+import Youtube from "./assets/youtube.svg";
+import Chromatic from "./assets/chromatic.svg";
+import Figma from "./assets/figma.svg";
+import Tutorials from "./assets/tutorials.svg";
+import Styling from "./assets/styling.jpg";
+import Context from "./assets/context.jpg";
+import Assets from "./assets/assets.jpg";
+
+
+
+# Configure your project
+
+Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.
+
+
+
+
+
+
Add styling and CSS
+
+ Like with web applications, there are many ways to include CSS within
+ Storybook. Learn more about setting up styling within Storybook.
+
+ Often when a story doesn't render, it's because your component is
+ expecting a specific environment or context (like a theme provider) to
+ be available. Learn more about solving these issues by providing context
+ and mocking to Storybook.
+
+ To link static files (like fonts) to your projects and stories, use the
+ `staticDirs` configuration option to specify folders to load when
+ starting Storybook.
+
+
+# Do more with Storybook
+
+Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
+
+
+
+
+
+
+
+
Autodocs
+
+ Auto-generate living, interactive reference documentation from your
+ components and stories.
+
+
+# Explore and Connect
+
+Connect with our community on Discord or start contributing directly on Github. You might also be interesting in watching some videos on Youtube explaining how to take full advantage of Storybook.
+
+
+
+
+
+
diff --git a/code/frameworks/nextjs/template/cli/ts-4-9/Introduction.mdx b/code/frameworks/nextjs/template/cli/ts-4-9/Introduction.mdx
deleted file mode 100644
index 7055076a5273..000000000000
--- a/code/frameworks/nextjs/template/cli/ts-4-9/Introduction.mdx
+++ /dev/null
@@ -1,230 +0,0 @@
-import { Meta } from '@storybook/blocks';
-import Image from 'next/image';
-
-import Code from './assets/code-brackets.svg';
-import Colors from './assets/colors.svg';
-import Comments from './assets/comments.svg';
-import Direction from './assets/direction.svg';
-import Flow from './assets/flow.svg';
-import Plugin from './assets/plugin.svg';
-import Repo from './assets/repo.svg';
-import StackAlt from './assets/stackalt.svg';
-
-
-
-
-
-# Welcome to Storybook
-
-Storybook helps you build UI components in isolation from your app's business logic, data, and context.
-That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
-
-Browse example stories now by navigating to them in the sidebar.
-View their code in the `stories` directory to learn how they work.
-We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
-
-
- TipEdit the Markdown in stories/Introduction.mdx
-
diff --git a/code/frameworks/nextjs/template/stories/Image.stories.jsx b/code/frameworks/nextjs/template/stories/Image.stories.jsx
index bf3808282a6f..7248b28dc9f2 100644
--- a/code/frameworks/nextjs/template/stories/Image.stories.jsx
+++ b/code/frameworks/nextjs/template/stories/Image.stories.jsx
@@ -1,13 +1,13 @@
import React from 'react';
import Image from 'next/image';
-import StackAlt from '../../assets/colors.svg';
+import Accessibility from '../../assets/accessibility.svg';
export default {
component: Image,
args: {
- src: StackAlt,
- alt: 'Stack Alt',
+ src: Accessibility,
+ alt: 'Accessibility',
},
};
diff --git a/code/frameworks/nextjs/template/stories_nextjs-12-js/ImageFuture.stories.jsx b/code/frameworks/nextjs/template/stories_nextjs-12-js/ImageFuture.stories.jsx
index 3c65960d585d..a2d642b6ece9 100644
--- a/code/frameworks/nextjs/template/stories_nextjs-12-js/ImageFuture.stories.jsx
+++ b/code/frameworks/nextjs/template/stories_nextjs-12-js/ImageFuture.stories.jsx
@@ -1,13 +1,13 @@
import React from 'react';
import Image from 'next/future/image';
-import StackAlt from '../../assets/colors.svg';
+import Accessibility from '../../assets/accessibility.svg';
export default {
component: Image,
args: {
- src: StackAlt,
- alt: 'Stack Alt',
+ src: Accessibility,
+ alt: 'Accessibility',
},
};
diff --git a/code/lib/cli/rendererAssets/common/Configure.mdx b/code/lib/cli/rendererAssets/common/Configure.mdx
new file mode 100644
index 000000000000..38f5a7502b49
--- /dev/null
+++ b/code/lib/cli/rendererAssets/common/Configure.mdx
@@ -0,0 +1,311 @@
+import { Meta } from "@storybook/blocks";
+
+import Accessibility from "./assets/accessibility.svg";
+import Checkmark from "./assets/checkmark.svg";
+import Document from "./assets/document.svg";
+import Typography from "./assets/typography.svg";
+import Github from "./assets/github.svg";
+import Discord from "./assets/discord.svg";
+import Youtube from "./assets/youtube.svg";
+import Chromatic from "./assets/chromatic.svg";
+import Figma from "./assets/figma.svg";
+import Tutorials from "./assets/tutorials.svg";
+import Styling from "./assets/styling.jpg";
+import Context from "./assets/context.jpg";
+import Assets from "./assets/assets.jpg";
+
+
+
+# Configure your project
+
+Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.
+
+
+
+
+
+
Add styling and CSS
+
+ Like with web applications, there are many ways to include CSS within
+ Storybook. Learn more about setting up styling within Storybook.
+
+ Often when a story doesn't render, it's because your component is
+ expecting a specific environment or context (like a theme provider) to
+ be available. Learn more about solving these issues by providing context
+ and mocking to Storybook.
+
+ To link static files (like fonts) to your projects and stories, use the
+ `staticDirs` configuration option to specify folders to load when
+ starting Storybook.
+
+
+# Do more with Storybook
+
+Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
+
+
+
+
+
+
+
+
Autodocs
+
+ Auto-generate living, interactive reference documentation from your
+ components and stories.
+
+
+# Explore and Connect
+
+Connect with our community on Discord or start contributing directly on Github. You might also be interesting in watching some videos on Youtube explaining how to take full advantage of Storybook.
+
+
+
+
+
+
diff --git a/code/lib/cli/rendererAssets/common/Introduction.mdx b/code/lib/cli/rendererAssets/common/Introduction.mdx
deleted file mode 100644
index ff7fc71fbf8a..000000000000
--- a/code/lib/cli/rendererAssets/common/Introduction.mdx
+++ /dev/null
@@ -1,213 +0,0 @@
-import { Meta } from '@storybook/blocks';
-import Code from './assets/code-brackets.svg';
-import Colors from './assets/colors.svg';
-import Comments from './assets/comments.svg';
-import Direction from './assets/direction.svg';
-import Flow from './assets/flow.svg';
-import Plugin from './assets/plugin.svg';
-import Repo from './assets/repo.svg';
-import StackAlt from './assets/stackalt.svg';
-
-
-
-
-
-# Welcome to Storybook
-
-Storybook helps you build UI components in isolation from your app's business logic, data, and context.
-That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
-
-Browse example stories now by navigating to them in the sidebar.
-View their code in the `stories` directory to learn how they work.
-We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
-
-
+ 
+ 
+