//tips
嶋津さんと打ち合わせ。ベータ版開発市場をターゲットにしているサイトを教えてもらった。ペイしているのかはわからないが、面白い切り口でコミュニティを成長させているなぁと興味深かった。
https://itch.io/
//smart contract
Public下のパスが壊れたものの修復。
src/utils/config.tsの中身を一旦layout.jsの中に入れてみようと思ったがtypescriptをjsに直し、さらにconfigがどう作用していくのかがよくわからなかったので、先にimport Image from 'next/image’で対応した。
こちらが本来のやり方だがvercelのサーバーでデプロイしないと使えない場合があるなどと制限があるもの。
試してみると無事にダイレクトパスの中でもpublicからの画像の引用がうまくいくようになった。
import Image from 'next/image'
export default function MyImage(props) {
//let fname = './' + props.fname
let fname = '/' + props.fname
let size = props.size + "px"
return (
// <img width={size} border="1"
<Image width={size} height="250px" border="0"
src={fname} />
)
}
https://nextjs.org/docs/api-reference/next.config.js/runtime-configuration
Layoutに現在おいているアドレス部分を個別のページに移す。
<div>
<Typography variant="h5" >
Address: 0xa242fcb2acbb118ea1b6829efe8b7e2087b00000
</Typography>
<Typography variant="h6" >
Following:200 Follower:200 gifted:2000
</Typography>
<MailIcon /><InboxIcon />
</div>
さらに、db.jsonの中にfetchした情報を上に組み込むための情報源を追加。
"address": "0xa242fcb2acbb118ea1b6829efe8b7e2087b00000",
"conection": {
"Following": "200",
" Follower": "200",
" gifted": "200"
},
これをもとに個別ページにデータを反映させる。
Fetch場所はuseeffectではなきないことを思い出したので、これらの情報もgetStaticPropsから取得する必要がありそう。
useEffect(() => {
fetch('http://localhost:8000/notes'+id)
.then(res => res.json())
.then(data => setNotes(data))
}, [])
また、下記のように試したが、これらのことは特に必要なく、もっとシンプルにできた。
if(notes != data){
setNotes(data)
console.log("done")
console.log(notes.address)
}
console.log("notes")
console.log(notes)
console.log(data[0].address)
結局,getstaticpropsでデータそのものを継承させて、実際の反映箇所に Address: {data[0].address}とdataに入っているaddressの場所を記載すればよかった。
export const getStaticProps = async (context) => {
console.log('context')
console.log(context)
const id = context.params.id;
const res = await fetch('http://localhost:8000/notes'+id);
const data = await res.json();
return {
props: { data,id }
}
}
export default function edit({data,id}) {//{id}
他の箇所も同じく。下記で対応できた。notesの箇所もdataから引っ張る形に変更。data.map(note => (とした。
<Typography variant="h6" >
Following:{data[0].conection.Following} Follower:{data[0].conection.Follower} gifted:{data[0].conection.gifted}
</Typography>
以前聞いていたMulterを利用してimageのアップロードを行うのがベストかと考えていたが、念の為色々探してみると、Multerは主にexpressで使用されるもののよう。
Next.jsではどのように保管・表示するのがベストなのか模索する。
WebPは、サイトを軽量化でき、JPEGやPNG、GIFの各利点と高い圧縮率を兼ね備えたフォーマットだが、まだ採用されていないブラウザもある。
next/imageはJPEGやPNGなどを自動的にWebPの様式に変換してくれているとのこと。
画像最適化についての設定はnext.config.jsのimagesプロパティで行うとのことで先のpublic下に画像を置く話と若干話がつながってきた。
参考：
https://zenn.dev/catnose99/articles/883f7dbbe21632a5254e
Imageの保管場所はfirebaseかと思っていたが最近はSupabaseというものも出ているよう。
https://www.to-r.net/media/supabase-next/
「next.js image firebase」で検索するとザクザクとtipsが出てきたのでそれらをもとに実装していけば良さそう。
まずはfirebaseで試していくことにする。ただ、最近のスクリプトはほぼjsではなくtypescriptで書かれている。jsのものをなんとか探し出す。
https://dev.to/itnext/how-to-do-image-upload-with-firebase-in-react-cpj
typescriptもある程度参考にできるようにYouTubeと書籍で学習しておく。
これを見ているとtsc sandbox.tsとすることでsandbox.jsを複製できることがわかった。これは助かる。
