Next 12.2 newNextLinkBehavior support

Describe the bug

Next.js 12.2 support new link behavior.

From https://nextjs.org/blog/next-12-2#other-improvements

next/link no longer requires manually adding as a child. You can now opt into this behavior in a backward-compatible way.

https://github.com/vercel/next.js/pull/36436

I added the newNextLinkBehavior flag in my next config in next.config.js

{
  experimental: {
    newNextLinkBehavior: true,
  }
}

but when I use storybook with the new link behavior it seems to not understand it.

I get

Multiple children were passed to <Link> with `href` of `/` but only one child is supported https://nextjs.org/docs/messages/link-multiple-children 

error although in my app this resolves well.

Your minimal, reproducible example

nextjs example with-storybook-app

Steps to reproduce

1. Add

{
  experimental: {
    newNextLinkBehavior: true,
  }
}

to next.config.js. 2. Create a component with multiple children inside Link like

import Link from "next/link";
export function MenuItem() {
  return (
    <Link href="/" >
      <div/>
      <div/>
    </Link>
  );
}

1. Use this component in storybook story

 import { ComponentMeta, ComponentStory } from "@storybook/react";
import { MenuItem } from "./MenuItem";

export default {
  component: MenuItem,
} as ComponentMeta<typeof MenuItem>;

const Template: ComponentStory<typeof MenuItem> = (args) => (
  <MenuItem {...args} />
);

export const Regular = Template.bind({});

Expected behavior

No error will occur and the new link behavior will be supported

How often does this bug happen?

Every time

Screenshots or Videos

Platform

MacOS Monterey 12.4 Chrome Version 103.0.5060.114 (Official Build) (arm64)

storybook-addon-next version

^1.6.7

Additional context

No response

[B2o5T]

@nirtamir2 seems like this addon doesn’t pass down experimental options, found a workaround to work with newNextLinkBehavior 💪

in your preview.tsx file add the following

import NextLink, { LinkProps } from 'next/link';

const OriginalNextLink = NextLink;

Object.defineProperty(NextLink, 'default', {
  configurable: true,
  value: (props: LinkProps) => <OriginalNextLink {...props} legacyBehavior={false} />,
});

[gregorybolkenstijn]

@B2o5T Thanks, that fixed it for me!