<h2 id="hc69c85bcf9">背景</h2><ul><li>M1 Macの環境にyarnを入れていた</li><li>yarnは <code>npm install -g yarn　</code>でインストールした</li><li>nodenvでnodeのバージョンを管理していた</li></ul><h2 id="h6c3a683b78">どのような問題が起きたか</h2>nodenvでバージョンをv14.17.4に変えてyarnをやろうとしたところ、<pre><code>The `yarn` command exists in these Node versions: v16.13.0
</code></pre>と表示された。つまりyarnコマンドがv16.13.0でしか実行できなかった。<h2 id="hecc60282f8">なぜ起きたか</h2>背景にもある通り、M1 Macの環境構築時、Homebrewがyarn未対応だったためyarnをグローバルにインストールしてしまった。そのため、<pre><code>＄ which yarn
/Users/username/.anyenv/envs/nodenv/shims/yarn
</code></pre>となってしまっていた。<h2 id="h821d19f6cf">[結論]どう解決したか</h2>shimsに入っているyarnを削除。グローバルにインストールしたyarnをuninstall<pre><code>$ npm uninstall -g yarn
</code></pre>さらに、<pre><code># shimを削除
$ rm -rf /Users/username/.anyenv/envs/nodenv/shims/yarn
</code></pre>さらに、<pre><code>sudo rm -rf /Users/amanokokorotarou/.anyenv/envs/nodenv/versions/16.13.0/lib/node_modules/yarn/bin/yarn.js
</code></pre>をする。この状態でyarnを使いたいバージョンにnodenvで移動した上で<pre><code>$ brew install yarn
</code></pre>これで各nodeでyarnを使えるようになった。<pre><code>$ which yarn
/opt/homebrew/bin/yarn
</code></pre><h2 id="hfe874bf3df">結論に至る過程</h2><ul><li><a href="https://bake0937.hatenablog.com/entry/2020/03/01/224852" target="_blank" rel="noopener noreferrer nofollow">yarn コマンドで「The `yarn&apos; command exists in these Node versions:」と表示された場合の対応</a></li><li><a href="https://zenn.dev/catnose99/articles/9356979accca26" target="_blank" rel="noopener noreferrer nofollow">nodenvでglobalパッケージをuninstallできなくなったときの対処法（shimsを削除）</a></li><li><a href="https://zenn.dev/ryuu/scraps/90093ce9b8bd48" target="_blank" rel="noopener noreferrer nofollow">The yarn command exists in these Node versions: と言われたので環境を見直す</a></li><li><a href="https://qiita.com/ClapAndWhistle/items/a5ac200501454e064abb" target="_blank" rel="noopener noreferrer nofollow">nodenv管理下の npm で yarn を install した時に yarn の PATH が通らなかった時の対処メモ</a></li></ul>

nodenv管理下で yarnコマンドを打った時「The `yarn` command exists in these Node versions:」と出た[M1Mac]

例えば、<pre><code> let blogPVData = await fetch(
 `${
 process.env.NODE_ENV === &quot;development&quot;
 ? `http://${process.env.LOCALHOST}`
 : `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
 }/api/fetchGADataBlogPV?blogId=${id}`
 )
 .then((res) =&gt; res.json())
 .catch((err) =&gt; console.log(err));
 if (typeof blogPVData === &quot;undefined&quot;) {
 blogPVData = &quot;0&quot;;
 }</code></pre>みたいなコードがあったとき、デプロイ失敗する。ビルド時は本番の環境に対してapiを見に行くけど、ビルド次点ではapiが未作成だから？こういうときどうすればいいの

ビルド失敗

めっちゃ手軽にできる対応。ちゃんとした対応はもうちょいなんかやる必要ありそう。globals.cssに、<pre><code>.embedly-embed {
 max-width: 100% !important;
}</code></pre>暫定的な対応としては十分。

Next.js×microCMSのifameをレスポンシブ対応【暫定的に】

基本的にはNextとReactをアップグレードすればいいんだけど、依存するその他のライブラリを先にアップグレードしないとエラーが止め処なく出てくるそのためあくまで自分の場合の手順。<h2 id="h46ba0d4be4">関連パッケージとNextのアップグレード</h2>あとnodeのバージョンを18に上げた。<pre><code>
 1141 npm i iconoir-react@latest
 1152 npm i swr@latest 
 1153 npm i typescript@latest
 1154 npm i typewriter-effect@latest
 1155 npm i microcms-js-sdk@latest
 1157 npm i autoprefixer@latest
 1158 npm i postcss@latest
 1159 npm i react-icons@latest
 1164 npm i react@latest react-dom@latest
 1177 npm i react-modal@latest
 1178 npm i @types/react-modal@latest
 1179 npm i framer-motion@latest
 1180 npm i react-burger-menu@latest
 1181 npm i react@latest react-dom@latest
 1182 npm i framer-motion@latest
 1183 npm i next@latest
 1184 npm i @types/gtag.js
 1185 npm i @types/gtag.js@latest
 1186 npm i eslint@latest
 1187 npm i tailwindcss@latest
 1188 npm i react-use@latest
 1189 npm i @types/react-burger-menu@latest
 1190 rm -rf package-lock.json
 1191 rm -rf node_modules
 1192 npm i
 1193 npm run dev</code></pre>historyをただ載せているだけ。<pre><code>npm run dev

- error Nested Middleware is not allowed, found:
pages/_middleware
Please move your code to a single file at /middleware instead.
Read More - https://nextjs.org/docs/messages/nested-middleware</code></pre>でmiddlewareが <code>_middleware.js</code>になっているのがよくないらしいので修正。ファイル名を<code>middleware.js</code>に変更し、場所もプロジェクトディレクトリ直下に置く。<h2 id="h503f60b648">&lt;Link&gt;コンポーネントで内部でaタグを使っている箇所を直す必要があった。</h2><pre><code>npx @next/codemod new-link .</code></pre>で一括で変更し、エラーが出ている箇所を修正。<h3 id="h305b9431b6">Image</h3><pre><code>npx @next/codemod next-image-to-legacy-image .</code></pre>でコミットした後、<pre><code>npx @next/codemod next-image-experimental .</code></pre>上記のせいか分からないが、なぜかtailwindの共通CSSが勝っている箇所があり、画像サイズが変になっていたので、important指定で画像サイズを修正。

Next.jsを12から13にしてみた

<ol><li>欲しい物をカゴに入れておく</li><li>買わないでおく</li><li>めっちゃお酒を飲む</li><li>ある日欲しい物が届いている</li><li>ほぼサンタ</li></ol><figure><img src="https://images.microcms-assets.io/assets/1ef38cd1a8134e5383b1fc743d10cffb/81028e19a9a542d892e6c67c889d58dc/IMG_3791.jpg" alt="" width="3024" height="4032"></figure>

サンタがきた

色々やったけど、OGPを作成する過程でクライアントサイドでの処理が走るとだめっぽい。例<pre><code>const Seo: React.FC&lt;Props&gt; = (props: Props) =&gt; {
 const { title, description } = props;
 
 const { locale } = useLocale();
 const ogTitle = locale === &quot;en&quot; ? &quot;englishTitle&quot; : &quot;jaTitle&quot;;
 
 return (
 &lt;Head&gt;
 &lt;meta property=&quot;og:title&quot; content={ogTitle} /&gt;
 &lt;/Head&gt;
 )
}</code></pre>→→→_app.tsxでのuseEffectとかがよくなかったぽい？<pre><code>const [mounted, setMounted] = useState&lt;boolean&gt;(false);

useEffect(() =&gt; setMounted(true), []);

if (!mounted) {
 return null;
 }</code></pre>これを外すとなおった。けど、これが何だったのか思い出せない。<h2 id="h7da869be61">→ダークモードのためのmountedをapp.tsxで判定するように</h2>というコミットの際に追加していた。ダークモード判定を初期表示で行う際に必要ぽい。これを外すと、<pre><code>Warning: Prop `className` did not match.Server: xxx
Warning: Prop `style` did not match.Server: xxx</code></pre>というエラーたちが出る。これが出ている箇所を見るに、<pre><code>&lt;div
className={`text-left ${
 theme === &quot;light&quot; ? &quot;text-blue-500&quot; : &quot;text-blue-300&quot;
}`}
&gt;</code></pre>こういうところでthemeがサーバーサイドでは常にtrueなのに、クライアントではfalseになっている場合があるから。useThemeでスタイルを出し分けるのを辞めて、<pre><code>&lt;div className={`text-left text-blue-500 dark:text-blue-300`}&gt;</code></pre>みたいな感じにすると大丈夫そう。で、useThemeを使うところでは<pre><code>const [mounted, setMounted] = useState&lt;boolean&gt;(false);

useEffect(() =&gt; setMounted(true), []);

if (!mounted) {
 return null;
 }</code></pre>を入れる。

[Next.js]OGPが適切に設定されない。ERROR: No card found (Card error)

<h2 id="h0e4e547ea0">pyenv </h2><pre><code class="language-shell">amanokokorotarou🙃 ~ via  v18.12.1 on ☁️ (jp) took 3m12s
❯ brew install pyenv

amanokokorotarou🙃 ~ via  v18.12.1 on ☁️ (jp) took 3m12s
❯ pyenv -v
pyenv 2.3.22

amanokokorotarou🙃 ~ via  v18.12.1 on ☁️ (jp)
❯ echo &apos;export PYENV_ROOT=&quot;$HOME/.pyenv&quot;&apos; &gt;&gt; ~/.zshrc

amanokokorotarou🙃 ~ via  v18.12.1 on ☁️ (jp)
❯ echo &apos;export PATH=&quot;$PYENV_ROOT/bin:$PATH&quot;&apos; &gt;&gt; ~/.zshrc

amanokokorotarou🙃 ~ via  v18.12.1 on ☁️ (jp)
❯ echo &apos;eval &quot;$(pyenv init -)&quot;&apos; &gt;&gt; ~/.zshrc

amanokokorotarou🙃 ~ via  v18.12.1 on ☁️ (jp)
❯ source ~/.zshrc

amanokokorotarou🙃 ~ via  v18.12.1 on ☁️ (jp)
❯ pyenv install 3.11.4

amanokokorotarou🙃 ~ via  v18.12.1 on ☁️ (jp)
❯ pyenv global 3.11.4

amanokokorotarou🙃 ~ via  v18.12.1 on ☁️ (jp)
❯ python --version
Python 3.11.4

</code></pre><h2 id="hfedac1c46d">venv</h2><pre><code>amanokokorotarou🙃 ~/Project/Python on ☁️ (jp)
❯ mkdir python-cassandra

amanokokorotarou🙃 ~/Project/Python on ☁️ (jp)
❯ cd python-cassandra/

amanokokorotarou🙃 ~/Project/Python/python-cassandra on ☁️ (jp)
❯ python -m venv .venv</code></pre><h1 style="text-align: start" id="h9e4f05b18d">Cassandra</h1><pre><code>amanokokorotarou🙃 ~ via  v18.12.1 on ☁️ (jp)
❯ brew install cassandra

amanokokorotarou🙃 ~ via  v18.12.1 on ☁️ (jp) took 44s
❯ brew services start cassandra
==&gt; Successfully started `cassandra` (label: homebrew.mxcl.cassandra)</code></pre><h1 style="text-align: start" id="h99678a5629">cassandra-draiver</h1><pre><code>amanokokorotarou🙃 ~/Project/Python/python-cassandra via 🐍 v3.11.4 (.venv) on ☁️ (jp)
❯ pip list
Package Version
---------- -------
pip 23.1.2
setuptools 65.5.0

amanokokorotarou🙃 ~/Project/Python/python-cassandra via 🐍 v3.11.4 (.venv) on ☁️ (jp)
❯ pip install cassandra-driver
Collecting cassandra-driver
 Downloading cassandra_driver-3.28.0-cp311-cp311-macosx_11_0_arm64.whl (3.3 MB)
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 3.3/3.3 MB 7.1 MB/s eta 0:00:00
Collecting six&gt;=1.9 (from cassandra-driver)
 Downloading six-1.16.0-py2.py3-none-any.whl (11 kB)
Collecting geomet&lt;0.3,&gt;=0.1 (from cassandra-driver)
 Downloading geomet-0.2.1.post1-py3-none-any.whl (18 kB)
Collecting click (from geomet&lt;0.3,&gt;=0.1-&gt;cassandra-driver)
 Downloading click-8.1.4-py3-none-any.whl (98 kB)
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 98.2/98.2 kB 7.4 MB/s eta 0:00:00
Installing collected packages: six, click, geomet, cassandra-driver
Successfully installed cassandra-driver-3.28.0 click-8.1.4 geomet-0.2.1.post1 six-1.16.0</code></pre>cassandraに実際にデータを登録。<h2 id="h9c39912749">参考リスト</h2><ul><li><a href="https://prog-8.com/docs/python-env">https://prog-8.com/docs/python-env</a></li><li><a href="http://debugroom.github.io/doc/database/cassandra/install.html">http://debugroom.github.io/doc/database/cassandra/install.html</a></li><li><a href="https://self-development.info/%E3%80%90python%E3%80%91cassandra-driver%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB/">【Python】cassandra-driverのインストール</a></li></ul>

Mac Python Cassandraセットアップ

結論、ブラウザのデフォルト言語をdefaultLocaleの言語と同じにしたら治った。しかし、これはブラウザのデフォルト言語とdefaultLocaleの言語が違う人は永遠に謎のエラーがでるということを意味している気がする。根本解決はまた考える。<pre><code> i18n: {
 locales: [&quot;en&quot;, &quot;ja&quot;],
 defaultLocale: &quot;ja&quot;,
 },</code></pre><h3 id="hdaf32be438">出てたエラーたち</h3><pre><code>Uncaught (in promise) Error: Failed to preflight request</code></pre><pre><code>HEAD https://domain net::ERR_ABORTED 404</code></pre><h3 id="h527d33c5c1">起きていた現象</h3><ul><li>トップページ遷移時にコンソールでエラー出る</li><li>トップページから言語スイッチボタン押すとエラー吐いて機能しない</li><li>トップページからトップページへのリンク押すとエラー吐く</li></ul>

Next.jsのi18nとか関連でずっと変なCORSのエラー出てた

<pre><code class="language-shell">❯ npm i 
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: use-media@1.4.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR! react@&quot;^17.0.2&quot; from the root project
npm ERR! peer react@&quot;&gt;=16.8 || ^17.0.0 || ^18.0.0&quot; from framer-motion@6.3.3
npm ERR! node_modules/framer-motion
npm ERR! framer-motion@&quot;^6.3.3&quot; from the root project
npm ERR! 11 more (iconoir-react, next, next-themes, react-burger-menu, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@&quot;^16.8.1&quot; from use-media@1.4.0
npm ERR! node_modules/use-media
npm ERR! use-media@&quot;^1.4.0&quot; from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: react@16.14.0
npm ERR! node_modules/react
npm ERR! peer react@&quot;^16.8.1&quot; from use-media@1.4.0
npm ERR! node_modules/use-media
npm ERR! use-media@&quot;^1.4.0&quot; from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /Users/amanokokorotarou/.npm/_logs/2023-07-11T14_04_52_361Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /Users/amanokokorotarou/.npm/_logs/2023-07-11T14_04_52_361Z-debug-0.log</code></pre><code>use-media</code>の依存しているReactのバージョンが低いらしい。use-mediaは4年も更新されていない。use-mediaじゃないライブラリを使えないか模索。ピンポイントの記事を発見。<a href="https://zenn.dev/someone7140/articles/1f2eaef6991e1f">【React】「streamich/use-media」の代替で「streamich/react-use」のuseMediaを使う</a>