[Next.js]uid에서 페이지를 동적으로 생성하려면 다음과 같이 하십시오.

하고 싶은 일

새 발언 버튼을 눌렀을 때
/articles/[uuid]/edit
이런 URL을 만들고 싶어요.

방법

next/link 또는 next/router 사용
4

next/link의 경우

import Link from 'next/link'

function Posts({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link href={`/articles/${encodeURIComponent(uuid)}`}/edit>
            <a>{post.title}</a>
          </Link>
        </li>
      ))}
    </ul>
  )
}

export default Posts

4

next/router의 경우

import { useRouter } from 'next/router'

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

  return (
    <button type="button" onClick={() => router.push('/articles/[uuid]/edit')}>
      Click me
    </button>
  )
}

Hooks can only be called inside of the body of a function component

다음 단추를 눌렀을 때createNewArtical을 실행합니다
“Hooks can only be called inside of the body of a function component”
출력 오류

import { NextRouter, Router, useRouter } from 'next/router';
import { uuid } from 'uuidv4';

const createNewArticle = () => {
  const router = useRouter();
  router.push({
    pathname: '/articles/[uuid]/edit',
    query: { uuid: uuid() },
  });
};

const Hogehoge = () => {
  return (
    <>
    ...省略
      <button
        type="button"
        onClick={() => createNewNote()}
      >
        投稿
      </button>
    </>
  );
};

Unhandled Runtime Error

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

까닭

왜냐하면useRouter가create New Artical에서 정의가 됐어요.
구성 요소를 불러올 때 사용할 고리를 표시하기 위해서
useRouter의 방법 내 가장 바깥쪽 정의로 수정해야 합니다

import { NextRouter, Router, useRouter } from 'next/router';
import { uuid } from 'uuidv4';

const createNewArticle = (router: NextRouter) => {
  router.push({
    pathname: '/articles/[uuid]/edit',
    query: { uuid: uuid() },
  });
};

const Hogehoge = () => {
  const router = useRouter();
  return (
    <>
    ...省略
      <button
        type="button"
        onClick={() => createNewNote(router)}
      >
        投稿
      </button>
    </>
  );
};

참고 자료

Next.js에서 URL을 관리하고 제어하는 방법 (next/link와next/router)
React Hooks의 규칙을 잘 모르면 오류 처리법에 빠질 수 있어요.
next/link
next/router