Zenn
Closed2

next/linkがstorybook上でうまく動かなかった(next13 + storybook6)

Next.js
Storybook
negitoro_changnegitoro_chang

Next.js 13でLinkコンポーネントの仕様が変わった。子要素に a タグを用いる必要がなくなり、これまでどおりの動作を行うには legacyBehavior propsを渡す必要がある。

このLinkコンポーネントを使ってstorybook上にstoryを作った際に、うまくrenderされない（aタグが適用されていない？）問題があった。
これを解決するには、storybook起動時に環境変数で __NEXT_NEW_LINK_BEHAVIOR を渡してやればよかった。

これは次のstorybookのバージョン(7)では不要になるので、workaroundで一旦つけておくと良さそう。
chromaticを使っている場合はchromaticにuploadする際にもこれを指定してやると良い

# github actionsでのchromatic upload

- name: Publish to Chromatic
  uses: chromaui/action@v1
    with:
      projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
    env:
      __NEXT_NEW_LINK_BEHAVIOR: true
このスクラップは2023/02/08にクローズされました