Updated my Next.js project to v13 Part3: <Link>, “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

Blog

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

Yuko

component update

“use client”

Join Our Newsletter. No Spam, Only the good stuff.

Related