0220.md

Next.jsの機能

下準備

プロジェクトに以下のディレクトリとファイルを作る

• components
  • header.jsx
  • hero.jsx
  • footer.jsx
  • layout.jsx
  • item.jsx
  • itemlist.jsx
• lib
  • api.js
• pages/users
  • index.jsx
• pages/comments
  • index.jsx

Componentを作成

header.jsx

const Header = props => (
  <header>HEADER</header>
)
export default Header

footer.jsx

const Footer = props => (
  <footer>FOOTER</footer>
)
export default Footer

hero.jsx

const Hero = ({title, subtitle}) => (
  <>
    <h1>{title}</h1>
    <p>{subtitle}</p>
  </>
)
export default Hero

layout.jsx

import Header from 'components/header'
import Footer from 'components/footer'

const Layout = props => (
  <>
    <Header />
    <main>{props.children}</main>
    <Footer />
  </>
)
export default Layout

Layoutを適用

pages/_app.js

import Layout from 'components/layout'

const App = ({ Component, pageProps }) => {
  return (
    <>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </>
  ) 
}
export default App

ページ作成

pages/users/index.jsx

import Hero from 'components/hero'
const params = { title: 'Users', subtitle: 'ユーザー一覧' }
const Users = () => {
  return (
    <>
      <Hero {...params} />
    </>
  )
}

export default Users

pageを作成

pages/comments/index.jsx

import Hero from 'components/hero'
const params = { title: 'Comments', subtitle: 'コメント一覧' }
const Comments = () => {
  return (
    <>
      <Hero {...params} />
    </>
  )
}

export default Comments

api作成

libs/api.js

import axios from 'axios'
const BASE_URI = 'https://jsonplaceholder.typicode.com/'

const fetchData = async (endpoint) => {
  const json = await axios.get(`${BASE_URI}${endpoint}`)
  return json.data
}

const getAllUser = async () => {
  const endpoint = 'users'
  const users = await fetchData(endpoint)
  return users
}

const getAllComments = async () => {
  const endpoint = 'comments'
  const comments = await fetchData(endpoint)
  return comments
}

export {getAllUser, getAllComments}

api を適用

pages/users/index.jsx

+ import { getAllUser } from 'lib/api'
import Hero from 'components/hero'
const params = { title: 'Users', subtitle: 'ユーザー一覧' }

- const Users = () => {
+ const Users = ({ users }) => {
  return (
    <>
      <Hero {...params} />
+     <p>{JSON.stringify(users)}<p> 
    </>
  )
}

+ const getStaticProps = async () => {
+   const users = await getAllUser()
+   return {
+     props : {
+       users
+     }
+   }
+ }
+ export { getStaticProps }

export default Users

ベタがきしてみる

pages/users/index.jsx

import Hero from 'components/hero'
const params = { title: 'Users', subtitle: 'ユーザー一覧' }

const Users = ({ users }) => {
  return (
    <>
      <Hero {...params} />
-     <p>{JSON.stringify(users)}<p>
      <ul>
        {
          users.map(user => (
            <li key={user.id}>{user.name}</li>
          ))
        }
      </ul>
    </>
  )
}

const getStaticProps = async () => {
  const users = await getAllUser()
  return {
    props : {
      users
    }
  }
}
export { getStaticProps }

export default Users

componentにする

components/item.jsx

const Item = ({name}) => (
  <li>{name}</li>
)
export default Item

components/itemlist.jsx

import Item from 'components/item'
const ItemList = ({ list }) => (
  <ul>
  {
    list.map(item => (
      <Item key={item.id} name={item.name} />
    ))
  }
  </ul>
)

export default ItemList