Merge branch 'ts-link-type' of https://github.com/sukkaw/next.js into…

… ts-link-type
vercel · Nov 1, 2022 · 590c17b · 590c17b
2 parents fe5b6a9 + d0987a4
commit 590c17b
Show file tree

Hide file tree

Showing 343 changed files with 3,525 additions and 1,632 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -10,7 +10,7 @@
       "request": "launch",
       "cwd": "${workspaceFolder}",
       "runtimeExecutable": "pnpm",
-      "runtimeArgs": ["debug-react-exp", "dev", "test/e2e/app-dir/app"],
+      "runtimeArgs": ["debug", "dev", "test/e2e/app-dir/app"],
       "skipFiles": ["<node_internals>/**"],
       "env": {
         "NEXT_PRIVATE_LOCAL_WEBPACK": "1"

diff --git a/contributing/core/building.md b/contributing/core/building.md
@@ -6,7 +6,7 @@ You can build Next.js, including all type definitions and packages, with:
 pnpm build
 ```
 
-By default, the latest canary of the `next-swc` binaries will be installed and used. If you are actively working on Rust code or you need to test out the most recent Rust code that hasn't been published as a canary yet you can [install Rust](https://www.rust-lang.org/tools/install) and run `pnpm --filter=@next/swc build-native`.
+By default, the latest canary of the `next-swc` binaries will be installed and used. If you are actively working on Rust code or you need to test out the most recent Rust code that hasn't been published as a canary yet, you can [install Rust](https://www.rust-lang.org/tools/install) and run `pnpm --filter=@next/swc build-native`.
 
 If you want to test out the wasm build locally, you will need to [install wasm-pack](https://rustwasm.github.io/wasm-pack/installer/). Run `pnpm --filter=@next/swc build-wasm --target <wasm_target>` to build and `node ./scripts/setup-wasm.mjs` to copy it into your `node_modules`. Run next with `NODE_OPTIONS='--no-addons'` to force it to use the wasm binary.
 

diff --git a/contributing/docs/adding-documentation.md b/contributing/docs/adding-documentation.md
@@ -1,10 +1,10 @@
 # Updating Documentation Paths
 
-Our documentation currently leverages a [manifest file](/docs/manifest.json) which is how documentation entries are checked.
+Our documentation currently leverages a [manifest file](/docs/manifest.json), which is how documentation entries are checked.
 
 When adding a new entry under an existing category you only need to add an entry with `{title: '', path: '/docs/path/to/file.md'}`. The "title" is what is shown on the sidebar.
 
-When moving the location/url of an entry the "title" field can be removed from the existing entry and the ".md" extension removed from the "path", then a "redirect" field with the shape of `{permanent: true/false, destination: '/some-url'}` can be added. A new entry should be added with the "title" and "path" fields if the document was renamed within the [`docs` folder](/docs) that points to the new location in the folder e.g. `/docs/some-url.md`
+When moving the location/url of an entry, the "title" field can be removed from the existing entry and the ".md" extension removed from the "path", then a "redirect" field with the shape of `{permanent: true/false, destination: '/some-url'}` can be added. A new entry should be added with the "title" and "path" fields if the document is renamed within the [`docs` folder](/docs) that points to the new location in the folder, e.g. `/docs/some-url.md`
 
 Example of moving documentation file:
 

diff --git a/contributing/examples/adding-examples.md b/contributing/examples/adding-examples.md
@@ -22,7 +22,7 @@ Also, don’t forget to add a `README.md` file with the following format:
 - Omit the `name` and `version` fields from your `package.json`.
 - Ensure all your dependencies are up to date.
 - Ensure you’re using [`next/image`](https://nextjs.org/docs/api-reference/next/image).
-- To add additional installation instructions, please add it where appropriate.
+- To add additional installation instructions, please add them where appropriate.
 - To add additional notes, add `## Notes` section at the end.
 - Remove the `Deploy your own` section if your example can’t be immediately deployed to Vercel.
 

diff --git a/docs/advanced-features/middleware.md b/docs/advanced-features/middleware.md
@@ -167,9 +167,9 @@ export function middleware(request: NextRequest) {
   const allCookies = request.cookies.getAll()
   console.log(allCookies) // => [{ name: 'vercel', value: 'fast' }]
 
-  response.cookies.has('nextjs') // => true
-  response.cookies.delete('nextjs')
-  response.cookies.has('nextjs') // => false
+  request.cookies.has('nextjs') // => true
+  request.cookies.delete('nextjs')
+  request.cookies.has('nextjs') // => false
 
   // Setting cookies on the response using the `ResponseCookies` API
   const response = NextResponse.next()

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