//tips
//smart contract
apiの基本的な形を調べてる。
const getFakePerson=async()=>{
const res = await fetch(`https://api.aoikujira.com/time/get.php`)
const {results} = await res.json()
console.log(results)
}
このasync関数はgetFakePerson()として呼び出せる。{results}とはresのjsonオブジェクトにあるresultsプロパティのこと。
export async function getServerSideProps()のコンポーネントの使い方がまずいのではないか。
コンポーネントの役割について復習。
関数コンポーネントは下記のようにかける。
Function foo(引数){
return …jsx表示…
}
一般的な利用方法は<コンポーネント名 />をjsxの中のタグとして記載すること。これによりタグの中に関数でreturnしたエレメントがはめ込まれる。
先のexport default Pageにはfunction Page({ data }) {の情報は入っているが、export async function getServerSideProps() {の情報は入っおらず、これはfunction Page()の中に反映しなければいけなさそう。
import React,{useState} from 'react'
function Page() {//Page({ data })
// Render data...
//var data=data
// <getServerSideProps />
const [msg]=useState('hi')
return(
<getServerSideProps message={msg} />
)
}
// This gets called on every request
export async function getServerSideProps(props) {
// Fetch data from external API
try{
const res = await fetch(`https://api.aoikujira.com/time/get.php`)
const data = await res.json()
const ob=JSON.parse(data)
console.log(ob)
props.msg=ob
// Pass data to the page via props
return(
<p>{ props.msg}</p>
) //{ props: { data } }
}catch(err){
console.error(err)
}
}
export default Page
に変更したがうまく表示されない。
asyncにすると連携の仕方が変わるのだろうか。
If you export an async function called getStaticProps from a page, Next.js will pre-render this page at build time using the props returned by getStaticProps.
export async function getServerSideProps(props)の使い方が少し特殊なのかもしれない。
また、一般的な getServerSideProps は、レンダリングに必要な props を返却することが主な用途とのこと。
class Index extends Component {
state = {}
render() {
console.log(this.props)
return (
<div>
<h1>Our Index Page!!</h1>
</div>
);
}
}
export const getStaticProps = async () => {
console.log('fetching data')
const res = await fetch('https://jsonplaceholder.typicode.com/todos/1')
const posts = await res.json()
return {
props: {
posts,
},
}
}
ここで下記のような属性であるpropsの中にdataが埋め込まれることはわかったが、最終的な反映先はどのように判別するのか。
return {
props: data
}
visual studioのサーチ機能を使用すれば、command+fをしなくてもすぐに探せる。
本日教えてもらった中で、next.jsのpagesフォルダは各jsファイルでルートを保有しており、一つのファイルで一つのコンポーネントがベストとのこと。
export async function getServerSideProps(props) {
return {
props: {
test: 1
}
}
}
として、console.log(props)をindex.jsのexport default function Home(props) {の中に入れるとコンソールの中で確認することができた。
export default function Home(props) {のreturn (の中で {props.test}を記述することで解決できた。
ここからapiの内容を反映できるようにする必要がある。
気合いでなんとかした。力尽きた。
import {useState} from 'react'
export default function Home({ data }) {
const heroPost = data.status
console.log(data)
console.log(data.results)
const obj=Object.values(data.results[0])
return (
<>
<p>{data.results[0].address1}</p>
<p>{obj}</p>
</>
);
}
export async function getServerSideProps() {
//郵便api http://zipcloud.ibsnet.co.jp/doc/api
const url = 'https://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060'
const res = await fetch(url)
const data = await res.json()
// Pass data to the page via props
return { props: { data } }
}
参考：
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/values
