From 7852586ee69e400125a68b2009811f3d0c722d21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Sat, 12 Oct 2024 10:52:26 +0900
Subject: [PATCH] docs(javascript): fix wrong javascript code and a typo in
 `link.mdx` (#71143)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 📚 Improving Documentation

Hello, I've fixed some incorrect javascript code and a typo in
[`link.mdx`](https://nextjs.org/docs/app/api-reference/components/link).

I made a few changes:

~~### 1. Changed `app/blog/page` to `app/blog/[slug]/page`~~

~~I believe it is accurate to include `[slug]` in the path.~~

### 2.  Added `export default`

The code block was missing `export default`, so I added it.

### 3. Corrected missing punctuation

### 4. Added `'use client`'

I think it is appropriate to add `'use client'` because the component
uses a client-side hook (`useIsAuthed`) that relies on client state,
which requires the component to be rendered on the client side.

---------

Co-authored-by: JJ Kasper <jj@jjsweb.site>
---
 .../02-app/02-api-reference/01-components/link.mdx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/docs/02-app/02-api-reference/01-components/link.mdx b/docs/02-app/02-api-reference/01-components/link.mdx
index e2fbf2fe7a79a..88d19e4ca3eba 100644
--- a/docs/02-app/02-api-reference/01-components/link.mdx
+++ b/docs/02-app/02-api-reference/01-components/link.mdx
@@ -648,7 +648,7 @@ For example, you can generate a list of links to the dynamic route `app/blog/[sl
 ```tsx filename="app/blog/page.tsx" switcher
 import Link from 'next/link'
 
-function Page({ posts }) {
+export default function Page({ posts }) {
   return (
     <ul>
       {posts.map((post) => (
@@ -664,7 +664,7 @@ function Page({ posts }) {
 ```jsx filename="app/blog/page.js" switcher
 import Link from 'next/link'
 
-function Page({ posts }) {
+export default function Page({ posts }) {
   return (
     <ul>
       {posts.map((post) => (
@@ -734,7 +734,7 @@ export default NavLink
 ```
 
 - If you’re using [emotion](https://emotion.sh/)’s JSX pragma feature (`@jsx jsx`), you must use `passHref` even if you use an `<a>` tag directly.
-- The component should support `onClick` property to trigger navigation correctly
+- The component should support `onClick` property to trigger navigation correctly.
 
 ### Nesting a functional component
 
@@ -1125,6 +1125,8 @@ In this case, you would want to use the following code in your `<Link />` compon
 <AppOnly>
 
 ```tsx filename="app/page.tsx" switcher
+'use client'
+
 import Link from 'next/link'
 import useIsAuthed from './hooks/useIsAuthed' // Your auth hook
 
@@ -1140,6 +1142,8 @@ export default function Page() {
 ```
 
 ```js filename="app/page.js" switcher
+'use client'
+
 import Link from 'next/link'
 import useIsAuthed from './hooks/useIsAuthed' // Your auth hook
 
@@ -1159,6 +1163,8 @@ export default function Page() {
 <PagesOnly>
 
 ```tsx filename="pages/index.tsx" switcher
+'use client'
+
 import Link from 'next/link'
 import useIsAuthed from './hooks/useIsAuthed' // Your auth hook
 
@@ -1174,6 +1180,8 @@ export default function Home() {
 ```
 
 ```js filename="pages/index.js" switcher
+'use client'
+
 import Link from 'next/link'
 import useIsAuthed from './hooks/useIsAuthed' // Your auth hook