Next.js - 경로

 

usePathname

usePathname 은 현재 URL 경로를 가져와 주는 기능 입니다.

usePathname 을 사용하려면 클라이언트 컴포넌트 이기 때문에 "use client" 를 사용하셔야 합니다.

"use client"

import React from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'

import '@/styles/styles.css'

const Navigater = () => {
  const path = usePathname();
  return (
    <div>
      <Link href="/" className={path === '/' ? 'link navbar' : 'navbar'}>Home</Link>
      <Link href="/about" className={path === '/about' ? 'link navbar' : 'navbar'}>About</Link>
    </div>
  )
}

export default Navigater

 

// 똑같습니다. 원하는 형식에 맞춰서 사용하시면 됩니다.
<div className={ path.startsWith('/meals') ? intro : null }
<div className={ path === '/meals' ? intro : null }

next 에서는 import Link from 'next/link' 사용 -> <Link href="/about"> about us </Link>

 

절대 경로 설정하기

만약 폴더를 계속 올라가서 특정 Component 를 찾아야 한다면 ../../..... 와 같이 무수하게 위로 올라가서 찾아야 합니다.

하지만 Next.js 에서 tsconfig.json 부분에서 절대 경로를 설정해 주면 이러한 불필요한 작업을 하지 않아도 됩니다.

// before
import { Button } from '../../../components/button'
 
// after
import { Button } from '@/components/button'

 

tsconfig.json 에 들어가서 밑에 코드처럼 설정해 줍니다.

{
  "compilerOptions": {
    "baseUrl": "."
  }
}

 

그리고 Button Component 를 설정 해 준 뒤에 원하는 곳에서 꺼내시면 됩니다.

export default function Button() {
  return <button>Click me</button>
}

import Button from '@/components/button'   <-- 이렇게 
 
export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  )
}

 

별칭 설정

기본 경로(baseUrl) 설정 외에도, "paths" 옵션을 사용하여 모듈 경로를 "별칭(alias)"으로 설정할 수 있습니다.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"]
    }
  }
}

import Button from 'components/button'
 
export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  )
}

 

not-found

[id] -> page.js 에서 만약 원하는 id 를 통한 페이지를 찾을 수 없을 때 그 폴더에서 설정한 not-found.js 파일이 자동으로 실행되지 않습니다. 다른 page 에서는 자동으로 not-found.js 를 참고하지만 이렇게 예외 상황이 생길 경우 내가 직접 설정을 해 주어야 합니다.

import { notFound } from 'next/navigation';

const Home = () => {

  if(!check) {
    notFound()
  }
  return (
    <div>
      ...
    </div>
  )
}

 

useRouter()

import { useRouter } from 'next/navigation'

const About = () => {
    const router = useRouter()

    // router.?
    // ? = back, forward, prefetch, push, refresh, replace
    
    ...
}

 

router.back()

브라우저의 뒤로 가기 버튼을 누른 것과 동일한 동작을 합니다.

router.forward() 

브라우저의 앞으로 가기 버튼을 누른 것과 동일한 동작을 합니다.

router.prefetch(url)

지정한 url을 미리 로드하여, 사용자가 해당 페이지로 이동할 때 빠르게 로딩되도록 합니다. 이는 성능 최적화에 유용합니다.

import { useRouter } from 'next/navigation';
import { useEffect } from 'react';

const MyComponent = () => {
  const router = useRouter();

  useEffect(() => {
    router.prefetch('/about');
  }, []);

  return <div>Content</div>;
};

export default MyComponent;

 

router.refresh()

현재 페이지를 새로고침합니다. Next.js 13에서는 데이터를 다시 로드하는 데 유용합니다.

router.push(url, as?, options?)

사용자를 지정한 url로 이동시키고, 히스토리 스택에 새로운 항목을 추가합니다.
즉, 브라우저의 뒤로 가기 버튼을 눌렀을 때 이전 페이지로 돌아갈 수 있습니다.

as

as 매개변수는 브라우저의 URL 표시줄에 표시될 경로를 지정하는 데 사용됩니다. 

기본적으로 as는 url과 동일하지만,  [id] 처럼 동적 페이지를 로딩할 때 필요합니다.

 

const handleNavigate = () => {
  router.push('/posts/[id]', '/posts/123');
};

 

options

다양한 부분이 들어 갈 수 있지만 대표적으로 scroll 이 있습니다.
scroll: 기본값은 true입니다. 페이지 이동 후 스크롤 위치를 맨 위로 설정합니다. 
scroll을 false로 설정하면 페이지 이동 후 현재 스크롤 위치를 유지합니다.

const handleNavigate = () => {
  router.push('/about', undefined, { scroll: false });
};

 

router.replace(url, as?, options?)

push와 비슷하지만, 현재 항목을 히스토리에 추가하지 않고 대신합니다. 
이 메서드는 브라우저의 뒤로 가기 버튼을 눌렀을 때 이 페이지를 건너뛰게 합니다.

 

차이점 요약
push: 새로운 페이지로 이동하고 히스토리 스택에 새로운 항목을 추가합니다. 뒤로 가기 버튼을 눌러 이전 페이지로 돌아갈 수 있습니다.
replace: 새로운 페이지로 이동하고 히스토리 스택의 현재 항목을 대체합니다. 뒤로 가기 버튼을 눌러 이전 페이지로 돌아갈 수 없습니다.

 

요약

back: 브라우저의 뒤로 가기.
forward: 브라우저의 앞으로 가기.
prefetch: 페이지를 미리 로드하여 성능 최적화.
push: 지정한 URL로 이동.
refresh: 현재 페이지를 새로고침.
replace: 히스토리를 대체하여 지정한 URL로 이동.