NextJs - Dynamic routing

1. /board/{id}로 라우팅

  const navigateToBoard = (boardId:any, boardName:any) => {
    router.push({
      pathname: `/board/${boardId}`,
      query: {
        board_name: boardName
      }
    });
  };

 

2. /pages/board/[id].tsx 와 같은 방식으로 Dynamic routing이 가능

import { useRouter } from 'next/router'
import { useSession, SessionProvider } from "next-auth/react";
import { socket, WebsocketProvider } from '../socket/websocketContext';
import { Websocket } from '../socket/websocket';
export default function Page() {
  const router = useRouter()
  return (

      <SessionProvider>
        <p>Post Id: {router.query.id}</p>
      <WebsocketProvider value={socket}>
        <Websocket board_name={router.query.board_name}/>
      </WebsocketProvider>
    </SessionProvider>
  )
}

• pathname : [id].tsx 이므로 router.query.id로 가져올 수 있다

• query에 추가한 board_name은 router.query.board_name으로 가져온다.