Updated my Next.js project to v13 Part3: <Link>, “use client”
Tags: nextjs, react
Published: 2023-05-28 07:50:43

This is a series of my memo from when I migrated Next.js v13 into my project with the article [From Pages to App](https://nextjs.org/docs/pages/building-your-application/upgrading/app-router-migration#migrating-_documentjs-and-_appjs). I also updated other packages’ versions.

[Part1: Migrated app router from page router](https://medium.com/@lada496/updated-my-next-js-project-to-v13-part1-migrated-app-router-27c3ce172bba)

[Part2: Migrated router API](https://medium.com/@lada496/updated-my-next-js-project-to-v13-part2-hooks-for-app-router-38a82a8e5b0)

**Part3: Applied some other Next.js v13 updates**

[Optional: Updated NextAuth from v3 to v4](https://medium.com/@lada496/updated-nextauth-from-v3-to-v4-4210f2b994e3)

[Optional: Updated Redux from classical Redux to Redux Toolkit Query](https://medium.com/@lada496/optimistic-updates-with-rtk-query-4770698de6c1)

## <Link> component update

<Link> component doesn’t require adding a <a> tag as a child anymore. This behavior had been experimental since version 12.2 and now is the default ([<Link> Component](https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#link-component))
```javascript
    // v12
    <Link href="/path">
      <a>Path</a>
    </Link>
    
    // v13
    <Link href="/path">Path</Link>
```
An example from my project.
```javascript
    // Before
    // at shop-list.jsx
    <Link href={`/shop/${category.path}`}>
      <LinkContainer>view more</LinkContainer>
    </Link>
    
    // at shop-list.styles.js
    export const LinkContainer = styled.a`
      display: block;
      color: black;
      text-transform: uppercase;
      width: fit-content;
      margin: auto;
      padding: 1rem 1.5rem 0.8rem 1.5rem;
      border: 1px black solid;
      border-radius: 5px;
      margin-bottom: 6rem;
      &:hover {
        color: black;
        cursor: pointer;
      }
    `;
```
```javascript
    // After
    // at shop-list.jsx
    <LinkContainer href={`/shop/${category.path}`}>view more</LinkContainer>
    
    // at shop-list.styles.js
    export const LinkContainer = styled(Link)`
      display: block;
      color: black;
      text-transform: uppercase;
      width: fit-content;
      margin: auto;
      padding: 1rem 1.5rem 0.8rem 1.5rem;
      border: 1px black solid;
      border-radius: 5px;
      margin-bottom: 6rem;
      &:hover {
        color: black;
        cursor: pointer;
      }
    `;
```
## “use client”

“use client” allows us to use hooks/components which are only available on the client side ([The “use client” directive](https://nextjs.org/docs/getting-started/react-essentials#the-use-client-directive)).

Examples of those require “use client”

* React hooks, such as useState, useEffect, useContext

* Redux hooks, such as useSelector, useDispatch

* s̵t̵y̵l̵e̵d̵-̵c̵o̵m̵p̵o̵n̵e̵n̵t̵s̵ ̵u̵t̵i̵l̵s̵ ̵s̵u̵c̵h̵ ̵a̵s̵ ̵s̵t̵y̵l̵e̵d̵ ̵,̵ ̵c̵s̵s̵ I found a hack to use styled component wish sever components
[**CSS-in-JS**](https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components)

* useRouter, usePathname, useSearchParam, redirect from next/navigation

* useSession , getSession from next-auth/react

original article is [here](https://medium.com/@lada496/updated-my-next-js-project-to-v13-part2-link-use-client-3f5e17d12b8f)