#next.js

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

cookieの__next_preview_dataキーで判定

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

manifest.jsonにshortcutsを追加

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

Next.js 10 + Tailwind CSS 2.0 でAMP対応(hybrid)を行う

next/ampのhybridモードを使い通常ページとAMPページを生成し、PostCSSでCSSの容量削減を行いinline cssとして埋め込み

Contentful GraphQL APIで最終更新日時を取得する

sys.publishedAtで最終更新日時が取得できる

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

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

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

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

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

Watchmanを消す必要があった

Formik or React Final Form

Schema Validationを使いたかったのでformikを使うことにした

Next.js on Firebase Hostingの際にページリロードすると404になる

trailingSlash設定を毎回忘れる

Next.jsでPrismaを使う

チュートリアル記事が参考になる

next.jsにtailwindcssを導入する

VSCodeのTailwind CSS IntelliSense拡張が便利

Next.jsで作っていたAPIをFastifyに移行

VercelからDBにアクセスするとToo Many Connectionsエラーになったため

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

公式サンプルを参考にしつつ、Typescript用に一部調整する必要があったので対応

Next.jsアプリの権限管理にCASLを使う

jsで柔軟な権限管理を行う場合はCASLが便利だった

tailwindcss2.0 upgrade

Upgrade Guideを参考に

React Testing Libraryを使ってNext.jsアプリのテストを書く

可能な限りgetByRoleを使うようにする