Next.js - Routing

최현호·2022년 8월 4일

next.js

Next.js

목록 보기

5/8

Next.js - Routing

Next.js 의 Router 는 file-system 기반

file-system : 파일을 만들면 그 즉시 라우터로 인지되고 주소가 맵핑이 됩니다.
pages/
src/pages/

리액트에서는 별도의 Router 를 제공하지 않기 때문에 별도의 라이브러리를 사용해야 하지만, Next.js 는 기본적으로 제공을 합니다.

pages/ OR src/pages 둘 중 우선순위는?

우선순위는 pages/ 가 우선 입니다.

pages/index.js

import Link from 'next/link'
import { useEffect, useState } from 'react'

export async function getStaticProps(){
  console.log('server')

  return {
    props : {time : new Date().toISOString()}
  }
}

export default function Home() {

  return (
    <div>
      <h1><Link href="/ssg">SSG로 - pages -</Link></h1>
      <h1><Link href="/isr">ISR로 - pages -</Link></h1>
    </div>
  )
}

src/pages/index.js

import Link from 'next/link'
import { useEffect, useState } from 'react'

export async function getStaticProps(){
  console.log('server')

  return {
    props : {time : new Date().toISOString()}
  }
}

export default function Home() {

  return (
    <div>
      <h1><Link href="/ssg">SSG로</Link></h1>
      <h1><Link href="/isr">ISR로</Link></h1>
    </div>
  )
}

화면에는 pages 의 index.js 가 나옵니다.

즉, pages 폴더가 있다면, src 폴더 안의 pages 는 무시가 됩니다.

Nested routes

pages/product/first-item.js => /product/first-item
pages/settings/my/info.js => /settings/my/info

Tip, next.js 는 절대 경로 접근이 가능 합니다.

파일 깊이가 깊어질수록 ../ 을 하는 일이 많아집니다.
하지만 아래 설정을 하면 손쉽게 절대 경로로 접근이 가능 합니다.

jsconfig.json

{
	"compilerOptions" : {
        "baseUrl" : "src"
    }
}

first-item.js

// import Hello from '../../src/components/Hello'; // 기존
import Hello from '/src/components/Hello';

const first_item = () => {
    return (
        <>
            <h1>first_item</h1>
            <Hello/>
        </>
    )
}

export default first_item;