Zenn
Open2

ポートフォリオ制作で出てきた課題(これから解決したい）

Next.js
React
おおさんしょううお座おおさんしょううお座

就活用にNext.js、React、microCMSを使ったポートフォリオサイトを制作していて、できなかったこと、後回しにしたことなどのメモリスト。追って解決していく。

IDベースで投稿が取得できない

microCMSのAPI経由でIDを指定して投稿を取得しようと思ったらできなかった。
APIにslugを追加、指定した上で、同じコードのid部分をslugに置換したらできたので要検証。

投稿一覧が取得できる場合とできない場合がある

トップページに制作物一覧を取得・表示しようと思ったらできなかった。
制作物一覧用のコンポーネントに投稿一覧を取得した場合は問題なく動いており、importするコンポーネントおよび該当箇所のコード内容も同じであるが、トップページからアクセスした場合は動かない。
※本当にコードが同じかどうかも分からないのでもう少しシンプルな形でサンプルを作って検証したい。

Google Fontsが読み込めない【解決】

global.scssにGoogle Fontsを読み込んだら、ローカルでは表示されたが本番では表示されなかった。
_document.jsのHead内にlinkで記述する。
Next.13ではnext/fontで読み込む(詳細ツリー)

別ページへのアンカーリンク

next/linkではアンカーリンクがサポートされていない。
今回のポートフォリオでは、制作物一覧以外の項目をすべてトップページに集めているため、制作物一覧からプロフィール欄などに戻る際、別ページへのアンカーリンクが必要。

当初これを使っていたが、別ページへの飛ばし方が分からなかった(ないのかも、要調査）ので取りやめる。

こちらの方(似た名前がある)　https://1000ch.net/posts/2017/react-router-hashlink.html
サンプルが別ページへのアンカーリンクとなっているのでおそらくできるが、インストール自体がうまくいかなかった。環境設定が間違っているかもしれないので要検証。

CSSを使う系のコンポーネントが使えない

Swiperを使おうと思ったが「○○というセレクタはないよ」のエラーが出てしまった。
多分何らかの環境設定が間違っている。

急に環境変数を読まなくなる

.env.localで環境変数(APIキーとドメイン)を指定していたが、ある時点(おそらくgetStaticPathを指定したあたり)から急に読めなくなった。
頭にNEXT_PUBLIC_を追加することで動くようにはなったが、getStaticPropsとgetStaticPathしか使用していないため、これが必要になる理由が不明。
参考：https://maku.blog/p/gbpeyov/

後から思い出したり解決したりし次第、追加されます。