redirect 설정하기

redirect 가 무엇인지부터 정리해보자.

 redirect란 경로를 재설정해주는 것인데, 두가지 방법이 있다. 각각 어떻게 사용하고 어떤 때에 각각의 방식이 효율적일지 생각해보자.

 

1. next.config를 통한 경로 재설정

 프로젝트의 설정 자체를 건드림으로써, 어떤 경우에 대한 처리가 아니라 프로젝트에서의 경로를 재설정하는 방법으로, 기존에 있던 경로가 변경되었을 때에 이전의 경로로 접근하더라도 404에러를 발생시키는 것이 아니라 재설정된 경로로 접근할 수 있도록 해주는 방식이다. source에 있는 경로로 접근하면 destination으로 경로를 재설정해주는데 404코드가 아닌 308코드를 보내주어 해당 경로가 잘못된 경로가 아니라 재설정되었으니 여기로 보내줄 것을, 그리고 캐싱을 해도 됨을 알려준다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ["plus.unsplash.com", "images.unsplash.com", "unsplash.com"],
  },
  async redirects() {
    return [
      {
        source: "/",
        destination: "/about",
        permanent: true, 
      },
    ];
  },
};

module.exports = nextConfig;​

 

next.config.js Options: redirects | Next.js

2. redirect() 함수

 아래 예시에서 볼 수 있듯이 어떤 경우에 이 경로로 보내주는 작업을 해주는 함수로, 로직 안에서 경로를 보내는 기능을 한다.

import { redirect } from 'next/navigation'
 
async function fetchTeam(id) {
  const res = await fetch('https://...')
  if (!res.ok) return undefined
  return res.json()
}
 
export default async function Profile({ params }) {
  const team = await fetchTeam(params.id)
  if (!team) {
    redirect('/login')
  }
 
  // ...
}​

Functions: redirect | Next.js

+ useRouter()

 버튼을 누르거나 어떤 이벤트를 했을 때 어느 경로로 보내는 기능은 useRouter를 통해서 구현 가능하다.

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

Functions: useRouter | Next.js