Run next/link codemod for Next.js 13 on examples (#41913)

vercel · Oct 30, 2022 · ab42da0 · ab42da0
1 parent 8ada894
commit ab42da0
Show file tree

Hide file tree

Showing 273 changed files with 753 additions and 1,028 deletions.
diff --git a/examples/active-class-name/components/ActiveLink.tsx b/examples/active-class-name/components/ActiveLink.tsx
@@ -52,7 +52,7 @@ const ActiveLink = ({
   ])
 
   return (
-    <Link {...props}>
+    <Link {...props} legacyBehavior>
       {React.cloneElement(child, {
         className: className || null,
       })}

diff --git a/examples/analyze-bundles/pages/index.tsx b/examples/analyze-bundles/pages/index.tsx
@@ -12,9 +12,7 @@ const Index: NextPage<IndexProps> = ({ name }) => {
       <h1>Home Page</h1>
       <p>Welcome, {name}</p>
       <div>
-        <Link href="/about">
-          <a>About Page</a>
-        </Link>
+        <Link href="/about">About Page</Link>
       </div>
     </div>
   )

diff --git a/examples/api-routes-apollo-server-and-client-auth/pages/about.js b/examples/api-routes-apollo-server-and-client-auth/pages/about.js
@@ -3,11 +3,7 @@ import Link from 'next/link'
 export default function About() {
   return (
     <div>
-      Welcome to the about page. Go to the{' '}
-      <Link href="/">
-        <a>Home</a>
-      </Link>{' '}
-      page.
+      Welcome to the about page. Go to the <Link href="/">Home</Link> page.
     </div>
   )
 }
diff --git a/examples/api-routes-apollo-server-and-client-auth/pages/index.js b/examples/api-routes-apollo-server-and-client-auth/pages/index.js
@@ -32,14 +32,8 @@ const Index = () => {
   if (viewer) {
     return (
       <div>
-        You're signed in as {viewer.email} goto{' '}
-        <Link href="/about">
-          <a>about</a>
-        </Link>{' '}
-        page. or{' '}
-        <Link href="/signout">
-          <a>signout</a>
-        </Link>
+        You're signed in as {viewer.email} goto <Link href="/about">about</Link>{' '}
+        page. or <Link href="/signout">signout</Link>
       </div>
     )
   }

diff --git a/examples/api-routes-apollo-server-and-client-auth/pages/signin.js b/examples/api-routes-apollo-server-and-client-auth/pages/signin.js
@@ -65,9 +65,7 @@ function SignIn() {
           label="Password"
         />
         <button type="submit">Sign in</button> or{' '}
-        <Link href="/signup">
-          <a>Sign up</a>
-        </Link>
+        <Link href="/signup">Sign up</Link>
       </form>
     </>
   )

diff --git a/examples/api-routes-apollo-server-and-client-auth/pages/signup.js b/examples/api-routes-apollo-server-and-client-auth/pages/signup.js
@@ -60,9 +60,7 @@ function SignUp() {
           label="Password"
         />
         <button type="submit">Sign up</button> or{' '}
-        <Link href="/signin">
-          <a>Sign in</a>
-        </Link>
+        <Link href="/signin">Sign in</Link>
       </form>
     </>
   )

diff --git a/examples/api-routes-apollo-server-and-client/pages/about.js b/examples/api-routes-apollo-server-and-client/pages/about.js
@@ -3,11 +3,7 @@ import Link from 'next/link'
 export default function About() {
   return (
     <div>
-      This is a static page goto{' '}
-      <Link href="/">
-        <a>dynamic</a>
-      </Link>{' '}
-      page.
+      This is a static page goto <Link href="/">dynamic</Link> page.
     </div>
   )
 }
diff --git a/examples/api-routes-apollo-server-and-client/pages/index.js b/examples/api-routes-apollo-server-and-client/pages/index.js
@@ -21,10 +21,7 @@ const Index = () => {
   return (
     <div>
       You're signed in as {viewer.name} and you're {viewer.status} goto{' '}
-      <Link href="/about">
-        <a>static</a>
-      </Link>{' '}
-      page.
+      <Link href="/about">static</Link> page.
     </div>
   )
 }

diff --git a/examples/api-routes-apollo-server/pages/index.js b/examples/api-routes-apollo-server/pages/index.js
@@ -10,7 +10,7 @@ export default function UserListing({ users }) {
         {users.map((user) => (
           <li key={user.username}>
             <Link href="/[username]" as={`/${user.username}`}>
-              <a>{user.name}</a>
+              {user.name}
             </Link>
           </li>
         ))}

diff --git a/examples/api-routes-rest/pages/index.tsx b/examples/api-routes-rest/pages/index.tsx
@@ -14,7 +14,7 @@ export default function Index() {
     <ul>
       {data.map((user) => (
         <li key={user.id}>
-          <Link href="/user/[id]" as={`/user/${user.id}`}>
+          <Link href="/user/[id]" as={`/user/${user.id}`} legacyBehavior>
             {`User ${user.id}`}
           </Link>
         </li>

diff --git a/examples/api-routes/components/Person.tsx b/examples/api-routes/components/Person.tsx
@@ -9,7 +9,7 @@ export default function PersonComponent({ person }: PersonProps) {
   return (
     <li>
       <Link href="/person/[id]" as={`/person/${person.id}`}>
-        <a>{person.name}</a>
+        {person.name}
       </Link>
     </li>
   )

diff --git a/examples/auth0/components/header.tsx b/examples/auth0/components/header.tsx
@@ -11,30 +11,30 @@ const Header = ({ user, loading }: HeaderProps) => {
       <nav>
         <ul>
           <li>
-            <Link href="/">
+            <Link href="/" legacyBehavior>
               <a>Home</a>
             </Link>
           </li>
           <li>
-            <Link href="/about">
+            <Link href="/about" legacyBehavior>
               <a>About</a>
             </Link>
           </li>
           <li>
-            <Link href="/advanced/api-profile">
+            <Link href="/advanced/api-profile" legacyBehavior>
               <a>API rendered profile (advanced)</a>
             </Link>
           </li>
           {!loading &&
             (user ? (
               <>
                 <li>
-                  <Link href="/profile">
+                  <Link href="/profile" legacyBehavior>
                     <a>Client rendered profile</a>
                   </Link>
                 </li>
                 <li>
-                  <Link href="/advanced/ssr-profile">
+                  <Link href="/advanced/ssr-profile" legacyBehavior>
                     <a>Server rendered profile (advanced)</a>
                   </Link>
                 </li>

diff --git a/examples/basic-export/pages/index.tsx b/examples/basic-export/pages/index.tsx
@@ -3,10 +3,7 @@ import Link from 'next/link'
 const Home = () => {
   return (
     <div>
-      Hello World.{' '}
-      <Link href="/about">
-        <a>About</a>
-      </Link>
+      Hello World. <Link href="/about">About</Link>
     </div>
   )
 }

diff --git a/examples/blog-starter/components/cover-image.tsx b/examples/blog-starter/components/cover-image.tsx
@@ -20,8 +20,8 @@ const CoverImage = ({ title, src, slug }: Props) => {
   return (
     <div className="sm:mx-0">
       {slug ? (
-        <Link as={`/posts/${slug}`} href="/posts/[slug]">
-          <a aria-label={title}>{image}</a>
+        <Link as={`/posts/${slug}`} href="/posts/[slug]" aria-label={title}>
+          {image}
         </Link>
       ) : (
         image

diff --git a/examples/blog-starter/components/header.tsx b/examples/blog-starter/components/header.tsx
@@ -3,8 +3,8 @@ import Link from 'next/link'
 const Header = () => {
   return (
     <h2 className="text-2xl md:text-4xl font-bold tracking-tight md:tracking-tighter leading-tight mb-20 mt-8">
-      <Link href="/">
-        <a className="hover:underline">Blog</a>
+      <Link href="/" className="hover:underline">
+        Blog
       </Link>
       .
     </h2>

diff --git a/examples/blog-starter/components/hero-post.tsx b/examples/blog-starter/components/hero-post.tsx
@@ -29,8 +29,12 @@ const HeroPost = ({
       <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-5xl leading-tight">
-            <Link as={`/posts/${slug}`} href="/posts/[slug]">
-              <a className="hover:underline">{title}</a>
+            <Link
+              as={`/posts/${slug}`}
+              href="/posts/[slug]"
+              className="hover:underline"
+            >
+              {title}
             </Link>
           </h3>
           <div className="mb-4 md:mb-0 text-lg">

diff --git a/examples/blog-starter/components/post-preview.tsx b/examples/blog-starter/components/post-preview.tsx
@@ -27,8 +27,12 @@ const PostPreview = ({
         <CoverImage slug={slug} title={title} src={coverImage} />
       </div>
       <h3 className="text-3xl mb-3 leading-snug">
-        <Link as={`/posts/${slug}`} href="/posts/[slug]">
-          <a className="hover:underline">{title}</a>
+        <Link
+          as={`/posts/${slug}`}
+          href="/posts/[slug]"
+          className="hover:underline"
+        >
+          {title}
         </Link>
       </h3>
       <div className="text-lg mb-4">

diff --git a/examples/blog-with-comment/pages/posts/index.tsx b/examples/blog-with-comment/pages/posts/index.tsx
@@ -12,8 +12,12 @@ export default function NotePage({
       {allPosts.length ? (
         allPosts.map((post) => (
           <article key={post.slug} className="mb-10">
-            <Link as={`/posts/${post.slug}`} href="/posts/[slug]">
-              <a className="text-lg leading-6 font-bold">{post.title}</a>
+            <Link
+              as={`/posts/${post.slug}`}
+              href="/posts/[slug]"
+              className="text-lg leading-6 font-bold"
+            >
+              {post.title}
             </Link>
             <p>{post.excerpt}</p>
             <div className="text-gray-400">

diff --git a/examples/cms-agilitycms/components/cover-image.tsx b/examples/cms-agilitycms/components/cover-image.tsx
@@ -16,8 +16,8 @@ export default function CoverImage({ title, responsiveImage, slug = null }) {
   return (
     <div className="sm:mx-0">
       {slug ? (
-        <Link href={`/posts/${slug}`}>
-          <a aria-label={title}>{image}</a>
+        <Link href={`/posts/${slug}`} aria-label={title}>
+          {image}
         </Link>
       ) : (
         image

diff --git a/examples/cms-agilitycms/components/header.tsx b/examples/cms-agilitycms/components/header.tsx
@@ -3,8 +3,8 @@ import Link from 'next/link'
 export default function Header() {
   return (
     <h2 className="text-2xl md:text-4xl font-bold tracking-tight md:tracking-tighter leading-tight mb-20 mt-8">
-      <Link href="/">
-        <a className="hover:underline">Blog</a>
+      <Link href="/" className="hover:underline">
+        Blog
       </Link>
       .
     </h2>

diff --git a/examples/cms-agilitycms/components/hero-post.tsx b/examples/cms-agilitycms/components/hero-post.tsx
@@ -23,8 +23,8 @@ export default function HeroPost({
       <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
-            <Link href={`/posts/${slug}`}>
-              <a className="hover:underline">{title}</a>
+            <Link href={`/posts/${slug}`} className="hover:underline">
+              {title}
             </Link>
           </h3>
           <div className="mb-4 md:mb-0 text-lg">

diff --git a/examples/cms-agilitycms/components/post-preview.tsx b/examples/cms-agilitycms/components/post-preview.tsx
@@ -21,8 +21,8 @@ export default function PostPreview({
         />
       </div>
       <h3 className="text-3xl mb-3 leading-snug">
-        <Link href={`/posts/${slug}`}>
-          <a className="hover:underline">{title}</a>
+        <Link href={`/posts/${slug}`} className="hover:underline">
+          {title}
         </Link>
       </h3>
       <div className="text-lg mb-4">

diff --git a/examples/cms-builder-io/components/cover-image.js b/examples/cms-builder-io/components/cover-image.js
@@ -18,8 +18,8 @@ export default function CoverImage({ title, url, slug }) {
   return (
     <div className="sm:mx-0">
       {slug ? (
-        <Link href={`/posts/${slug}`}>
-          <a aria-label={title}>{image}</a>
+        <Link href={`/posts/${slug}`} aria-label={title}>
+          {image}
         </Link>
       ) : (
         image

diff --git a/examples/cms-builder-io/components/header.js b/examples/cms-builder-io/components/header.js
@@ -3,8 +3,8 @@ import Link from 'next/link'
 export default function Header() {
   return (
     <h2 className="text-2xl md:text-4xl font-bold tracking-tight md:tracking-tighter leading-tight mb-20 mt-8">
-      <Link href="/">
-        <a className="hover:underline">Blog</a>
+      <Link href="/" className="hover:underline">
+        Blog
       </Link>
       .
     </h2>

diff --git a/examples/cms-builder-io/components/hero-post.js b/examples/cms-builder-io/components/hero-post.js
@@ -19,8 +19,8 @@ export default function HeroPost({
       <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
-            <Link href={`/posts/${slug}`}>
-              <a className="hover:underline">{title}</a>
+            <Link href={`/posts/${slug}`} className="hover:underline">
+              {title}
             </Link>
           </h3>
           <div className="mb-4 md:mb-0 text-lg">

diff --git a/examples/cms-builder-io/components/post-preview.js b/examples/cms-builder-io/components/post-preview.js
@@ -17,8 +17,8 @@ export default function PostPreview({
         <CoverImage title={title} slug={slug} url={coverImage} />
       </div>
       <h3 className="text-3xl mb-3 leading-snug">
-        <Link href={`/posts/${slug}`}>
-          <a className="hover:underline">{title}</a>
+        <Link href={`/posts/${slug}`} className="hover:underline">
+          {title}
         </Link>
       </h3>
       <div className="text-lg mb-4">

diff --git a/examples/cms-buttercms/components/blog/blog.js b/examples/cms-buttercms/components/blog/blog.js
@@ -15,8 +15,8 @@ export default function Blog({ posts }) {
                 simple to launch a new company blog.
               </p>
               <p>
-                <Link href={`/blog`}>
-                  <a className="main-btn btn-hover mt-5">View All Blog Posts</a>
+                <Link href={`/blog`} className="main-btn btn-hover mt-5">
+                  View All Blog Posts
                 </Link>
               </p>
             </div>

diff --git a/examples/cms-buttercms/components/blog/categories-widget.js b/examples/cms-buttercms/components/blog/categories-widget.js
@@ -8,7 +8,7 @@ export default function CategoriesWidget({ categories }) {
         {categories.map((category) => (
           <li key={category.slug}>
             <Link href={`/blog/category/${category.slug}`}>
-              <a>{category.name}</a>
+              {category.name}
             </Link>
           </li>
         ))}

diff --git a/examples/cms-buttercms/components/blog/post-preview-condensed.js b/examples/cms-buttercms/components/blog/post-preview-condensed.js
@@ -23,15 +23,13 @@ export default function PostPreviewCondensed({
         )}
         <div className="blog-body">
           <h5 className="package-name">
-            <Link href={`/blog/${slug}`}>
-              <a>{title}</a>
-            </Link>
+            <Link href={`/blog/${slug}`}>{title}</Link>
           </h5>
           <p>{excerpt}</p>
         </div>
         <div className="blog-footer">
-          <Link href={`/blog/${slug}`}>
-            <a className="main-btn btn-hover">Read More</a>
+          <Link href={`/blog/${slug}`} className="main-btn btn-hover">
+            Read More
           </Link>
         </div>
       </div>

diff --git a/examples/cms-buttercms/components/blog/post-preview.js b/examples/cms-buttercms/components/blog/post-preview.js
@@ -19,9 +19,7 @@ export default function PostsPreview({
       <div className="blog-roll-card">
         <div className="blog-roll-card-meta">
           <h2 className="blog-roll-card-header">
-            <Link href={`/blog/${slug}`}>
-              <a>{title}</a>
-            </Link>
+            <Link href={`/blog/${slug}`}>{title}</Link>
           </h2>
           <ul className="blog-roll-card-meta-info">
             <li>
@@ -34,9 +32,7 @@ export default function PostsPreview({
             {tags.map((tag) => (
               <li key={tag.slug}>
                 <Link href={`/blog/tag/${tag.slug}`}>
-                  <a>
-                    <i className="lni lni-tag"></i> {tag.name}
-                  </a>
+                  <i className="lni lni-tag"></i> {tag.name}
                 </Link>
               </li>
             ))}
@@ -57,8 +53,8 @@ export default function PostsPreview({
           dangerouslySetInnerHTML={{ __html: excerpt }}
         ></div>
         <div className="blog-roll-card-footer text-center">
-          <Link href={`/blog/${slug}`}>
-            <a className="main-btn btn-hover">Read More</a>
+          <Link href={`/blog/${slug}`} className="main-btn btn-hover">
+            Read More
           </Link>
         </div>
       </div>