본문 바로가기

Next.js

[Next.js] Redirecting

redirect: redirect('post/${id}')

  • try/catch문 밖에서 사용해야 한다. 내부에서 오류를 반환하기 때문이다.
  • 렌더링 프로세스 중에 클라이언트 컴포넌트에서 호출할 수 있지만 이벤트 핸들러에서는 호출할 수 없다.
  • 라우터 훅을 사용할 수 있다.
  • 외부 링크로 리디렉션하는 데 사용할 수 있다.
  • 렌더링 프로세스 전에 리디렉션하려면 next.config.js 또는 미들웨어를 사용해야 한다.
    • next.config.js 파일의 리디렉션 옵션: 들어오는 요청 경로를 다른 대상 경로로 리디렉션할 수 있다. 페이지의 URL 구조를 변경하거나 미리 알고 있는 리디렉션 목록이 있을 때 유용하다. 리디렉션은 경로, 헤더, 쿠키, 쿼리 매칭을 지원하므로 들어오는 요청에 따라 유연하게 사용자를 리디렉션할 수 있다. 리디렉션을 사용하려면 next.config.js 파일에 옵션을 추가해야 한다.
    • 리디렉션은 미들웨어보다 먼저 실행된다.

permanentRedirect:  permanentRedirect('post/${id}')

  • 서버 컴포넌트, 라우트 핸들러, 서버 액션에서 영구 리디렉션을 호출할 수 있다.
  • 유저 이름을 변경한 후 사용자의 프로필 URL을 업데이트하는 경우 등의 이벤트 후에 자주 사용된다.
  • 외부 링크로 리디렉션하는 데 사용할 수 있다.
  • 렌더링 프로세스 전에 리디렉션하려면 next.config.js 또는 미들웨어를 사용해야 한다.
  • 미들웨어에서 조건에 따라서 나뉘어 실행되어 리다이렉션 될 수 있다.
  • 미들웨어는 렌더링 전, 리다이렉트(redirects)전에 

useRouter

  • 클라이언트 컴포넌트의 이벤트 핸들러 내부에서 리디렉션해야 하는 경우

redirect map: 데이터베이스에 리다이렉트 되는 리스트를 저장한다.

 

Optimizing data

Bloom filter처럼 큰 데이터베이스를 읽기 전에 redirect가 있는지 확인하는 전략이 있다.

이 경우 미들웨어에 큰 데이터가 들어오는 것을 막아줄 수 있다.

큰 데이터베이스를 fromJson으로 전환한 뒤 has 함수로 pathname이 있는지 확인한다. 있다면 api로 새로운 데이터로 넣는다.

아래는 chat gpt의 해석이다.

 

 

revalidatePath('/posts') // 페이지 자체가 갱신될 수도 있구나..!

 

 

'Next.js' 카테고리의 다른 글

[Next.js] Project Organization  (0) 2024.05.22
[Next.js] Route Groups  (0) 2024.05.22
[Next.js] Loading UI and Streaming  (0) 2024.05.21
[Next.js] Error Handling  (0) 2024.05.20
[Next.js] Linking and Navigating  (0) 2024.05.20