題名のとおりです。
当サイトでNext.jsを15に上げたところ、Vercelにデプロイした際にServerless Functionがタイムアウトするようになりました。
作業ログを適当に文章化してあるだけなので、参考になるかはわかりませんが、一応残しておきます。
現象
- Vercelにデプロイした際に、以下のようなエラーが発生
Client Error: Connection timeout
- ローカルでの開発時には問題なく動作
- ローカルでもMarkdownのJSX変換時にちょっと重たい
バージョン
next: 15.0.3
shiki: 0.11.1
@shikijs/rehype: 1.22.2
remark: 15.0.1
remark-breaks: 4.0.0
remark-gfm: 4.0.0
remark-rehype: 11.1.1
rehype-raw: 7.0.0
rehype-stringify: 10.0.1
原因
結論から言うと、rehype-Shikiを使っていることが原因でした。
rehype-Shikiは、Markdownのコードブロックをシンタックスハイライトするためのライブラリで、なんとなくで選定していました。
正直そんなに原因特定してないですが、rehype-Shikiを使っていると、Serverless Functionがタイムアウトするようになりました。
export const markdownToHTML = async (mdContent: string) => {
const returnHtml = await remark()
.use(remarkGfm)
.use(remarkBreaks)
.use(remarkRehype, {
allowDangerousHtml: true,
})
.use(rehypeRaw)
.use(rehypeShiki, {
themes: {
light: 'vitesse-light',
dark: 'vitesse-dark',
},
})
.use(rehypeStringify)
.process(mdContent);
return returnHtml.toString();
}
対応
とりあえず、rehype-Shikiを使わないようにしました。
rehype-pretty-codeだと動いたので、まあ相性問題ですかね。時間があればコントリビューションしようかな。
rehype-highlightに乗り換えたらなんかうまく行ってるので様子見。
export const markdownToHTML = async (mdContent: string) => {
const returnHtml = await remark()
.use(remarkGfm)
.use(remarkBreaks)
.use(remarkRehype, {
allowDangerousHtml: true,
})
.use(rehypeHighlight)
.use(rehypeRaw)
.use(rehypeStringify)
.process(mdContent);
return returnHtml.toString();
}
こんな感じになりました。