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
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-JSuseRouter, usePathname, useSearchParam, redirect from next/navigation
useSession , getSession from next-auth/react
original article is here
Top comments (2)
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.
Thank you for reading and suggestion!