9/26 - Next.js 페이지 라우팅

Next.js Routing 하기

[Next js] Route 이해하기 (velog.io)

[Next js] Route 이해하기

윗 글을 참고하여 정리해보았다.

방법	설명
next/link 컴포넌트	import Link from 'next/link; <Link href='path'> 를 통하여 라우팅 할 수 있다.
next/router 모듈	import { useRouter } from 'next/router'; const router = useRoute(); 를 통하여 라우터를 만들 수 있다. router.push({   pathname: '/post/[pid]',   query: { pid: post.id }, }) 의 예시로 라우팅 할 수 있다.
next/navigation 모듈	import { usePathname, useRouter } from 'next/navigation'; const pathname = usePathname(); const router = useRouter(); 로 라우터를 만들 수 있다.

단, server component에서는 useRouter 모듈 같은 동적 모듈(훅)을 사용한 이동은 불가능하다.

Link와 같은 정적 라우팅만 가능한 것에 유의하자.

 

[Error Note] "NextRouter was not mounted." 해결하기 (velog.io)

[Error Note] "NextRouter was not mounted." 해결하기

또한, client component에서도 useRouter을 사용할 시

Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted

와 같은 오류가 발생하게 되는데, 해당 내용에 대한 블로그 글은 위에서 확인할 수 있다.

 

정리하자면, Next.js 13 버전에서 App Routing 방식을 사용할때 client component에서는 useRouter을 사용하지는 못하고,

useNavigation 모듈을 사용하여 페이지 라우팅을 구현할 수 있다.

global에 * 로 적용한 폰트가 적용되지 않는 문제

Next.js에서 구글 웹 폰트 최적화하기 with emtion (velog.io)

Next.js에서 구글 웹 폰트 최적화하기 with emtion

*로 지정해도

textarea나 input, button 같은 요소는 자동으로 스타일을 상속하지 않으므로 아래와 같이 상속 받을 수 있도록 함.

html {
	font-family: ${poorStory.style.fontFamily};
}
* {
	font-family: inherit;
}