<next.js>storybookでuseParamsを使いたい

前提
next.js v13.4 (app router)
storybook v7.4

.storybook/main.ts

import type { StorybookConfig } from '@storybook/nextjs'
import { join, dirname } from 'path'

function getAbsolutePath(value: string): any {
  return dirname(require.resolve(join(value, 'package.json')))
}
const config: StorybookConfig = {
  stories: [
    '<components path>/**/*.stories.@(js|jsx|mjs|ts|tsx)',
  ],
  addons: [
    getAbsolutePath('@storybook/addon-links'),
    getAbsolutePath('@storybook/addon-essentials'),
    getAbsolutePath('@storybook/addon-onboarding'),
    getAbsolutePath('@storybook/addon-interactions'),
  ],
  framework: {
    name: getAbsolutePath('@storybook/nextjs'),
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
}
export default config

デフォルトではuseParamsを使うコンポーネントをStorybookでレンダリングしたところ取得できない。

やり方

parametersにnextjs用の設定を追加すれば良い。
自分の例ではhttps://example.com/[locale]/hoge のように [locale]部分が動的に切り替わりここを取得したかったのでsegmentsで書いてあげればよかった。

.storybook/previewtsx

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    // 追加
    nextjs: {
      appDirectory: true,
      navigation: {
        segments: [['locale', 'ja']],
      },
    },
  },
}

他にもpathの指定やqueryの指定もできる。詳しくは公式を参照してください。