#next.js
Next.jsのPreview Mode時はAnalyticsを無効化する
cookieの__next_preview_dataキーで判定
PWAアプリにクイックショートカットを追加する
manifest.jsonにshortcutsを追加
Next.jsアプリにContent-Security-Policyを設定する
Strict CSPを設定
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という公式プラグインを使う
PWAのruntimeCachingでネットワークからの取得を優先するように設定する
NetworkFirstをhandlerに設定した
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.
環境変数でrobots.txtの出力を出し分けるNext.js用スクリプト
tsconfigのmodule設定をcommonjsにoverrideする
Next.js 10 + Tailwind CSS 2.0 でAMP対応(hybrid)を行う
next/ampのhybridモードを使い通常ページとAMPページを生成し、PostCSSでCSSの容量削減を行いinline cssとして埋め込み
next.jsにtailwindcssを導入する
VSCodeのTailwind CSS IntelliSense拡張が便利
Contentful GraphQL APIで最終更新日時を取得する
sys.publishedAtで最終更新日時が取得できる
yarn run db-resetでローカルDBをリセットできるようにする
DBリセット用のシェルスクリプトを呼び出す
Next.jsでブログ記事の構造化データ(JSON-LD)を生成する
リッチリザルト テストで結果を確認
画像遅延読み込みにlazysizesを使う
ネイティブのloading属性はまだSafariが対応していないため
jestを実行しても無反応になる場合
Watchmanを消す必要があった
Formik or React Final Form
Schema Validationを使いたかったのでformikを使うことにした
next build時に.nextディレクトリを消す
ビルドのたびに.nextディレクトリの容量が増えていた
Next.js on Firebase Hostingの際にページリロードすると404になる
trailingSlash設定を毎回忘れる
export defaultが設定されているモジュールをasでimportする方法
import { default as XXXX } from
Next.js + react-toastifyでページ遷移時にもトースト表示を維持する
ToastContainerをCustom Appに配置する
Next.jsでPrismaを使う
チュートリアル記事が参考になる
Next.jsで作っていたAPIをFastifyに移行
VercelからDBにアクセスするとToo Many Connectionsエラーになったため
Next.jsプロジェクトにGoogle Analyticsを導入する
公式サンプルを参考にしつつ、Typescript用に一部調整する必要があったので対応
Next.jsアプリの権限管理にCASLを使う
jsで柔軟な権限管理を行う場合はCASLが便利だった