feat(nextjs): Add Next 13 to peer dependencies and integration tests

[koenpunt]

This adds Next.js 13 as a supported peer dependency.

Had to do a bit of a hack for the legacyBehavior prop for <Link /> components, since their behavior changed in this new version of Next.js. Eventually a more future proof solution has to be found, once they no longer support the legacyBehavior prop.

Fixes #6046

[koenpunt]

Should this maybe use yarn instead?

[lobsterkatie]

Actually, I tried running the full test suite with react 18.2.0 and it works fine, even for Next 10, so rather than doing it here, let's just change package.json and use that version for everything.

[koenpunt]

I figured that you want to make sure it also still works with older versions of react, hence the package update. If you think that's not necessary I'll update the default version to 18.

[AbhiPrasad]

IMO let's stick with the older versions, especially to get this in so we can release. We can re-evaluate bumping the overall version later on.

[bintzandt]

Maybe it is a better idea to use the new convention for <Link>?

Especially easy since they have a codemod available that you can simply run.

Sorry if this seems like a random comment; I just wondered upon this PR and I thought that you might not know about the available codemod.

[koenpunt]

Maybe it is a better idea to use the new convention for <Link>?

If I do that, the tests for older versions fail.

Especially easy since they have a codemod available that you can simply run.

I like the codemod, maybe I just run that in the test instead, and not modify the source, but lets wait for a maintainer to give some feedback.

[lobsterkatie]

Thanks for doing this, @koenpunt!

[lobsterkatie]

Just ran the tests against Next 13 without the legacyBehavior prop and it all seemed to work. Just to confirm, I also ran it with a page like this:

const HealthyPage = (): JSX.Element => (
  <Link href="/alsoHealthy">
    <a>
      <a>
        <a>
          <a>
            <a id="alsoHealthy">AlsoHealthy</a>
          </a>
        </a>
      </a>
    </a>
  </Link>
);

It seems the nested <a> tags don't pose a problem, so for simplicity, let's not worry about adding linkProps everywhere.

[koenpunt]

For me the integration tests fail when not adding the legacyBehavior prop.

[koenpunt]

I've now pushed the changes without the legacyBehavior prop commit, to see what it will do on CI.

[koenpunt]

Maybe it was just a fluke on my machine, because it seems to be OK on CI now 👍.

[lobsterkatie]

Actually, I tried running the full test suite with react 18.2.0 and it works fine, even for Next 10, so rather than doing it here, let's just change package.json and use that version for everything.

[AbhiPrasad]

Thanks a lot @koenpunt - turned on CI so let's see what it has to say, but if that goes green let's merge and cut a new release!