Next.js v12 + Storybook v6.5でハマったところ

問題

tsconfigにパスエイリアスの設定をしたNext.jsプロジェクトにStorybookを導入しようとしたところ、
エイリアスを使用してのパスが解決できない

エラー

resolve '@/pages/index' in '(略)/src/stories/pages'
  Parsed request is a module
  using description file: (略)/package.json (relative path: ./src/stories/pages)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module...(略)

ハマったところ

愚直にエラー文の検索や「Next.js Storybook パスエイリアス」等で検索したところ、下記の解決方法と同じものが多く出てきたので、この修正方法を試していたがうまくいかず

const path = require('path');

module.exports = {
	// ... rest of config
	 webpackFinal: async (config, other) => {
		config.resolve.alias = {
		  "@/*": path.resolve(__dirname, "../src/*")
		};
		
		return config;
	},
};

https://www.bitovi.com/blog/how-to-create-a-path-alias-in-webpack

解決

Next.jsのAddonを入れる
https://storybook.js.org/addons/storybook-addon-next

• Addon install

yarn add --dev storybook-addon-next

• .storybook/main.js

module.exports = {
  // other config ommited for brevity
  addons: [
    // ...
    'storybook-addon-next'
    // ...
  ]
}