appディレクトリを使わないNest.js13に移行した時に遭遇したエラー

結論

1. <Link> コンポーネント内の <a> を消す
2. 画像が崩壊した箇所は <Image> のimport先を 'next/legacy/image' に変える
3. router.pathname を使用している箇所を、usePathname に置き換える

Next.js v13にアップデート

npm install next@latest react@latest react-dom@latest eslint-config-next@latest
# or
yarn add next@latest react@latest react-dom@latest eslint-config-next@latest
# or
pnpm update next@latest react@latest react-dom@latest eslint-config-next@latest

npm install -D eslint-config-next@latest
# or
yarn add -D eslint-config-next@latest

問題①エラー

原因

<Link>コンポーネント内で、<a>を使用していた

<Link href='/'>
  <a>戻る</a>
</Link>

<div>でクッションを入れてもエラーが出るので注意

<Link href='/'>
  <div>
    <a>戻る</a>
  </div>
</Link>

解決方法

<a>を使わない

<Link href='/'>
  戻る
</Link>

<Link href='/'>
  <div>
    戻る
  </div>
</Link>

問題②画像のレイアウトの崩壊

原因

Next.jsのv12と13で、<Image>の使用が変わった

解決方法

Next.js v12の<Image>を使用する

-    import Image from 'next/image'
+    import Image from 'next/legacy/image'

無事に直ったが放置するわけにはいかないので、時間がある時にv13の<Image>に対応させたい

その他

useRouter を置き換える

-    import { useRouter } from 'next/router';
+    import { useRouter, usePathname, useSearchParams } from 'next/navigation';

export const Sample: FC = () => {
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();

// パスの受け取り方
-    console.log(router.pathname);
+    console.log(pathname);

// クエリパラメータの受け取り方
-    console.log(router.query.id);
+    console.log(searchParams.get("id"));

  const changePage = () => {
     router.push('/')
  }

  return (
-    {router.pathname !== '/create' && <p>作成する</p>}
+    {pathname !== '/create' && <p>作成する</p>}
  )
}

終わり

他に変更するべき箇所や、おかしい所がありましたらコメントください！