export default function Home() {
return "hi";
}
router 기능 필요없이, pages 안에 파일 이름이 router 주소가 된다.
index.tsx
: '/' 메인페이지
react 자체를 import 할 필요 없음
장점
앱에있는 페이지들이 미리 렌더링이 된다
정적으로 생성됨
server-side rendering으로 SEO에 장점이 있다.
CRA
와 next
차이점
clinet-side render하는 앱을 만듬
: 브라우저가 유저가 보는 ui를 만드 는 것
import NavBar from "@/componets/NavBar";
export default function Home() {
return (
<div>
<NavBar />
<h1>Hello</h1>
</div>
);
}
import NavBar from "@/componets/NavBar";
export default function Potato() {
return (
<div>
<NavBar />
<h1>About</h1>
</div>
);
}
import Link from "next/link";
import { useRouter } from "next/router";
export default function NavBar() {
const router = useRouter();
return (
<nav>
<Link legacyBehavior href="/">
<a style={{ color: router.pathname === "/" ? "red" : "blue" }}>Home</a>
</Link>
<Link legacyBehavior href="about">
<a style={{ color: router.pathname === "/about" ? "red" : "blue" }}>
About
</a>
</Link>
</nav>
);
}
<Link href="/">
<a>Home</a>
강의에서는 이렇게만 해도 가능했는데, next.js가 업데이트 하고 바뀌었다.
npx @next/codemod new-link .
위에 설치 후,
<Link><a id="link">Home<a></Link>
에서 <Link id="link">Home</Link>
변경.
legacyBehavior
를 추가해서 <Link legacyBehavior><a id="link">Home</a></Link>
이런식으로 변경해서 쓸 수 있다.