Next.js App router, Chakra UIをstorybook v7で動作させる

const config: StorybookConfig = {
  stories: [・・・],
  addons: [・・・],
  framework: {
    name: "@storybook/nextjs",
    options: {},
  },
  core: {},
  docs: {・・・ },
  webpackFinal: async (baseConfig) => {
    return {
      ...baseConfig,
      resolve: {
        ...baseConfig.resolve,
        alias: {
          ...baseConfig.resolve?.alias,
          "@app": path.resolve(__dirname, "../app/"),
          "@": path.resolve(__dirname, "../"),
        },
      },
    };
  },
};
export default config;

import React from 'react';
import type { Preview } from "@storybook/react";
import { ChakraProvider } from '@chakra-ui/react';

const preview: Preview = {
  decorators: [
    (Story) => (
      <ChakraProvider>
        <Story />
      </ChakraProvider>
    ),
  ],
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
};

export default preview;