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

Photo by Lautaro Andreani on Unsplash

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

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

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