Next에서도 리액트와 마찬가지로 <a>를 사용해서 라우팅을 시도하면 전체 애플리케이션이 새로고침되어서 속도가 느려진다.
대신 리액트와 비슷하게 Link를 사용한다.
다만 Next.js에서 router를 제공하기때문에 react-router-dom과 같은 dependencies가 줄어든다.
- components/NavBar.js
'use client'
import Link from "next/link";
import { useRouter } from "next/navigation";
export default function NavBar() {
const router = useRouter();
return (
<nav>
<Link href="/">
<a style={{ color: router.pathname === "/" ? "red" : "blue" }}>Home</a>
</Link>
<Link href="/about">
<a style={{ color: router.pathname === "/about" ? "red" : "blue" }}>
About
</a>
</Link>
</nav>
);
}
-
next/router -> next/navigation으로 변경됨
-
최상단에 'use client' 작성
https://nextjs.org/docs/messages/react-client-hook-in-server-component
왜? 서버 컴포넌트에서 리액트 클라이언트 훅을 사용했기때문에 에러가 발생한다. (버전13부터 변경된 부분인듯)
useRouter
https://nextjs.org/docs/pages/api-reference/functions/use-router#router-object
-
router object
- pathname- query(동적경로)
- isFallback
- ...등
-
router.push(url, as, options)
- options에 scroll의 기본값은 true이다. 이는 route 후 페이지 맨 위로 스크롤을 제어한다고한다. 리액트에서<Link>를 사용 하면 페이지 상단으로 이동하지않는게 기본값인데 -
버전13부터는
<Link>내부에<a>태그를 넣으면 에러가 발생한다. 굳이 사용하고 싶다면 legacy code를 사용할수있게하는 속성을 Link 태그에 추가해야한다. 하지만 router를 어떻게 쓰는지 보기위해서 강의 코드를 그대로 올린다.
pages/about.js
import NavBar from "../components/NavBar";
export default function Potato() {
return (
<div>
<NavBar />
<h1>About</h1>
</div>
);
}pages/index.js
import NavBar from "../components/NavBar";
export default function Home() {
return (
<div>
<NavBar />
<h1>Hello</h1>
</div>
);
}프로젝트 생성시 만들어진 app/page.js에 위 코드를 작성하면
globals.css 안에 body로 정의된 css가 적용되어서 배경에 그라디언트가 반복적으로 적용된다.
하지만 pages/about.js에는 적용되지않는다. 왜그럴까하고 살펴보았다.
- app/layout.js
import './globals.css'
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
)
}layout 파일에 RootLayout 컴포넌트가 있고 여기에 html과 body가 있었다. app/page.js 파일은 자동으로 이 컴포넌트의 children에 전달되어서 body태그의 영향을 받는 것 같다.
일단은 강의를 따라가야하니 page.js 파일을 없애고 pages/index.js 파일을 생성해주었다.
Q. 로컬에서의 실행을 종료한 뒤 다시 npm run dev를 입력하면 가끔 3000 포트가 사용중이라고 나온다.
# 3000번 포트를 사용하는 프로세스를 찾습니다. netstat -ano | findstr :3000
해당 PID를 이용하여 프로세스를 강제로 종료합니다.
taskkill /PID /F
강제로 kill한 뒤 다시 npm run dev를 실행시키면 3000 포트로 잘 작동된다.
