404페이지로 잡히는 url을 리다이렉션 하는 작업 진행했다.
next.js에서는 rewrite
와 redirect
기능을 제공하고 이를 사용하면 간편하게 리다이렉션 설정을 이용할 수 있다.
두 설정의 다른 점은
Rewrites
클라이언트가 보낸 요청을 다른 경로로 보내지만, 사용자는 URL이 변하지 않는 것처럼 보인다. 즉 URL이 바뀌지 않고, 뒤에서만 다른 경로로 요청을 보낸다.
사용 예
Redirects
클라이언트가 보낸 요청을 다른 경로로 보내고, 사용자의 URL도 새 경로로 변경한다. 즉, URL이 바뀌고 브라우저가 새 경로로 이동한다.
사용 예
나는 원래 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',
}