Next.js(2)

조은형·2023년 11월 20일

routing

Next.js에서 Routing기능은 아주 쉽다.

app폴더 밑에 /~~의 ~~를 써주면 끝이다.
밑에 js파일은 page.js로 통일시킨다.

Link

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>
  )
} 
profile
좋은 형

0개의 댓글