
Next.js에서 Routing기능은 아주 쉽다.
app폴더 밑에 /~~의 ~~를 써주면 끝이다.
밑에 js파일은 page.js로 통일시킨다.
import Link from "next/link";
export default function Home() {
return (
<main>
<div className="navbar">
<Link href="/">home</Link>
<Link href="/list">list페이지</Link>
</div>
<h1 className="title">Programming Log</h1>
<p className="title-sub">by dev kim</p>
</main>
)
}
Link를 사용하면 쉽게 라우팅 기능을 사용할 수 있다.
페이지가 많다면 그때마다 Link기능을 구현할 수 없으니 layout.js파일을 이용하도록 한다.
import Link from "next/link";
import './globals.css';
export default function RootLayout({ children }) {
return (
<html lang="en">
<head />
<body>
<div className="navbar">
<Link href="/">Home</Link>
<Link href="/list">List</Link>
</div>
{children}
</body>
</html>
)
}