Next 12.2 newNextLinkBehavior support

[nirtamir2]

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>
  );
}

3. 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

[dimaMachina]

@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!

[nirtamir2]

@B2o5T Thanks! It works for me too 👍

[RyanClementsHax]

Thanks for opening this issue!

The addon doesn't resolve that config as of right now. Resolving next config is difficult because nextjs does a lot of transformations internally to the config that then gets fed to its components. In order to provide a stable api, I have opened a ticket with nextjs to make this easier.

See this discussion for more details https://github.com/RyanClementsHax/storybook-addon-next/discussions/119

[zaratan]

This will also fix issues with the new next/link used by default in Next13. This should maybe be part of #124 for it to be "valid".

[nix6839]

@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} />,
});

More simple solution:

// preview.ts
process.env.__NEXT_NEW_LINK_BEHAVIOR = 'true'

[RyanClementsHax]

Since next 13 support has been released, I'm closing this issue