[ 18 ] Next.js dynamic 라우팅 실습하기

정적 라우팅의 한계 

static 라우팅을 사용하면 매번 새로운 페이지로 이동할 때 마다 폴더를 생성해 주어야 한다.

 

게시판에 수천, 수만개의 게시글이 있다고 한다면, 이렇게 폴더를 만들어 운영하기는 불가능 할것이다.

 

Next 의 동적 라우팅

동적으로 받을 주소를 [] 안에 담으면 된다. 아래의 예시는 qqq라는 변수에 동적 라우팅의 정보를 담는다.

 

router 변수를 만들어 주고 router.query 로 정적 주소의 값을 받아온다

const router = useRouter();

console.log(router.query.qqq);

 

전체 예시코드

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 StaticRoutingMovedPage() {
  const router = useRouter();
  console.log(router);

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

  console.log(data);
  return (
    <div>
      <div>{router.query.qqq}번 페이지 이동이 완료되었습니다.</div>
      <div>작성자 : {data?.fetchBoard?.writer}</div>
      <div>제목 : {data?.fetchBoard?.title}</div>
      <div>내용 : {data?.fetchBoard?.contents}</div>
    </div>
  );
}

 

게시글을 등록하면 바로 등록한 게시글로 동적 라우팅 하기 

상태변수를 사용해서 사용자의 input을 mutation에 넣으면 되지만, 실습에서는 하드코딩으로 내용을 넣었다.

게시글 등록 페이지 

import { useMutation, gql } from "@apollo/client";
import { useRouter } from "next/router";

const 나의그래프큐엘세팅 = gql`
  mutation createBoard($writer: String, $title: String, $contents: String) {
    createBoard(writer: $writer, title: $title, contents: $contents) {
      _id
      number
      message
    }
  }
`;

export default function GraphqlMutationPage() {
  const router = useRouter();

  const [나의함수] = useMutation(나의그래프큐엘세팅);
  const onClickSubmit = async () => {
    try {
      // try에 있는 내용을 시도하다가 실패하면 , 다음에 있는 모든 줄들을 무시하고, catch 에 있는 내용이 실행됨.
      const result = await 나의함수({
        variables: {
          // variables === $ 의 역할
          writer: "훈이",
          title: "안녕하세요",
          contents: "반갑습니다",
        },
      });
      console.log(result);
      router.push(
        "/section05/05-05-dynamic-routing-board-mutation-moved/" +
          result.data.createBoard.number
      );
    } catch (error) {
      alert(error.message);
    }
  };
  return <button onClick={onClickSubmit}>GraphQL-API 요청하기</button>;
}

 

등록된 게시글 상세 조회 페이지

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 StaticRoutingMovedPage() {
  const router = useRouter();
  console.log(router);

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

  console.log(data);
  return (
    <div>
      <div>{router.query.number}번 페이지 이동이 완료되었습니다.</div>
      {/* <div>작성자 : {data ?? data.fetchBoard.writer}</div> */}
      <div>작성자 : {data?.fetchBoard?.writer}</div>
      <div>제목 : {data?.fetchBoard?.title}</div>
      <div>내용 : {data?.fetchBoard?.contents}</div>
    </div>
  );
}