💭

Next.js 13のApp Directoryに移行したときに遭遇したエラーたち

2022/11/27に公開

こんにちは。
Next.jsでMarkdownブログサイトを作っているのですが、Next.js 13のApp Directoryに移行してみました。
ただ移行しただけなので、新機能とかは試してないです。遭遇したエラーをメインに書いていきたいと思います。
随時更新していく予定です。現在のversionは13.0.5です。（最終更新日: 2022.11.28）
デプロイ先はvercelです。

ざっと書いた雰囲気だと「ServerSideとClientSideのどちらでレンダリングされてるのか？」ということをより意識する必要がある印象を受けますね。新機能も試してみたいです。

はじめに

基本的には、ここを見ながらやってます。

ページの書き方

ここ見て大体理解

getServerSidePropsとgetStaticPropsでSSR, SSGを分けてたけど、fetchのオプションで分けることになった？
ちなみに今回移行したサイトは、検索機能以外はすべてSSG。外部APIを使ってないのでfetchも使っていない。

// SSG （force-cacheがdefault）
fetch(URL, { cache: 'force-cache' });

// SSR
fetch(URL, { cache: 'no-store' });

// ISR （使ったことがないからよくわからない）
fetch(URL, { next: { revalidate: 10 } });

typescriptの型付け（まだ実施してない）

とにかく移行を最優先させたかったので、typescriptの型付けを結構外しました。
また、つけ直していきたいと思います。

★todo: NextPageとかってそのまま？？（↑のupgrade-guideとか見ても、コード例に型が付いていないから調べないと）

遭遇したエラー達

結構エラーが出てきたので、解決していきました。

jsdomでcanvasが。。。

JSDOMをサーバーサイドで使っているのですが、以下エラーが出るように。。。

/node_modules/jsdom/lib/jsdom/utils.js:156:2 Module not found: Can't resolve 'canvas'

似たようなissueがあった。
next.config.jsに追加設定して解決

next.config.js

const webpack = require('webpack')

const config = {
  webpack: (config) => {
    config.plugins = [
      ...config.plugins,
      new webpack.IgnorePlugin({
        resourceRegExp: /canvas/,
        contextRegExp: /jsdom$/,
      }),
    ]
    return config
  }
}

vercelでsearchParamsが取れない？（未解決）

記事の検索機能でクエリを使っている。searchParamsで取れるはずだが、vercel環境で取れない。（ローカルでは取れる）

export default function Page({ params, searchParams }) {
  console.log(params, searchParams)
}

似たようなissue見つけた。

tailwindが一部反映されない

これを忘れてただけ。

markdownとかのコンポーネントが表示されない

'use client'

をつける
サーバーサイドでレンダリングされるserver componentsがデフォルトになったので、明示的にする必要が出てきたのかな？