Static / Dynamic routing

Static routing은 페이지 이동시 내가 직접 경로를 설정해주는것이다

import {useRouter} from 'next/router'

export default function StaticRoutingPage(){
    const router = useRouter()

    const onClickMove = () =>{
        router.push("/05-02-static-routed")
    }

    return(
        <button onClick={onClickMove}>페이지 이동하기</button>
    )
} 

이럴 경우 페이지가 혹시 10000000개 이상이 넘어 간다면 하나하나 경로를 설정하는 것에 어려움을 느낄것이다
그것을 보완하기 위해 Next.js에서 제공하는 것이 동적라우팅이다

Dynamic routing은 폴더를 대괄호로 감싸서 변수명으로 만들어준다

router.query = { boardId: 1 }

router를 통해 페이지 이동시 정보를 넘겨주는 방법은

router.push를 이용한다

import { useRouter } from 'next/router'

export default function StaticRoutingPage(){
    const router = useRouter()

    const onClickMove1 = () => {
        router.push("/05-06-dynamic-routed-board/83011")
    }

    const onClickMove2 = () => {
        router.push("/05-06-dynamic-routed-board/83012")
    }

    const onClickMove3 = () => {
        router.push("/05-06-dynamic-routed-board/83013")
    }

    return (
        <div>
            <button onClick={onClickMove1}>83011번 게시글로 이동하기!!!</button>
            <button onClick={onClickMove2}>83012번 게시글로 이동하기!!!</button>
            <button onClick={onClickMove3}>83013번 게시글로 이동하기!!!</button>
        </div>
    )

}

import { useQuery, gql } from '@apollo/client'
import { useRouter } from 'next/router'

const FETCH_BOARD = gql`
    query fetchBoard($number: Int){
        fetchBoard(number:$number){
            number
            writer
            title
            contents
        }
    }
`

export default function StaticRoutedPage(){
    const router = useRouter()
    console.log(router)

    const { data } = useQuery(FETCH_BOARD, {
        variables: { number: Number(router.query.number) }
    })

    console.log(data)

    return (
        <div>
            <div>{data?.fetchBoard.number}번 게시글에 오신 것을 환영합니다!!</div>
            <div>작성자: {data?.fetchBoard.writer}</div>
            <div>제목: {data?.fetchBoard.title}</div>
            <div>내용: {data?.fetchBoard.contents}번 게시글에 오신 것을 환영합니다!!</div>
        </div>
    )

}```