Updated my Next.js project to v13 Part3: , “use client”

This is a series of my memo from when I migrated Next.js v13 into my project with the article From Pages to App. I also updated other packages’ versions.

Part1: Migrated app router from page router

Part2: Migrated router API

Part3: Applied some other Next.js v13 updates

Optional: Updated NextAuth from v3 to v4

Optional: Updated Redux from classical Redux to Redux Toolkit Query

component update

component doesn’t require adding a tag as a child anymore. This behavior had been experimental since version 12.2 and now is the default ( Component)

    // v12
    <Link href="/path">
      <a>Path</a>
    </Link>

    // v13
    <Link href="/path">Path</Link>

An example from my project.

    // 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;
      }
    `;

    // 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).

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

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

• useSession , getSession from next-auth/react

original article is here

Comments

[Victor Hazbun]

Thanks for sharing the use clases of "use client", this directive is poorly documented (today). I think you might want to consider a contribution on the Next.js repo to add some examples.

[Yuko]

Thank you for reading and suggestion!