#next.js
Next.js使用時にrecoil-persistのStorageを変更する
クライアント側で実行された場合のみstorageを指定するようにした
Next.jsで環境に応じて特定のページを非表示にする
NODE_ENVでredirectsを出し分けた
Next.jsで動的URLをRewriteする
next.config.jsにrewritesを追加
Next.js + typescriptでpathsのエイリアスがModule not foundになる
next.config.jsに追記する必要があった
Next.js + Algoliaで全文検索UIを実装する
react-instantsearchを利用
Next Link使用時にlazysizesでの画像更新ができない場合の対応方法
lazysizes attribute changeという公式プラグインを使う
Next.jsで生成したサイトで特定のページのみnoindexを設定する
タグに紐づく記事一覧ページはnoindexにした
Next.jsのローカル環境で「SharedArrayBuffer will require cross-origin isolation as of M92, around July 2021」警告が表示される
React v17.0.2にアップデートした
Next.jsでURLパラメータを受け取る際に初回レンダリングがundefinedになる
isReadyプロパティで回避
Next.js 10 + Tailwind CSS 2.0 でAMP対応(hybrid)を行う
next/ampのhybridモードを使い通常ページとAMPページを生成し、PostCSSでCSSの容量削減を行いinline cssとして埋め込み
Next.js on Firebase Hostingの際にページリロードすると404になる
trailingSlash設定を毎回忘れる
Next.jsプロジェクトのGoogle Analytics V3をV4に更新する
トラッキングIDの差し替えのみで対応が完了した
@tailwindcss/typographyにもダークモードを適用する
tailwind.config.jsにtypography設定を追加
Next.jsアプリケーションをPWA対応させる
next-pwaを使うとシンプルにPWA化できた
PWAアプリにクイックショートカットを追加する
manifest.jsonにshortcutsを追加
VercelのNode.jsバージョンを変更する
Settings => General => Node.js Version から変更できる
Cloudinaryで画像アップロード機能を作る
無料枠も多いので画像アップロード機能を手軽に作りたい場合はオススメ
Next.js + Firebase Functionsが同居するリポジトリでnext buildを実行するとエラーが発生
Type error: Cannot find module 'xxx' or its corresponding type declarations.
Next.jsで「使用していないJavaScriptの削除」に別pageのjsが含まれている場合
next/Linkのprefetch設定を確認
next.jsにtailwindcssを導入する
VSCodeのTailwind CSS IntelliSense拡張が便利
Next.jsで作った静的サイトのsitemap.xmlを生成する
ビルド後に生成してoutディレクトリに配置するようにした
Next.jsで作っていたAPIをFastifyに移行
VercelからDBにアクセスするとToo Many Connectionsエラーになったため
next exportで書き出した静的サイトのconsoleに _next/data/xxx/.json 404エラーが出力される
Next.jsバージョンをv10.0.4にアップデートした
Contentful GraphQL APIで最終更新日時を取得する
sys.publishedAtで最終更新日時が取得できる
Next.jsでAdsenseタグを埋め込んだら Only one AdSense head tag supported per page エラーが発生
Only one AdSense head tag supported per page. The second tag is ignored.
Lighthouseの「Links do not have a discernible name」に対応する
aタグにaria-labelを付与した
react-hook-formとReact Datepickerを組み合わせる
Hook FormのControllerを使う
Tailwind CSSのダークモードでページを再読込した際のチラつきを解消する
noflash.jsを追加
Next.jsのPreview Mode時はAnalyticsを無効化する
cookieの__next_preview_dataキーで判定
Firebase Hostingのキャッシュ設定をする
firebase.jsonに追記することで手軽にキャッシュ設定ができる
Formik or React Final Form
Schema Validationを使いたかったのでformikを使うことにした
Vercelで指定のブランチのみデプロイを実行する
Ignored Build Stepを設定した
Next.jsでFirebase Local Emulatorを使う
NEXT_PUBLIC_USE_FIREBASE_EMULATORを設定して切り替えた
Next.jsで構造化データ（JSON-LD）に対応する
dangerouslySetInnerHTMLを使ってエスケープを解除するようにした