Next.JS - 4. URL 심화

페이지 경로 나누기

1. pages 폴더 내에 내가 원하는 페이지 폴더를 만들어준다. ex) movies
2. movies 폴더 안에 내가 원하는 페이지의 이름.js를 만들어준다. ex) all.js
3. 이러면 movies/all 로 그 페이지를 들어갈 수 있다.
4. 하지만 movies의 경로만 보고싶을때가 있다. 이럴땐 movies폴더 내의 index.js를 만들어준다.

id로 페이지 나누기

게시글 리스트에서 게시글 상세로 갈때, 게시글의 id로 이동한다. 이걸 next.js에서 할 수 있다.

1. movies 폴더 내에 [id].js 파일을 만든다
2. [id].js 는 movies/[id] 값이 되어 [id]안에 어떤 숫자가 들어오던 [id].js 페이지로 이동한다.

URL 마스킹하기

사용자의 도메인에 있는 url에 많은 정보를 표시 할 필요는 없다. 그렇기에 url에 있는 값을 숨겨주는(마스킹) 방법이 있다.

1. onClick 메소드 - query의 값은 router에 넣어줄 값을 의미한다. 그리고 2번째 인자는 실제로 보여줄 url을 의미한다.

const onClick = (id, title) => {
    router.push(
      {
        pathname: `/movies/${id}`,
        query: {
          title,
        },
      },
      `/movies/${id}`
    );
  };

2. Link 메소드

  <Link
    href={{
      pathname: `movies/${movie.id}`,
      query: {
        title: movie.original_title,
      },
    }}
    as={`/movies/${movie.id}`}
  >
    {movie.original_title}
  </Link>

catch-all URL

<Link href={`/movies/${movie.original_title}/${movie.id}`}>

404페이지

pages폴더 내에 404.js를 만들고 일반 함수를 선언하듯이 사용하면 된다.

export default function NotFound() {
  return "what are u doing here?";
}