#next.js

FigmaでSVG Octocatを作る その3

アウトライン化大事

_this.auth.addAuthTokenListener is not a function

8.6.5にダウングレードした

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

cookieの__next_preview_dataキーで判定

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

manifest.jsonにshortcutsを追加

FigmaでSVG Octocatを作る

頭ができた

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

環境変数で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設定を毎回忘れる

Next.js + react-toastifyでページ遷移時にもトースト表示を維持する

ToastContainerをCustom Appに配置する