yarn buildしたら、エラーが出る
目次
yarn dev では…
NextJS と TailWindCSS でブログを作っているんですが、ある程度形になったので build してみようか…と
で、yarn build してみたら、エラーが…
yarn dev ではエラーは出なかったのに、何故？
Page Without Valid React Component
Build optimization failed: found page without a React Component as default export in
pages/lib/api
See https://nextjs.org/docs/messages/page-without-valid-component for more info.
エラーを見ると、pages フォルダ以下にある lib フォルダ内の api ファイルに問題があるっぽい。
まずはこのページを見てねと書かれているリンク先を、確認してみる。
If the file is not meant to be a page, and instead, is a shared component or file, move the file to a different folder like components or lib.
これが原因っぽい。そもそも何で pages フォルダ以下に lib フォルダを配置したのかも、意味不明ですね。
lib フォルダを components フォルダと同一階層に移動させたら、このエラーは消えました。
next-sitemap
サイトマップを作成しようかと思い、以下を導入してみました。
いくつか記事を読んでみたところ、next-sitemap.js ファイルを作成し、それに必要な項目を記入し、build すれば OK っぽい。
で、ビルドしてみたら…
Unable to find next-sitemap.config.js or custom config file.
IMPORTANT: Default config file has been renamed to `next-sitemap.config.js`
If you are using custom config file, make sure to invoke `next-sitemap --config <custom-config-file>.js`
node:internal/process/promises:246
triggerUncaughtException(err, true /* fromPromise */);
どうやら、ファイル名が駄目っぽい。
next-sitemap.js から、next-sitemap.config.js に変更し、再度ビルドしてみると…
今度は問題なく、ビルド出来ました。
feed
これは yarn build の際ではなく、yarn dev の際にエラーになったものですが…
こちらを使って feed を作成してみたんですが、markdown ファイルをパースするには、marked もインストールするようなので、こちらもインストール。
import marked from "marked"
（略）
content: marked(post.content),
いくつかの記事を参考に、こんな感じでコードを作成し、yarn dev してみたところ…
TypeError: (0 , marked__WEBPACK_IMPORTED_MODULE_3__.default) is not a function
怒られました。
marked のコードを見てみると…
//export default function じゃない…
export function marked(src: string, options?: marked.MarkedOptions): string;
そりゃエラー出るよねってことで…
import { marked } from "marked";
コードを修正し、yarn dev してみると、エラーは出ませんでした。
上記ページの Node.js の箇所を見てみると、{ marked }になっていました。
Vercel にデプロイ？
NextJS は、Vercel にデプロイするのが、いいんですかね？
個人利用ならお金も掛からないっぽいし、とりあえず使ってみるのもアリなのかも？
それとも契約しているサーバ上で動かそうかなぁ…