Open2023/07/14にコメント追加87

Next.js サービス開発メモ

Next.js 12.1 にしたら警告が出るようになった。

Do not add react_devtools_backend.js:4061 Do not add stylesheets using next/head (see <link rel="stylesheet"> tag with href="https://fonts.googleapis.com/icon?family=Material+Icons"). Use Document instead.

document使えや、って言ってるのかな？

Layout.tsx

<Head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
</Head>

この部分が気に入らないのか。
これなんで入れてたんだっけかな

あー最初にアイコンの使い方覚えた時のやり方と React Icons からのアイコンが混在してるのか。
最初のやつがそんな書き方したらパフォーマンスに悪いでしょって言われてると。
（そんな書き方＝Layout の HEAD に link rel ぶっこむ。）

すべて React Icons に置き換えた。
Firebase Auth が遅いと思っていた部分も単にアイコンを外から持ってきていたから…dasee-

Next.js 全般メモ

カスタムフックがだんだん Controller っぽい実装になってきているけどこれはどうなのかな。

Controller というより Class っぽくなってきた

components フォルダ配下に layout フォルダ、forms フォルダを作成した。
forms フォルダは React Hook Forms 専用のコンポーネント入れ。
なんちゃらデザインは分子の英単語が書けないので採用しないと決めている

dayjsの変換処理が各ページに散在しすぎている&同じ処理を書いている感じなので一部まとめ始めた。

Windows側の環境構築

MSさんのこういうの割りと手厚いよね

コマンドプロンプトからcodeで起動

Windows側で手癖になっててMacでもやろうとして動かなかったらこれが必要だった。
https://webrandum.net/vscode-terminal/

円安うんぬんだけでもないけどWindows環境に移行したいなー

Recoil 0.7 で例のエラーが激しくなっている件

Expectation Violation: Duplicate atom key "user". This is a FATAL ERROR in
      production. But it is safe to ignore this warning if it occurred because of
      hot module replacement.
    at expectationViolation (/Users/user/Code/ictsss/node_modules/recoil/cjs/recoil.js:551:19)
    at registerNode (/Users/user/Code/ictsss/node_modules/recoil/cjs/recoil.js:666:9)
    at baseAtom (/Users/user/Code/ictsss/node_modules/recoil/cjs/recoil.js:8183:16)
    at atom (/Users/user/Code/ictsss/node_modules/recoil/cjs/recoil.js:8238:12)
    at eval (webpack-internal:///./src/hooks/authentication.ts:19:63)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)

Duplicate atom key いつか消えてくれると思いきや激しくなってるんですけど…。
そしてコンソールから無視を押してしまったら戻し方がわからないという

Recoil のあのエラーを消せるやつ？

Duplicate atom key "xxxxxxxxxx".
This is a FATAL ERROR in production.
But it is safe to ignore this warning if it occurred because of hot module replacement.

試してみたいような、余計なものは入れたくないような…。

入れちゃった！

Ctrl + C で止めた時にエラー出るようになったので諦めて消した。

TypeError: callback is not a function
    at interceptor (/Users/user/Code/ictsss/node_modules/intercept-stdout/intercept-stdout.js:40:16)
    at WriteStream.write (/Users/user/Code/ictsss/node_modules/intercept-stdout/intercept-stdout.js:25:14)
    at process.handleSessionStop (/Users/user/Code/ictsss/node_modules/next/dist/cli/next-dev.js:109:20)

React18関連

@types/react を 18.0 にしたら Recoil でエラーが出た。
＠types/react@17.0.39 に戻した。
React 18 に上げるのを止めているのに間違えて入れてしまった。

FullCallendar がいまいちで対応が終わるまで移行できない感じ。
やっぱこの手の重厚なやつ入れるとそうなるよなー。

やったね arshaw

ということで React18 にアップデートした。

Warning: A title element received an array with more than 1 element as children. In browsers title Elements can only have Text Nodes as children. If the children being rendered output more than a single text node in aggregate the browser will display markup and comments as text in the title and hydration will likely fail and fall back to client rendering
    at title
    at head
    at Head (webpack-internal:///./node_modules/next/dist/pages/_document.js:294:1)
    at html
    at Html (webpack-internal:///./node_modules/next/dist/pages/_document.js:260:106)
    at Document (webpack-internal:///./node_modules/next/dist/pages/_document.js:16:1)

今度はこの警告が出るな。なんだろこれ

https://b.0218.jp/202207152029.html
これかな？

これだね。

ical-generator で Failed to compile (Module not found: Can't resolve 'fs')

スケジュールデータをiCal形式に出力しようとして、ical-generatorを入れたらこのエラーが出た。

./node_modules/ical-generator/dist/calendar.js:9:0
Module not found: Can't resolve 'fs'

Import trace for requested module:
./node_modules/ical-generator/dist/index.js
./src/pages/admins/icalexport.tsx

https://nextjs.org/docs/messages/module-not-found

fs はサーバ側なのでうんぬん…ってのがたくさん出てくる

ここに辿り着いて解読中

サーバ側の処理、例えば getStaticProps() とかの中に入れたらいいのかな？

とりあえずファイル出力は手製でやってみてから考えよう。

この辺を読む

https://fullcalendar.io/docs/icalendar
これはFullCalendar側にインポートできるって話か。
これはこれでどこかで使いそう。逆はないのかな

この辺も読む

これでモック的なやつがエラーなしで動くところまでできた。

あ、これ1件のみか。

ファイルは自力で作ってDownloadすればいいか

getStaticProps 内で処理すればOKっぽいのがようやく理解でき始めてきた。

ファイル出力した場合は public に吐けばいい？消さずに残ってしまう。
ダウンロードさせたいだけなんだけど…。

icalのファイルをpublic出力しておいてそれをURL参照する。
再生成時にはファイル名を変更して旧URLでは参照できないようにする。
やりたいのはこの感じかな。

この辺参考にしつつ、npmは使わない方向にした。
ファイル文字列を生成 → Blob → ダウンロードの形で落ち着きそう

iCalendar形式のファイルダウンロードは出来た。
URLで提供すれば変更は自動反映される？しない？
したい場合はどこかに吐き出さないといけない？どうやる？

getStaticProps に慣れてきたのでこっちも何とかなりそうかな？
fallback true か getServerSideProps どっちかで ical形式吐き出せば予定データに連動したURLを発行できる？

React Dropzone 12.1.0 → 14.0.1 でエラー

型 'string' を型 'Accept' に割り当てることはできません。ts(2322)

  const { getRootProps, getInputProps, open, isDragActive } = useDropzone({
    onDrop,
    onFileDialogCancel,
    onDropAccepted,
    onDropRejected,
    accept: 'text/plain, text/csv, application/vnd.ms-excel',
    noClick: true,
    noKeyboard: true,
    multiple: false,
    maxSize: Infinity,
  })

accept: {
  'text/csv': ['.csv'],
},

この書き方でエラーは消えた

ReactHookForm のコンポーネントをそろそろ分離したい

ReactHookForm を使ってないコンポーネントとは一緒にしないまではやってきた。
ただし ReactHookForm を使った方はベタ書きしてたのでそろそろ共通化したい。

まず、親から name と control 引っ張り回してくる
子の中で useController で field 取ってきて配れば最低限ってところかな？

とりあえず簡単な所でうまく動いた。

import { Control, useController } from 'react-hook-form'

// Props
type Props = {
  name: string
  control: Control
  required: string
  min: number
  max: number
}

// InputFormNumeric
export const InputFormNumeric: React.FC<Props> = (props) => {
  const { name, control, required, min, max } = props
  const { field } = useController({
    name,
    control,
  })

  // return
  return (
    <input
      className="form-control"
      type="number"
      inputMode="numeric"
      {...control.register(field.name, { required: required, min: min, max: max })}
    />
  )
}

この辺をじっくり読む

field.name なんてしなくても name 引っ張ってきてるんだから useController 要らないじゃん。

GitHub に上げたリポジトリの続きから作業したい

git init
git remote add origin git@github.com:kakimoty/hlthobs.git
git pull origin main

ってやっても master ブランチが追加されてしまう。

git init した時に master がデフォで作られているっぽい。
.git フォルダの HEAD ファイルが

ref: refs/heads/master

となっていたのを

ref: refs/heads/main

に変えてから

git pull origin main

をすればOK

この辺を読む

yarn upgrade-interactive

知らんかった…。

テンプレートプロジェクトがうまく引用されない

URL指定の最後に .git がついていた…。

nextjs-progressbar

とりあえず追加してみた。
個人的にはこういうの使わない事が多いんだけど、まぁ手軽なので…。

いくつか入れて試したけど、1つを残してやっぱり消した。
求められたら嫌々入れるぐらいのスタンスでいこうと思う。

App Router で動かなくなったっぽい。更新止まってるなあ

next.config.js のエラー

warn  - Invalid next.config.js options detected: 
[
  {
    "instancePath": "",
    "schemaPath": "#/additionalProperties",
    "keyword": "additionalProperties",
    "params": {
      "additionalProperty": "webpack5"
    },
    "message": "must NOT have additional properties"
  }
] 
See more info here: https://nextjs.org/docs/messages/invalid-next-config

webpack5: true って無くなったかな？

GetStaticProps に慣れる

GetStaticPaths でファイル名にするパラメータを配列で吐き出して、
GetStaticProps でページにするデータを取得してページに投げる。

https://maku.blog/p/rdq3ep2/

├ ● /titles/[title] 860 B 166 kB
├ └ /titles/testtitle1
Vercel で SSG に吐き出せた。
次は GetStaticProps で Firestore から値を引っ張ってこれるかを試すか。

この辺書き方のヒントになるか

paths を別のところから取ってきて props に投げてデータ取得、複数ページ生成までできた。
途中 JSONっぽいエラーのところでハマったけど単にデータの持ち方が失敗していただけだった。

React18 useEffect対応

とりあえずこんな感じで組み込んだ。

  const mounted = useRef(false)

  // useEffect
  useEffect(() => {
    if (mounted.current) {
      return
    }
    mounted.current = true

    // TODO: 走らせたい処理をここに書く 
  }, [])

様子を見ながらどのくらい入れるか考える

この本に載ってました！

useEffect の第2引数で再実行かかっても処理しなくなる…って当たり前やんｗ
一旦上記処理は全部外した。

Loginページでログイン済みならリダイレクト処理をuseEffectに書いていたので上記の処理を書くことでエラーが出なくなった。

Next.js 12.3 にあげたら yarn dev で止まった

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /Users/user/Code/ictsss/.env.local
info  - SWC minify release candidate enabled. https://nextjs.link/swcmin
info  - automatically enabled Fast Refresh for 1 custom loader

この部分から先に行かなくなった

12.2.5 に下げても止まった。どこが原因だ…。

あれ？全然分からんぞ

yarn.lock を消して yarn し直しで直った。意味わからん状態だったので助かった…。

同じテンプレ派生のもの全部同じ症状なんで原因があるはずなんだけど調べきれないなこれ

GitHub Codespaces

iPadで使ってみている。便利だね。
今の疑問。github にアップされていない .env ファイルどうしてるのかな？

疑問2 vscodeで使うフォントは追加できるのかな？

これは git clone とか使わなくなるのでは…

secret に入れる流れか…怖いなw

iPad はまだ動きが重いんでまだ学習＆緊急修正用かな？
PCからならいけるけどそれなら従来のやり方する手もある…って所かな？

iPadだとローカル環境での確認でもたついたりエラーになったりする時がある
気分が落ち着いてきて皆が通った道を歩いた感じがしたｗ

Next.js 13 への移行

既存プロジェクトをようやく Next.js 13 移行させることにした。
React本体や他パッケージなどは常にアップデートしていたたので作業は yarn add next のみ

next-transpile-moduleの削除
主に FullCalendar で next-transpile-module を使っていた。
作者さんが Next.js13 の標準機能になったから俺の役割終わりだよ！ってのは見ていた。

手順通りに実施、あっさり動作。

Error: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>. が表示される
<Link>に<A>タグの機能あるからLinkの内側にaタグ書かないでね、ってことらしい。

最初 legacyBehavior を Linkタグにつけて動作させてから徐々に外していった。
a タグの className以下はLinkに付け替えれば特に問題なく動作した。

App Router への移行

App Router への移行を調査中、まずは公式
https://nextjs.org/docs/app

Pages と併用でいけるとあるけどどういうやり方になるんだろうか…とか考えながら

最適化を目指しつづける中でサーバ側への揺り戻しって感じかなーって読んでる

後ろの方、やってみた時にハマりそうな所のヒントになりそうで流し読み。

これは分かりやすそう…ちゃんと試そうかな

そして結局逃げていた React Server Components の話を読んでいる…と

こっちも読む、前よりは分かる…多分

他にも色々読んだがこの辺を読んだあたりで覚悟を決めてお試し開始
既存の移行を試してみて難しければ新規から感触を掴み直す流れで

app フォルダを作成、layout.tsx, page.tsx を作成。

pages 配下の index.tsx とコンフリクトしてエラーが出たので既存ページを暫定リネーム
同じページ名は使えないあたりは移行作業としては考えないといけないかも。
リネームして app フォルダ側のページを表示させた。ふむ

import NextNprogress from 'nextjs-progressbar'
      
<NextNprogress
        color="#FFFFFF"
        startPosition={0.2}
        stopDelayMs={20}
        height={2}
        showOnShallow={true}
      />

これは use clinet しろって言われた。そりゃそうだ。
別ファイルでuse clinet 付きのコンポーネント化してタグで貼ればOKかな？

'use client'
import NextNprogress from 'nextjs-progressbar'

// NextProgress
export const NextProgress = () => {
  return (
    <>
      <NextNprogress
        color="#FFFFFF"
        startPosition={0.2}
        stopDelayMs={20}
        height={2}
        showOnShallow={true}
      />
    </>
  )
}

NextProgress.displayName = 'NextProgress'

こんな感じにして layout.tsx にインポートしてうまくいっている感じ。
Bootstrap、Recoil も同様にしてエラーは出なくなった。

_componentsフォルダに入れてみたが良い命名規則なんかあるかな？
暫定で NextProgress、Bootstrap、Recoil なんだけど… 後ろに Component つけるのだるい

ラッパーコンポーネントにしたらエラーがだらだら出はじめた

要はマウントチェックしてあれならnull返せってことらしいけど…これもだるいｗ

Firebase 系はめんどそうな感じなので後回し、Bootstrap系統は表示OK
なんでも 'use client' すりゃ動きそうだけど、ServerComponent にできそうなところを考えながらやれやと言われている感じなので一応真面目には考えてみよう

あれ？ Next.js App Router 側で Firebase Auth を通すの大変だった？

Firebase Auth は ’use client' 使って通るようにはなった。
けど、なんか定期的にこれが出るな

Module not found: Can't resolve 'encoding' in '/Users/user/Code/*****/node_modules/node-fetch/lib'

Import trace for requested module:
./node_modules/node-fetch/lib/index.js
./node_modules/@firebase/auth/dist/node-esm/index.js
./node_modules/firebase/auth/dist/index.mjs
./src/lib/firebase.ts

supabaseとかでも出てて、対応するとかあるけど Firebase 側で直すやつ？
yarn add encoding しちゃえよみたいな事も答えにあるのでやってみたら消えた。
注意しつつ様子見にしよう。

要はマウントチェックしてあれならnull返せってことらしいけど…これもだるいｗ

このだるい処理を入れておかないと Bootstrap でプルダウンが動かなかった
いるか入らないか分からないので全部入れるしかないのか？

Metadata って 'use client' 使ってる tsx 内では使えないのか … そりゃそうか。
てことは page.tsx は use client 付けてベタ貼りするんじゃなくて頑張って sc にしないとページごとのタイトルが付けられないってことか？

sc と cc の階層の話は Flutter の StatefulWidget をコンポーネント化して分離していくのと同じ感じかな〜と思いながら移行作業中

next/navigation でクエリパラメータ取ってくる方法

とりあえず大体移行できたけど…これ微妙じゃね？
いやまぁやりたいことと、今後の技術考えた理想型ではあると思うけど…。
今まで以上に裏でこねくり回されてる感が強い。

とりあえず移行後のコードは全保存しておいて元に戻そうかと考えている。

こいういうのも気持ち悪いし

とりあえず移行コードを退避しておいて元に戻した。
Hooksでコントローラー的に分離しておくとか移行に有効なコードの書き方は何となくわかったので備えをしつつpagesフォルダの扱いがどうなるか、プラグイン群がどうなるかで決めようかな。

Problems loading reference 'vscode://schemas/settings/configurationDefaults': Unable to load schema from 'vscode://schemas/settings/configurationDefaults': cannot open vscode://schemas/settings/configurationDefaults. Detail: Unable to resolve text model content for resource vscode://schemas/settings/configurationDefaults.(768)

このエラーが突然でて上記（vscode の settings.json に追記）で対処、これ何だろ？

json ファイルを読み込むのに許可が必要になったのかな？
firebase 系の json は反応しない感じもあるけど…。