Updated my Next.js project to v13 Part2: Hooks for App Router

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

useRouter, usePathname, and useSearchParam are available from next/navigation. This useRouter behaves differently from the same name hook from next/router. withRouter is also not available for App router.
From Pages to App

useRouter

    // Before
    import { useRouter } from "next/router";

    // After
    import { useRouter } from "next/navigation";

withRouter

You can use each hook depending on what you need.

For example, I used usePathname instead of router.query provided from withRouter.

    // Before

    import { withRouter } from "next/router";

    const CategoryPage = ({ router }) => {
      ...skip

      const categoryObject = list.filter(
        (category) => category.path === router.query.category
      )[0];
      ... rest
    };

    export default withRouter(CategoryPage);

    // After

    import usePathnameArray from "../../../client/hooks/use-pathname-array";


    const CategoryPage = () => {
     const pathnameArray = usePathnameArray();
      ...skip

      const categoryObject = categories.filter(
        (category) => category.path === pathnameArray[2]
      )[0];
      ...rest
    };

    export default CategoryPage;

    "use client";
    import { usePathname } from "next/navigation";
    /**
     * return pathnames split with /
     * e.g /shop/womens-clothing => ["", "shop", "womens-clothing"]
     * @returns {string[]}
     */
    const usePathnameArray = () => {
      const pathname = usePathname();
      return pathname.split("/");
    };

    export default usePathnameArray;

original article is here

Blog

Updated my Next.js project to v13 Part2: Hooks for App Router

Yuko

useRouter

withRouter

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

Related