[Next.js] pages 폴더 라우팅 구조 및 Link 이동 하기

Next.js pages 라우팅과 링크 이동

📑Next.js pages 폴더구조 이해하기

Next.js에로 프로젝트를 생성하면 자동으로 pages 폴더가 생성이 된다.

Next.js 특징으로 폴더 구조 내 파일 이름으로 라우팅을 자동으로 잡아주는 것이 가능하다.

 

next.js 폴더 구조

기본으로 생성되는 index페이지 외 about.jsx, users.jsx 페이지를 추가로 생성해 줬다.

next.js에서는 별다른 작업이 없어도 자동적으로  해당 페이지에 접근이 가능하다.

export default function about() {
  return (
      <div>
        <h2>About</h2>
      </div>
  )
}

export default function users() {
  return (
      <div>
        <h2>users</h2>
      </div>
  )
}

'/about'  → /pages/about.jsx 파일 화면 접근

'/users' → /pages/users.jsx 파일 화면 접근

about url 접근 화면

위에처럼. jsx파일을 만들어서 pages 폴더에 넣어준 뒤

해당 경로로 접근해 주면 작성된 h2 태그에 값이 뜬 것을 볼 수 있다.

 

 

📌Next.js  폴더 하위 구조를 통해서 URL 경로 잡기

Next.js pages 폴더 밑에 다시 디렉터리를 만들고 파일을 넣어주면 

URL경로가 디렉토리 명 path 그대로 적용된다.

page users 경로

next.js 하위 URL

'/users'  → /pages/users/detail.jsx 파일 생성을 하면, 

폴더구조 경로로 URL로 잡히는 것을 볼 수 있다.

 

---

🔎Next.js page 이동하기

Next.js에서 Url 이동은 next/link의 Link 컴포넌트를 통해서 활성화 시킬 수 있다.

import Link from 'next/link';

위에서 만든 폴더 구조를 이제 링크이동을 시켜줄 수 있다.

<Link href="url 경로">

<Link>태그를 만들고 href 속성에 URL 경로명을 적어줘서 이용하면 된다.

 

import Link from 'next/link'
export default function index() {
  return (
      <div>
        <h2>Users</h2>
        <Link href="/users/detail">상세페이지 이동</Link>
      </div>
  )
}

users 페이지 이동 클릭 시 이동 화면