//tips
//smart contract
Indexからの遷移が遅いのは最大userid値の取得部分と読み込みがバッティングしているせいかもしれないと考え、useeffectを導入。こちらの形で様子を見る。
useEffect(() => {
let posts = []
const colRef= collection(firebaseApp, "mydata")
getDocs(colRef)
.then((snapshot)=>{
snapshot.docs.forEach(doc => {
posts.push(JSON.stringify(doc.data().userid))
});
}).then(()=>{
setMaxid(posts.reduce(aryMax))
})
console.log('Maxid')
console.log(Maxid)
}
, [Maxid])
[]にすると値を取得できないまま終了してしまうので[Maxid]とした。
遷移にはあまり影響しなかったかもしれないがコンソールは綺麗になったのでよしとする。
別途気になったのがNFT画像表示は非同期で行われているのかというところ。
{image &&
<div>
<img src={image} alt="" width="250" height="250" onClick={handleClickNFTImage}/>
</div>
}
データベースから取得できたタイミングで表示という形にした。
Urlにてダイレクトパスを入れた場合と検索からダイレクトパスに飛ぶ場合の体感速度を比較。そこまで大差ないように感じたがダイレクトパスを直接打ち込んだ方が若干早そう。
これはindexで一度データベースにアクセスしてからルートlイングしていることが問題のように思われる。
//authをもとにクリック主のデータベース情報の取得
getDocs(q)
.then((snapshot)=>{
snapshot.docs.forEach(doc => {
const data = doc.data()
if(data.userid)
{
console.log(data.userid)
notexist=false
goid=data.userid
}
});
}).then(()=>{
if(notexist){
setError(true)
}else{
router.push('/ID/'+ goid)
}
})
該当データの抽出と遷移は別の形に分けたほうが体感速度としてはいいかもしれない。
他にもadblockを外した場合の遷移を試したがついている場合と大差ない。
route is changedが遷移後にもコンソールに表示されるので調べていく。
const [loading,setLoading]=useState(false)
Router.events.on("routeChangeStart",(url)=>{
console.log('Route is changing..');
setLoading(true)
})
Router.events.on("routeChangeComplete",(url)=>{
console.log('Route is changed');
setLoading(false)
})
{loading&&<Loader />}
探してみると下記のようなrouteChangeComplete の問題点もあるよう。
https://github.com/vercel/next.js/issues/15082
まずはboolで分岐させ余計なstate更新がされないようにすることで問題に対処してみる。
const [finloading,setfinLoading]=useState(false)
Router.events.on("routeChangeComplete",(url)=>{
if(!finloading){
console.log('Route is changed');
//NProgress.done()
setLoading(false)
setfinLoading(true)
}
})
だいぶ許容範囲の遷移スピードに近づいてきたか。
ninja.forEach(Item => {のかぶりを見つけたので統合。
できうる限りでリファクタリングを行なった。
先にデプロイをおこなってみる。
deploy先としてはvercelが良さそう。
https://kontent.ai/blog/comparison-of-jamstack-hosting-platforms-for-next-js/
https://blog.charlesloubao.com/best-platforms-to-deploy-a-nextjs-project/
https://blog.charlesloubao.com/best-platforms-to-deploy-a-nextjs-project/
https://docs.digitalocean.com/tutorials/app-nextjs-deploy/
Vercelにデプロイする方法を模索していく。
https://maku.blog/p/j6ht5fq/
https://tomosta.jp/media/free_lesson/nextjs-basic/
まずはgithubidをvercelに連動させアカウント作成。
Githubに新たなレポジトリーを作成し、そちらをvercelに読み込ませデプロイさせる。
git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/
git push -u origin main
Vercelにそちらを読み込ませbuildingさせたところ、コンパイルエラー。
./pages/ID/[id]/edit.js
Error: React Hook "useRouter" is called in function "edit" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use". react-hooks/rules-of-hooks
Error: React Hook "useRef" is called in function "edit" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use". react-hooks/rules-of-hooks
Error: React Hook "useState" is called in function "edit" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use". react-hooks/rules-of-hooks
Error: React Hook "useStyles" is called in function "edit" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use". react-hooks/rules-of-hooks
Warning: Do not use <img>. Use Image from 'next/image' instead. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element
Useが先頭につくものが軒並みエラーの要因になっているよう。どうしたものか原因を究明する。
