#next.js
Next.jsのPreview Mode時はAnalyticsを無効化する
cookieの__next_preview_dataキーで判定
Next.js 11
手軽にアップグレードできた
VercelのNode.jsバージョンを変更する
Settings => General => Node.js Version から変更できる
FigmaでSVG Octocatを作る その3
アウトライン化大事
Next.jsでURLパラメータを受け取る際に初回レンダリングがundefinedになる
isReadyプロパティで回避
Vercelで指定のブランチのみデプロイを実行する
Ignored Build Stepを設定した
_this.auth.addAuthTokenListener is not a function
8.6.5にダウングレードした
Next.jsのローカル環境で「SharedArrayBuffer will require cross-origin isolation as of M92, around July 2021」警告が表示される
React v17.0.2にアップデートした
Next.jsプロジェクトのGoogle Analytics V3をV4に更新する
トラッキングIDの差し替えのみで対応が完了した
Next.jsで環境に応じて特定のページを非表示にする
NODE_ENVでredirectsを出し分けた
Next.js使用時にrecoil-persistのStorageを変更する
クライアント側で実行された場合のみstorageを指定するようにした
PWAアプリにクイックショートカットを追加する
manifest.jsonにshortcutsを追加
Next.jsアプリにContent-Security-Policyを設定する
Strict CSPを設定
Contentful GraphQL APIで最終更新日時を取得する
sys.publishedAtで最終更新日時が取得できる
Next.js 10.0.1 + React 17.0の環境でTypeError: Object(...) is not a functionエラーが発生
一つ前のReact 16.13に下げてみたらエラーが解消された
Next.jsアプリケーションをPWA対応させる
next-pwaを使うとシンプルにPWA化できた
next-with-apolloを使ってGraphQLにアクセスする
next.js + typescriptでGraphQLを使ってみた
Firebase Hostingのキャッシュ設定をする
firebase.jsonに追記することで手軽にキャッシュ設定ができる
Next.jsプロジェクトにTypescriptを導入する
チュートリアルが充実してる
Next.jsで作った静的サイトのsitemap.xmlを生成する
ビルド後に生成してoutディレクトリに配置するようにした
Lighthouseの「Links do not have a discernible name」に対応する
aタグにaria-labelを付与した
Next Link使用時にlazysizesでの画像更新ができない場合の対応方法
lazysizes attribute changeという公式プラグインを使う
Next.jsで構造化データ（JSON-LD）に対応する
dangerouslySetInnerHTMLを使ってエスケープを解除するようにした
Next.js + typescriptでpathsのエイリアスがModule not foundになる
next.config.jsに追記する必要があった
PWAのruntimeCachingでネットワークからの取得を優先するように設定する
NetworkFirstをhandlerに設定した
Next.jsプロジェクトにGoogleAnalyticsを導入する
react-gaを使ってページビューを記録するようにした
react-shareでSNSシェアボタンを作る
Shareコンポーネントを作っておくと便利
Next.js on firebase Hostingの静的サイトで404ページをカスタマイズする
page/404.tsxではなくpage/_error.tsxを記述する必要があった
Cloudinaryで画像アップロード機能を作る
無料枠も多いので画像アップロード機能を手軽に作りたい場合はオススメ
Next.jsでFirebase Local Emulatorを使う
NEXT_PUBLIC_USE_FIREBASE_EMULATORを設定して切り替えた
Next.js + Firebase Functionsが同居するリポジトリでnext buildを実行するとエラーが発生
Type error: Cannot find module 'xxx' or its corresponding type declarations.
FigmaでSVG Octocatを作る
頭ができた
yarn run db-resetでローカルDBをリセットできるようにする
DBリセット用のシェルスクリプトを呼び出す
Next.jsでブログ記事の構造化データ(JSON-LD)を生成する
リッチリザルト テストで結果を確認
環境変数でrobots.txtの出力を出し分けるNext.js用スクリプト
tsconfigのmodule設定をcommonjsにoverrideする