✨
基礎から始めるNext.js【10Data Fetch (ClientSide1)】
基礎から始めるNext.js【10Data Fetch (ClientSide1)】
YouTube: https://youtu.be/rdk2oFHCzyk
今回からクライアントサイドのデータフェッチングについて解説します。
まずは、前回作成した「posts」のタイトル一覧を
詳細ページへのリンク付きで表示できるようにしましょう。
【追記】const res = await axios.get(http://localhost:1337/api/posts
)
こちらの部分ですが、動画内でgetをつけ忘れていますので、
追加をお願いいたします。
Strapiローカルサーバー起動コマンド
npm run develop
ポストデータ取得
http://localhost:1337/api/posts
axioxインストールコマンド
npm i axios
nextjs-app-api/package.json
"dependencies": {
"axios": "^1.1.3",
},
pages/index.tsx
import Link from 'next/link'
import Layout from '../components/Layout'
import { Heading } from '@chakra-ui/react'
import { ListItem, UnorderedList } from '@chakra-ui/react'
export default function Home() {
return (
<Layout title="Next App TopPage" content="Generated by create next app">
<Heading as="h1" size="4xl">
Welcome to <a href="https://nextjs.org">Next.js!</a>
</Heading>
<UnorderedList>
<ListItem>
<Link href={'/hello/1'}>to Hellopage</Link>
</ListItem>
<ListItem>
<Link href={'/clientside'}>to Client Side Fetch</Link>
</ListItem>
</UnorderedList>
</Layout>
)
}
pages/clientside/index.tsx
import Link from 'next/link'
import Layout from '../../components/Layout'
import { Heading } from '@chakra-ui/react'
import { ListItem, UnorderedList } from '@chakra-ui/react'
import { useEffect, useState } from 'react'
import axios from 'axios'
export default function ClientSide() {
const [posts, setPosts] = useState([])
useEffect(() => {
(async () => {
const res = await axios.get(`http://localhost:1337/api/posts`)
console.log(res.data.data)
setPosts(res.data.data)
})()
}, [])
return (
<Layout title="Client Side Posts List Page" content="Generated by create next app">
<Heading as="h1" size="4xl" mb={2}>
Client Side Posts List
</Heading>
<UnorderedList>
{posts &&
posts.map((post) => (
<ListItem key={post.id} fontSize={20} mb={1}>
<Link href={`/clientside/${post.id}`}>
{post.attributes.title}
</Link>
</ListItem>
))}
</UnorderedList>
</Layout>
)
}
Discussion