#next.js

SharedArrayBuffer updates in Android Chrome 88 and Desktop Chrome 92

クロスオリジン分離対応を実施

VercelのPreview環境に固定のサブドメインを割り当てる

X-Robots-Tagは付与されないので注意

react-hook-formとReact Datepickerを組み合わせる

Hook FormのControllerを使う

next exportで書き出した静的サイトのconsoleに _next/data/xxx/.json 404エラーが出力される

Next.jsバージョンをv10.0.4にアップデートした

useSWRInfiniteでinitialDataが認識されない現象が発生

swr@0.3.11にアップデートしたところ正しい挙動になった

Next.jsで動的URLをRewriteする

next.config.jsにrewritesを追加

Next.js9 + Tailwindcss2.0環境で Error: true is not a PostCSS plugin エラーが発生

Next.jsを最新バージョンにアップデートした

@tailwindcss/typographyにもダークモードを適用する

tailwind.config.jsにtypography設定を追加

Next.jsで動的にsitemap.xmlを生成する

getServerSideProps内でxmlを生成した

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

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

tailwindcss2.0 upgrade

Upgrade Guideを参考に

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

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

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

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

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

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

Next.jsでPrismaを使う

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

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

ToastContainerをCustom Appに配置する

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

trailingSlash設定を毎回忘れる

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

Watchmanを消す必要があった

画像遅延読み込みにlazysizesを使う

ネイティブのloading属性はまだSafariが対応していないため

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

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

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

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

Next.jsで生成したサイトで特定のページのみnoindexを設定する

タグに紐づく記事一覧ページはnoindexにした

Next.jsでAdsenseタグを埋め込んだら Only one AdSense head tag supported per page エラーが発生

Only one AdSense head tag supported per page. The second tag is ignored.

Next.js + Prism.jsでコードのSyntax Highlightをする

highlight.jsから軽量のPrism.jsに移行

Next.js + Algoliaで全文検索UIを実装する

react-instantsearchを利用

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

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

next.jsにtailwindcssを導入する

VSCodeのTailwind CSS IntelliSense拡張が便利

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

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

環境変数でrobots.txtの出力を出し分けるNext.js用スクリプト

tsconfigのmodule設定をcommonjsにoverrideする