[Next.js] 리다이렉션

404페이지로 잡히는 url을 리다이렉션 하는 작업 진행했다.

next.js에서는 rewrite와 redirect 기능을 제공하고 이를 사용하면 간편하게 리다이렉션 설정을 이용할 수 있다.

두 설정의 다른 점은
Rewrites
클라이언트가 보낸 요청을 다른 경로로 보내지만, 사용자는 URL이 변하지 않는 것처럼 보인다. 즉 URL이 바뀌지 않고, 뒤에서만 다른 경로로 요청을 보낸다.

사용 예

• API 요청을 다른 서버로 프록시할 때
• 콘텐츠를 다른 경로로 이동시키고 싶지만 사용자의 URL을 유지하고 싶을 때

Redirects
클라이언트가 보낸 요청을 다른 경로로 보내고, 사용자의 URL도 새 경로로 변경한다. 즉, URL이 바뀌고 브라우저가 새 경로로 이동한다.

사용 예

• 페이지를 영구적으로 이동시킬 때 (SEO를 위해)
• 사용자를 새로운 경로로 안내하고 싶을 때

적용

나는 원래 URL은 버리고 새롭게 리다이렉션된 URL을 검색엔진에 노출시키고 싶어 Redirects을 선택했고, status는 308을 사용해서 영구적 리다이렉션을 진행했다.

status : 308 === permanent: true

*redirects.js
리다이렉션할 URL이 많아서 파일을 분리했다.

// permanent : true 영구적 리다이렉션
// permanent : false 일시적 리다이렉션

module.exports = [
  {
    source: '/원래_URL',
    destination: '/리다이렉션_URL',
    permanent: true,
  },

*next.config.js
작성한 리다이렉션파일을 설정에 적용하면 끝.

const redirects = require('./redirects')

const nextConfig = {
	redirects: async () => {
   	 return redirects
  	},
}  

번외

*middleware.js

리다이렉션을 할 URL중에 /_next/image로 시작하는 URL도 있었다.
하지만 next.config.js에서는 /_next/image로 시작하는 URL은 무시하므로 middleware로 별도로 설정해줄 필요가 있다.

middleware는 next가 시작 시 next.config.js가 실행 되기 전에 실행이 되는 파일이다. 따라서, middleware를 사용하여 /next/image로 시작하는 URL에 대한 리다이렉션을 설정할 수 있다.

import { NextResponse } from 'next/server'

export function middleware(req) {
  // 리다이렉션할 때 "_next"는 config.js에서는 무시해서 middleware에서 진행
  // 일시적 리다이렉션 status: 307
  // 영구적 리다이렉션 status: 308
  const url = req.nextUrl

  if (url.pathname.startsWith('/_next/image')) {
    const imageUrl = url.searchParams.get('url')

     if (imageUrl === '/images/~~.png') {
      return NextResponse.redirect(new URL('/이동_URL', req.url), { status: 308 })
    }
  }

  // 다른 요청은 메인으로
  return NextResponse.redirect(new URL('/', req.url), { status: 308 })
}

// 미들웨어가 적용될 경로 설정
export const config = {
  matcher: '/_next/image',
}