💭

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

2022/11/27に公開約2,000字

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

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

はじめに

基本的には、ここを見ながらやってます。
https://beta.nextjs.org/docs/upgrade-guide

ページの書き方

ここ見て大体理解
https://beta.nextjs.org/docs/upgrade-guide#step-6-migrating-data-fetching-methods
getServerSidePropsgetStaticPropsで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'

https://github.com/jsdom/jsdom/issues/3042
似たような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見つけた。
https://github.com/vercel/next.js/issues/43077

tailwindが一部反映されない

これを忘れてただけ。
https://beta.nextjs.org/docs/upgrade-guide#tailwind-css

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

'use client'

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

Discussion

ログインするとコメントできます