Sunday morning

#next.js

FigmaでSVG Octocatを作る その3

アウトライン化大事

Next.jsプロジェクトのGoogle Analytics V3をV4に更新する

トラッキングIDの差し替えのみで対応が完了した

Vercelで指定のブランチのみデプロイを実行する

Ignored Build Stepを設定した

PWAアプリにクイックショートカットを追加する

manifest.jsonにshortcutsを追加

Next.js 11

手軽にアップグレードできた

_this.auth.addAuthTokenListener is not a function

8.6.5にダウングレードした

Next.js使用時にrecoil-persistのStorageを変更する

クライアント側で実行された場合のみstorageを指定するようにした

VercelのNode.jsバージョンを変更する

Settings => General => Node.js Version から変更できる

FigmaでSVG Octocatを作る

頭ができた

Next.js 10.0.1 + React 17.0の環境でTypeError: Object(...) is not a functionエラーが発生

一つ前のReact 16.13に下げてみたらエラーが解消された

Next.jsで環境に応じて特定のページを非表示にする

NODE_ENVでredirectsを出し分けた

Firebase Hostingのキャッシュ設定をする

firebase.jsonに追記することで手軽にキャッシュ設定ができる

Next.jsプロジェクトにTypescriptを導入する

チュートリアルが充実してる

Next.jsのPreview Mode時はAnalyticsを無効化する

cookieの__next_preview_dataキーで判定

next-with-apolloを使ってGraphQLにアクセスする

next.js + typescriptでGraphQLを使ってみた

Next.jsで作った静的サイトのsitemap.xmlを生成する

ビルド後に生成してoutディレクトリに配置するようにした

Lighthouseの「Links do not have a discernible name」に対応する

aタグにaria-labelを付与した

Next Link使用時にlazysizesでの画像更新ができない場合の対応方法

lazysizes attribute changeという公式プラグインを使う

Next.jsアプリケーションをPWA対応させる

next-pwaを使うとシンプルにPWA化できた

Next.jsで構造化データ（JSON-LD）に対応する

dangerouslySetInnerHTMLを使ってエスケープを解除するようにした

Next.js + typescriptでpathsのエイリアスがModule not foundになる

next.config.jsに追記する必要があった

Next.jsプロジェクトにGoogleAnalyticsを導入する

react-gaを使ってページビューを記録するようにした

react-shareでSNSシェアボタンを作る

Shareコンポーネントを作っておくと便利

yarn run db-resetでローカルDBをリセットできるようにする

DBリセット用のシェルスクリプトを呼び出す

Next.jsでブログ記事の構造化データ(JSON-LD)を生成する

リッチリザルト テストで結果を確認

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.

jestを実行しても無反応になる場合

Watchmanを消す必要があった