#next.js
Next.jsで「使用していないJavaScriptの削除」に別pageのjsが含まれている場合
next/Linkのprefetch設定を確認
react-hook-formとReact Datepickerを組み合わせる
Hook FormのControllerを使う
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.
VercelのPreview環境に固定のサブドメインを割り当てる
X-Robots-Tagは付与されないので注意
Next.jsでログイン必須ページにアクセスした際にブラウザバックで前のページに戻れない
router.replace('/login')を使うようにした
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を参考に
Tailwind CSSのダークモードでページを再読込した際のチラつきを解消する
noflash.jsを追加
Next.jsアプリの権限管理にCASLを使う
jsで柔軟な権限管理を行う場合はCASLが便利だった
Next.jsプロジェクトにGoogle Analyticsを導入する
公式サンプルを参考にしつつ、Typescript用に一部調整する必要があったので対応
Next.js + Prism.jsでコードのSyntax Highlightをする
highlight.jsから軽量のPrism.jsに移行
Next.js + Algoliaで全文検索UIを実装する
react-instantsearchを利用
Next.jsで作っていたAPIをFastifyに移行
VercelからDBにアクセスするとToo Many Connectionsエラーになったため
Next.jsでPrismaを使う
チュートリアル記事が参考になる
Next.js + react-toastifyでページ遷移時にもトースト表示を維持する
ToastContainerをCustom Appに配置する
export defaultが設定されているモジュールをasでimportする方法
import { default as XXXX } from
Next.jsで動的URLをRewriteする
next.config.jsにrewritesを追加
next build時に.nextディレクトリを消す
ビルドのたびに.nextディレクトリの容量が増えていた
Formik or React Final Form
Schema Validationを使いたかったのでformikを使うことにした
next exportで書き出した静的サイトのconsoleに _next/data/xxx/.json 404エラーが出力される
Next.jsバージョンをv10.0.4にアップデートした
useSWRInfiniteでinitialDataが認識されない現象が発生
swr@0.3.11にアップデートしたところ正しい挙動になった
jestを実行しても無反応になる場合
Watchmanを消す必要があった
画像遅延読み込みにlazysizesを使う
ネイティブのloading属性はまだSafariが対応していないため
Next.js on Firebase Hostingの際にページリロードすると404になる
trailingSlash設定を毎回忘れる
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する