라우팅 및 이동 설정

✒️ 2025-05-28 11:09 내용 수정

라우팅 및 이동 설정

convention 파일 이름 URL path parameter
dynamic route pages/test/[id].js /test/1 { test: 1 }
catch-all segments pages/test/[...id].js /test/1 { test: [1] }
pages/test/[...id].js /test/1/2 { test: [1, 2] }
optional catch-all segments pages/test/[[...id]].js /test { test: [] }
pages/test/[[...id]].js /test/1/2 { test: [1, 2] } 
import styles from '@/styles/Home.module.css';
import Link from 'next/link';

export default function Home() {
  return (
    <>
      <h1 className={styles.flower}>Mall</h1>
      <ul>
        <li><Link href='/product/1'>페이지1</Link></li>
        <li><Link href='/product/2'>페이지2</Link></li>
        <li><Link href='/product/3'>페이지3</Link></li>
      </ul>
    </>
  );
}

next 다이나믹 라우팅 1.png

function Page() {
	const id = 1;
	
	return (
		<Link href={`/test/${id}`}>이동</Link>
		<Link href={{
			pathname: '/test/[id]',
			query: {id: id}
		}}>이동2</Link>
	)
}

useRouter와 router 객체

router 설명
pathname 현재 라우트 파일의 /pages 이후의 경로
query 다이나믹 라우트 파라미터를 포함한 객체로 전달된 query string으로, 기본값은 {}
asPath 웹 브라우저에 보이는 경로로, 검색 파라미터를 포함하며, basePath와 locale은 포함되지 않음
서버 사이드 렌더링을 사용하거나 자동 정적 최적화 사용시 클라이언트와 서버 간의 불일치가 발생할 수 있어 isReady=true일 때까지는 사용하지 않는 것이 좋음
basePath 활성화된 basePath로, basePath는 어플리케이션의 경로 접두사
참고 자료 : Next basePath
locale 활성화된 locale
isReady route 필드가 클라이언트 사이드에 업데이트되고 사용 가능한지 여부를 표시
useEffect() 내에서만 사용되어야 함 
import { useRouter } from "next/router";

export default function Product() {

    const router = useRouter();
    const {id} = router.query; // query의 객체 이름은 파일의 param 이름

    return (
      <>
        <p>Product {id} 페이지</p>
      </>
    );
}

next 다이나믹 라우팅 3.png

next 다이나믹 라우팅 2.png

import { useRouter } from "next/router";

export default function Search() {
  
  const router = useRouter();
  const {q} = router.query; // search?q=value 
  
    return (
    <>
      <p>검색페이지</p>
      <p>검색 결과 : {q}</p>
    </>
  );
}

next query.png

router 객체 메소드

메소드 설명
router.push() 클라이언트 사이드에서 이동을 처리할 때 사용
router.replace() next/link의 replace 속성과 비슷하게 새 URL 엔트리를 history에 추가하지 않음
router.prefetch() 페이지를 prefetch하여 클라이언트 사이드에서 더 빠르게 이동할 수 있도록 함
next/link는 자동으로 prefetch 하기 때문에 next/link 없이 이동할 때 유용함
router.beforePopState() 라우터 실행 전 popstate를 확인할 때 사용
router.back() history 상의 이전 지점으로 이동하며, 브라우저의 뒤로 가기 버튼과 동일함
router.reload() 현재 URL을 다시 로드하며, 브라우저의 새로고침 버튼과 동일함
router.events Next.js Router 내에서 발생한 event들을 처리할 수 있음
참고 자료 : Next router.events
  1. router.push() : 클라이언트 사이드에서 이동을 처리할 때 사용한다.
    • 참고 자료 : Next router.push
    • url : 이동할 URL, String이나 UrlObject
    • as : 웹 브라우저에 표시할 경로 이름, String이나 UrlObject
    • options : 페이지 이동 설정
      • scroll : boolean으로 기본값 true이며, 페이지 이동 후 스크롤을 페이지 최상단으로 설정한다.
      • shallow : boolean으로 기본값 false이며, getStaticProps, getServerSideProps, getInitialProps를 rerunning하지 않고 현재 페이지를 업데이트한다.
      • locale : 새 페이지의 locale을 표시한다.
    • 외부 URL로 이동 시 router.push()를 사용할 필요 없이 window.location을 사용하면 된다.
router.push(url, as, options);

import { useRouter } from 'next/router';

function Test() {

	const router = useRouter(); // router 객체 가져오기
	
	function moveHome() {
		router.push('/home'); // url을 string으로 지정했을 때
	}

	function movePost() {
		router.push({ // url을 UrlObject로 지정했을 때
			pathname: '/post/[pid]', // 다이나믹 라우팅 사용
			query: { pid: post.id } // query에 parameter 객체
		});
	}

	return (
		<button type="button" onClick={()=>{moveHome()}}>홈으로 이동하기</button>
		<button type="button" onClick={()=>{movePost()}}>${post.id}로 이동하기</button>
	)
}

export default Test;
  1. router.replace() : next/link의 replace 속성과 비슷하게 새 URL 엔트리를 history에 추가하지 않는다.
    • url : 이동할 URL
    • as : 웹 브라우저에 표시할 경로 이름
    • options : 페이지 이동 설정으로, router.push()의 옵션과 동일하다.
router.replace(url, as, options);
  1. router.prefetch() : 페이지를 prefetch하여 클라이언트 사이드에서 더 빠르게 이동할 수 있도록 한다.
    • url : prefetch할 URL로, 명확한 라우트와 다이나믹 라우트 모두 포함된다.
    • as : url의 데코레이터로, 데코레이터는 URL을 조작하거나 특정 기능을 수행하는 역할을 한다.
    • options : locale이 있으며, locale은 활성화된 locale과 다른 locale을 제공하는 것을 허용할지 선택할 수 있다.
router.prefetch(url, as, options);
  1. router.beforePopState() : 라우터 실행 전 popstate를 확인할 때 사용한다.
    • cb : 들어오는 popstate event를 처리하기 위한 함수로, 함수는 event의 상태를 url, as, options property를 가진 객체로 받는다.
      • url : 새 state에 대한 라우트로, 보통 page의 이름이다.
      • as : 브라우저에 표시할 url
      • options : router.push()에 의해 전송되는 추가적인 옵션
router.beforePopState(cb);
  1. router.back() : history 상의 이전 지점으로 이동하며, 브라우저의 뒤로 가기 버튼과 동일하다.
    • 함수가 실행되면 window.history.back()을 호출한다.
router.back();
  1. router.reload() : 현재 URL을 다시 로드하며, 브라우저의 새로고침 버튼과 동일하다.
    • 함수가 실행되면 window.history.reload()를 호출한다.
router.reload();

router 사용 예시

import { useRouter } from "next/router";
import { useState } from "react";

function SearchForm() {

    const [value, setValue] = useState('');
    const router = useRouter();

    function handleChange(e) {
        setValue(e.target.value); // value를 검색어로 설정(input의 value값)
    }

    function handleSubmit(e) {
        e.preventDefault(); // 제출하고 자동 새로고침 하는 것을 막은 후 동작 진행
        router.push(`/search?q=${value}`); // 이동할 주소 설정
    }

    return (
        <form onSubmit={handleSubmit}>
	        {/* input을 type="search"로 해두면 검색어 지우기 기능도 있다 */}
            <input type="search" name="q" value={value} onChange={handleChange}></input>
            <button type="submit">검색</button>
        </form>
    )
}

export default SearchForm;

import SearchForm from "@/component/SearchForm";
import { useRouter } from "next/router";

export default function Search() {
  
  const router = useRouter();
  const {q} = router.query;
  
    return (
    <>
      <h1>검색페이지</h1>
      <SearchForm/>
      <h2>검색 결과 : {q}</h2>
    </>
  );
}

next query 2.png

next query 3.png

next query 4.png