基礎から始めるNext.js【１０Data Fetch (ClientSide1)】

基礎から始めるNext.js【１０Data Fetch (ClientSide1)】

YouTube: https://youtu.be/rdk2oFHCzyk

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>
  )
}