Next.jsでHello World

2021-07-26

Hello World with Next.js

作りたいアプリを思いついたわけではないですがNext.jsでハローワールドしてみました。

Welcome to Next.js!

自分用メモ

ページ遷移と値の受け渡しはuseRouterを使う。

遷移元

import React, {useEffect, useState} from 'react'
import axios from 'axios'
import { useRouter } from 'next/router'

const Posts = () => {
  const [data, setData] = useState([])
  const router = useRouter()

  useEffect(() => {
    fetch()
    console.log('loaded')
  },[])

  const pageNav = (item) => {
    router.push({
      pathname:'detail',
      query: {
        title: item.title,
        body: item.body
      }
    })
  }

  const fetch = async() => {
    const result = await axios('https://jsonplaceholder.typicode.com/posts')
    setData(result.data)
  }

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6">
      {
        data.map((item, i) => {
          return (
            <div onClick={()=> pageNav(item)} key={i} className="max-w-xs rounded overflow-hidden shadow-lg my-2">
              <div className="px-6 py-4">
                <div className="font-bold text-xl mb-2">{item.title}</div>
                <p className="text-grey-darker text-base">
                  {item.body}
                </p>
              </div>
            </div>
          )
        })
      }
    </div>
  )
}

export default Posts

遷移先

import React, {useEffect} from 'react'
import { useRouter } from 'next/router'
import Alert from '../../components/alert'

const Detail = () => {
  const router = useRouter()
  const title = router.query.title
  const body = router.query.body

  useEffect(() => {
    console.log('loaded')
  },[])

  return (
    <div className="max-w-xs rounded overflow-hidden shadow-lg my-2">
      <div className="px-6 py-4">
        <div className="font-bold text-xl mb-2">{title}</div>
        <p className="text-grey-darker text-base">
          {body}
        </p>
         <div className="justify-items-center">
          <Alert title={title} body={body}/>
        </div>
      </div>
    </div>
  )
}

export default Detail