Loox Uと初音ミクで行こう！

NextJS を 13.5 に上げたら、Netlify で API Routes が使えなくなった 基本的に、NextJS をフレームワークとして使う場合は Vercel を使っていれば、変なトラブルに巻き込まれる事はないのだが、今回 netlify で作っていたアプリがコケたので、その知見を書き記したい。 事象 API Routes が全く動作しなくなった。エラーとしては 502 (Bad Gateway) が出ているが、実際にログを精査すると、 Runtime.ImportModuleError: Error: Cannot find module 'styled-jsx/style' というエラーが出ている事が分かった。 検索結果 Runtime.ImportModuleError: Error: Cannot find module 'styled-jsx' - Nextjs + NextAuth - #2 by hrishikesh この記事を見ると、@netlify/plugin-nextjs の 4.38.0 以上を入れろとなっている。だが、これをやっても駄目だった。 最終的な解決策 色々試して、NextJS の 13.5 以上は現在 netlify で API Routes が使えない事が分かったので、 NextJS をダウングレード して対応した。 最近、自分は bun を愛用しているので、 bun add [email protected] を実行して、package.json の中身を更新するだけで良かった。 完走した感想 ぬわああああん疲れたもおおおおん。 コイツいつも疲れてんな。 正直今回のバグはエグくて、いわゆる環境バグ。 おま環と言われても仕方がないレベルなので、再現性はもちろん、解決方法も簡単には見つからない。 今回、泣く泣くダウングレードという策を採用したが、もう少し深い所での解決を出来るようになりたい。

Next.js 13 以降で PWA を有効にするその2 多分、その内 next-pwa が対応するので、待ってれば大丈夫だと思うが、どうしても今すぐに対応したい人用のパッチコード。 バージョンは、 next ^13.4.2 next-pwa ^5.6.0 となっている。 修正するファイルは、next.config.js next.config.js /** @type {import('next').NextConfig} */ const path = require("path"); const isDev = process.env.NODE_ENV !== "production"; const withPWA = require("next-pwa")({ dest: "public", disable: isDev, buildExcludes: ["app-build-manifest.json"], }); const generateAppDirEntry = (entry) => { const packagePath = require.resolve("next-pwa"); const packageDirectory = path.dirname(packagePath); const registerJs = path.join(packageDirectory, "register.js"); return entry().then((entries) => { // Register SW on App directory, solution: https://github.com/shadowwalker/next-pwa/pull/427 if (entries["main-app"] && !entries["main-app"].includes(registerJs)) { ...

Next.js 13 以降で PWA を有効にする 2023/5/28追記： さらに良い設定を、新しい記事に書いたので、そちらを参照の事。 多分、その内 next-pwa が対応するので、待ってれば大丈夫だと思うが、どうしても今すぐに対応したい人用のパッチコード。 バージョンは、 next ^13.4.2 next-pwa ^5.6.0 となっている。 修正するファイルは、next.config.js next.config.js /** @type {import('next').NextConfig} */ const path = require("path"); const isDev = process.env.NODE_ENV !== "production"; const withPWA = require("next-pwa")({ dest: "public", disable: isDev, exclude: [ // add buildExcludes here ({ asset, compilation }) => { if ( asset.name.startsWith("server/") || asset.name.match( /^((app-|^)build-manifest\.json|react-loadable-manifest\.json)$/ ) ) { return true; } if (isDev && !asset.name.startsWith("static/runtime/")) { return true; } return false...

Next.js でのハマりどころ 自分用メモの羅列 firebase用の.envファイルのパラメータ命名 NEXT_PUBLIC_FIREBASE_API_KEY="" NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="" NEXT_PUBLIC_FIREBASE_PROJECT_ID="" NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET="" NEXT_PUBLIC_FIREBASE_MESSAGE_SENDER_ID="" NEXT_PUBLIC_FIREBASE_APP_ID="" NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID="" 先頭のprefixに必ず NEXT_PUBLIC_ をつける事。これをつけないと、Next.js内で参照する事ができない。 process.env.～でアクセスするコードを書くと分かるが、コマンド実行しているコンソール内にはきちんと設定した環境変数が出力されるが、ブラウザのコンソール内にはundefinedが出てくる。 こういう謎のprefixをつけなきゃ見えないみたいな処理が入ってるのは、フレームワークあるあるの罠である。 ロード時間に死ぬほど時間が掛かる プロジェクトに recharts を追加してからyarn devしたら、読み込みに死ぬほど時間が掛かるようになった。 具体的には、1.8Mのjsファイルを読み込むのに1分ちょい掛かるというありえない開発体験をする事に。 「nextjs development loading very slow」みたいなキーワードで検索すると、検索トップに Super slow page load times in development environment みたいなgithub discussionページが引っかかった。 これをばーっと眺めていると、どうやらGoogle ChromeのPWA用キャッシュをクリアすると早くなるらしい。 半信半疑で、Application→Application→Storage→Clear site dataをクリックしたら、見事にロード時間が改善...