8. 리다이렉트와 라우트 핸들러

오늘 정리한 내용은 공식 문서 정리입니다.

 

🎈 리다이렉트

Nextjs에서는 리다이렉트할 수 있는 다양한 방법을 제공한다.

 

redirect 함수

redirect 함수는 서버 컴포넌트, 라우트 핸들러, 서버 액션에서 사용 가능하다. 서버 액션 수행 후 다른 페이지로 이동 시킬 때 자주 사용된다. 307 상태코드를 반환한다.

'use server'
 
import { redirect } from 'next/navigation'
 
export async function createPost(id) {
  //
  // create logic
  redirect(`/post/${id}`);
}

 

✨ 서버 액션을 통해 제한적으로 클라이언트 컴포넌트에서도 사용이 가능하다.

 

 

permanentRedirect 함수

서버 컴포넌트, 클라이언트 컴포넌트, 라우트 핸들러, 서버 액션에서 모두 사용이 가능하다. 영구적으로 리다이렉트한다. 308 상태코드를 반환한다.

 

사용 방법은 redirect 대신 permanentRedirect로 바꾸기만 하면 된다.

'use server'
 
import { permanentRedirect } from 'next/navigation'
 
export async function createPost(id) {
  //
  // create logic
  permanentRedirect(`/post/${id}`);
}

 

✨ 307과 308은 리다이렉트 시 이전 요청과 동일한 메서드를 유지해준다.

🤔 아직 307과 308의 차이점은 잘 모르겠다.

 

 

userRouter 훅

클라이언트 컴포넌트에서 사용되는 훅이며 보통 이벤트 핸들러 내부에서 사용하게 된다.

'use client'
 
import { useRouter } from 'next/navigation'
 
export default function Page() {
  const router = useRouter()
 
  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      Dashboard
    </button>
  )
}

 

 

next.config.js에서 리다이렉트

next.config.js 설정에서 특정 경로로 요청이 왔을 때 리다이렉트할 수 있다.

module.exports = {
  async redirects() {
    return [
      {
        source: '/post',
        destination: '/',
        permanent: true,
      }
    ]
  },
}

• permanent 옵션을 사용하는 경우 영구 리다이렉트

 

미들웨어에서 사용

미들웨어에서는 요청이 완료되기 전에 코드를 실행할 수 있다. NextResponse.redirect 를 통해 리다이렉트 할 수 있다. 보통 인증, 세션 등을 통해 사용자를 리다이렉션할때 사용한다.

import { NextResponse } from 'next/server'
 
export function middleware(request) {
  // 인증 코드 
  if (isAuthenticated) {
    return NextResponse.next()
  }
 
  return NextResponse.redirect(new URL('/login', request.url))
}
 
export const config = {
  matcher: '/user/profile',
}

 

✨ 미들웨에는 next.config.js에서 리다이렉트 이후에 실행된다.

 

 

 

📨 라우트 핸들러

라우트 핸들러를 사용하면 웹 요청 및 응답 API를 사용해 사용자 요청을 관리할 수 있다. app 디렉토리 내부에서만 사용할 수 있다. 페이지 라우팅과 마찬가지로 폴더 경로가 라우트 핸들러의 경로가 된다. 파일 이름은 route.js를 사용한다.

 

사용방법

아래와 같이 method의 이름의 함수를 만든후 export 하면 된다. GET, POST, PUT, PATCH, DELETE 등 HTTP 메서드를 지원한다. 파라미터로 request를 제공한다.

export async function GET(request) {}

 

 

캐싱

기본적으로 라우트 핸들러는 캐싱되지 않는다. 옵션을 통해서 GET 메서드에 한해 캐싱할 수 있다. 다른 메서드는 불가능하다. 

 

아래와 같이 라우트 핸들러 파일에 코드를 추가해주면 캐싱이 된다.

export const dynamic = 'force-static';

 

 

페이지와 라우트 핸들러

2개의 파일이 하나의 경로에 모두 존재해선 안된다. 2개가 모두 존재하는 경우 충돌이 발생한다.

 

개발 모드에서는 2개가 존재하는 경우 라우트 핸들러로 실행이 된다. 하지만 빌드를 하게 되면 충돌이 발생하여 빌드가 진행되지 않는다.

 

만약 경로가 아래와 같이 동적 경로라면 /api 경로는 라우트 핸들러로, 나머지 경로는 페이지로 이동된다.

• app/[user]/page.js
• app/api/route.js

 

정리

Nextjs를 사용한다는 건 보통 SSR을 활용하는 경우이기 때문에 라우트 핸들러를 사용하기 보다는 직접 서버 컴포넌트에서 서버 작업을 진행하게 된다.

 

또는 클라이언트 컴포넌트에서도 서버액션을 통해 서버에서 코드를 실행할 수 있기 때문에 앱 라우터가 등장하고부터는 라우트 핸들러의 사용이 많이 줄어들게 되었다.

 

하지만 서버액션은 form 전송시에만 사용할 수 있기 때문에 클라이언트 컴포넌트의 다른 동작에서는 라우트 핸들러를 사용해야 하는 경우가 종종 있을 수 있기 때문에 이 부분 또한 알고 있는 것이 좋다.