TIL) 스파르타 개발일지 23-02-03

 

next.js 페이지 이동, 라우터

Page와 Routes

• Next.js에서의 페이지란? 1, 2 두 가지 방법 모두 파일 기반 라우팅을 이용하여 페이지를 만들 수 있습니다.
• // pages/about.js (1) export default function About() { return <div>About Page</div> } // pages/about/index.js (2) export default function About() { return <div>About Page</div> } // pages/index.js (3) export default function Index() { return <div>Index Page</div> }
• pages 폴더 안에 있는 react component를 의미합니다.

페이지 이동

• next/link

import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/">Home</Link>
      </li>
      <li>
        <Link href="/about">About Us</Link>
      </li>
      <li>
        <Link href="/blog/hello-world">Blog Post</Link>
      </li>
    </ul>
  )
}

export default Home

• next/router

import { useRouter } from 'next/router'

function Home() {
  return (
    <ul>
      <li onClick={() => {router.push("/")}}>Home</li>
      <li onClick={() => {router.push("/about")}}>About Us</li>
      <li onClick={() => {router.push("/blog/hello-world")}}>Blog Post</li>
    </ul>
  )
}

export default Home

Dynamic Routes

// pages/post/[id]

import { useRouter } from 'next/router'

const Post = () => {
  const router = useRouter()
  const { id } = router.query

  return <p>Post: {id}</p>
}

export default Post

• Next.js는 dynamic routes를 제공합니다.