Upgrade to Storybook V7

app/.storybook/main.js

@@ -4,87 +4,37 @@
  * @see https://storybook.js.org/docs/configurations/default-config/
  */
 // @ts-check
-const sassOptions = require("../scripts/sassOptions");
-
 // Support deploying to a subdirectory, such as GitHub Pages.
 const NEXT_PUBLIC_BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH ?? "";
-const storybookSassOptions = sassOptions(NEXT_PUBLIC_BASE_PATH);
 
 /**
- * @type {import("@storybook/core-common").StorybookConfig}
+ * @type {import("@storybook/nextjs").StorybookConfig}
  */
 const config = {
   stories: ["../stories/**/*.stories.@(mdx|js|jsx|ts|tsx)"],
   addons: ["@storybook/addon-essentials", "storybook-react-i18next"],
-  framework: "@storybook/react",
-  core: {
-    builder: {
-      name: "webpack5",
-      options: {
+  framework: {
+    name: "@storybook/nextjs",
+    options: {
+      builder: {
         // Cache build output between runs, to speed up subsequent startup times
         fsCache: true,
         // Applies in development mode. Storybook will start up faster, at the cost
         // of slightly slower browsing time when you navigate to another story.
         lazyCompilation: true,
       },
     },
+  },
+  core: {
     disableTelemetry: true,
   },
-  // Tell storybook where to find USWDS static assets
   staticDirs: ["../public"],
   // Support deploying Storybook to a subdirectory (like GitHub Pages).
   // This makes `process.env.NEXT_PUBLIC_BASE_PATH` available to our source code.
-  // @ts-expect-error - https://github.com/storybookjs/storybook/issues/19294
   env: (config) => ({
     ...config,
     NEXT_PUBLIC_BASE_PATH,
   }),
-  // Configure Storybook's final Webpack configuration in order to re-use the Next.js config/dependencies.
-  webpackFinal: (config) => {
-    config.module?.rules?.push({
-      test: /\.scss$/,
-      use: [
-        "style-loader",
-        { loader: "css-loader", options: { url: false } }, // this mirrors next.js behavior
-        {
-          /**
-           * Next.js sets this automatically for us, but we need to manually set it here for Storybook.
-           * The main thing this enables is autoprefixer, so any experimental CSS properties work.
-           */
-          loader: "postcss-loader",
-          options: {
-            postcssOptions: {
-              plugins: ["postcss-preset-env"],
-            },
-          },
-        },
-        {
-          loader: "sass-loader",
-          options: {
-            sassOptions: storybookSassOptions,
-          },
-        },
-      ],
-      exclude: /node_modules/,
-    });
-
-    // Required for i18next.
-    config.resolve = config.resolve ?? {};
-    config.resolve.fallback = {
-      fs: false,
-      path: false,
-      os: false,
-    };
-
-    // Support deploying Storybook to a subdirectory (like GitHub Pages).
-    // This makes the Storybook JS bundles load correctly.
-    if (NEXT_PUBLIC_BASE_PATH) {
-      config.output = config.output ?? {};
-      config.output.publicPath = `${NEXT_PUBLIC_BASE_PATH}/`;
-    }
-
-    return config;
-  },
 };
 
-module.exports = config;
+export default config;

app/.storybook/preview.js

@@ -1,3 +1,4 @@
+// @ts-check
 import i18nConfig from "../next-i18next.config";
 // Apply global styling to our stories
 import "../styles/styles.scss";
@@ -10,7 +11,7 @@ import i18n from "./i18next.js";
 const initialLocales = {};
 i18nConfig.i18n.locales.forEach((locale) => (initialLocales[locale] = locale));
 
-export const parameters = {
+const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
     matchers: {
@@ -20,10 +21,21 @@ export const parameters = {
   },
   // Configure i18next and locale/dropdown options.
   i18n,
-  locale: "en",
-  locales: {
-    ...initialLocales,
-    en: "English",
-    es: "Español",
+};
+
+/**
+ * @type {import("@storybook/react").Preview}
+ */
+const preview = {
+  parameters,
+  globals: {
+    locale: "en",
+    locales: {
+      ...initialLocales,
+      en: "English",
+      es: "Español",
+    },
   },
 };
+
+export default preview;

app/README.md

@@ -60,6 +60,8 @@ Other scripts:
 
 Storybook is a [frontend workshop](https://bradfrost.com/blog/post/a-frontend-workshop-environment/) for developing and documenting pages and components in isolation. It allows you to render the same React components and files in the `src/` directory in a browser, without the need for a server or database. This allows you to develop and manually test components without having to run the entire Next.js application.
 
+See the [Storybook Next.js documentation](https://github.com/storybookjs/storybook/tree/next/code/frameworks/nextjs) for more information about using Storybook with Next.js
+
 From the `app/` directory:
 
 1. `npm run storybook`

app/next.config.js

@@ -9,7 +9,7 @@ const sassOptions = require("./scripts/sassOptions");
  * @see https://nextjs.org/docs/api-reference/next.config.js/basepath
  * @example "/test" results in "localhost:3000/test" as the index page for the app
  */
-const basePath = undefined;
+const basePath = process.env.NEXT_PUBLIC_BASE_PATH;
 const appSassOptions = sassOptions(basePath);
 
 /** @type {import('next').NextConfig} */