How can I fix my App Router path change code from the old Pages Router syntax so it works?
Unanswered
Birman posted this in #help-forum
BirmanOP
I had a Next.js app I had created with a version from three years ago that did a path change from a link click to a calendar page. Here was the essential part:
Under new version I immediately got a compilation error about <a> child and adding the legacyBehavior prop for the Link component. That cleared, nothing I researched and tried got the simple and easily working path change to find the calendar page. Someone told me to recreate my next app using @latest and rejecting the use App Router recommendation, but I'd like to see if there is a reasonably easy way to write code to do the change with App Router instead of Page Router. Thanks for any help.
<Link href={`/calendar`}>
<a className='flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 sm:px-8'>
See calendar availability and prices
</a>
</Link>Under new version I immediately got a compilation error about <a> child and adding the legacyBehavior prop for the Link component. That cleared, nothing I researched and tried got the simple and easily working path change to find the calendar page. Someone told me to recreate my next app using @latest and rejecting the use App Router recommendation, but I'd like to see if there is a reasonably easy way to write code to do the change with App Router instead of Page Router. Thanks for any help.
8 Replies
<Link> component no longer needs to be passed an <a> tag, remove the <a> tag inside <Link>
You can change <a> for <span> to keep your styles, or move the styles to the <Link> component.
<Link> already is an anchor tag under the hood, you either remove the <a> tag or add the
<Link> already is an anchor tag under the hood, you either remove the <a> tag or add the
legacyBehavior prop to <Link> to indicate you want it to work like it used to in older versionsBirmanOP
Thanks, so if I created my Next app and rejected the recommended App Router in the setup, would my old code work like it used to? I think what I did was when I created the app now I accepted the recommendation and that's why I got the no <a> child links permitted or something like that, along with the suggestion I add the legacyBehavior prop. I take it aht is because I did my setup with the App Router and @latest version. The old code worked perfectly to set the path to my pages/calendar file. Is there some reasonably easy way to change my code to use the App Router, or do I have to get into a tutorial to learn more about the changes? I used to use Next a lot three years ago and deployed projects on Vercel that worked nicely, but database payments kept sneaking up on me.
Well the whole paradigm changed in the APP router tbh, not sure you can simply move everything you had but they say the pages/ folder it’s backwards compatible. You can have both app/ and pages/ folders as long as you don’t have duplicate routes between them
Original message was deleted
BirmanOP
Thank you.
@Birman Thanks, so if I created my Next app and rejected the recommended App Router in the setup, would my old code work like it used to? I think what I did was when I created the app now I accepted the recommendation and that's why I got the no <a> child links permitted or something like that, along with the suggestion I add the legacyBehavior prop. I take it aht is because I did my setup with the App Router and @latest version. The old code worked perfectly to set the path to my pages/calendar file. Is there some reasonably easy way to change my code to use the App Router, or do I have to get into a tutorial to learn more about the changes? I used to use Next a lot three years ago and deployed projects on Vercel that worked nicely, but database payments kept sneaking up on me.
no the <Link> change is for both routers. it's a breaking change in v12 iirc. fixing it should be very straightforward so im not too sure what you are struggling with
oh it's actually v13, https://nextjs.org/blog/next-13#breaking-changes