[Next.js]<button>의 리다이렉트

참고) https://bbbootstrap.com/code/redirect-one-page-another-next-js-45745354

버튼을 눌렀을 때 화살표 함수를 통한 리다이렉트 코드 예시

import { useRouter } from "next/router";
const router = useRouter();
const redirect = () =>{
    router.push('another-page');
}
<button onclick={redirect}>Click Me</button>

적용 코드

리액트 컴포넌트 이름 에러

React Hook "useRouter" is called in function "signIn" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".

뜻 : 리액트 컴포넌트 이름은 대문자로 시작하라는 뜻이다!

singIn() 함수에서 => SignIn() 함수로 바꿔줬다 !

"next/router" 에러

./src/app/signIn/page.tsx
ReactServerComponentsError:
You have a Server Component that imports next/router. Use next/navigation instead.
Learn more: https://nextjs.org/docs/app/api-reference/functions/use-router
Import trace:
./src/app/signIn/page.tsx

뜻: useRouter를 "next/router" 대신 "next/navigation"에서 가져오란 뜻이다!

use client 에러

Unhandled Runtime Error
Error: useRouter only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/react-client-hook-in-server-component

useRouter는 client 컴포넌트에서만 작동한다. 따라서 "use client"라고 작성해줘야 한다.