Next.js - Redirects

노마드코더 니콜라스님의 유튜브를 보던 중 무료로 강좌가 있다고 해서 Next.js 개발을 하면서 많은 도움이 되지 않을까 싶어 무작정 니콜라스님의 Next.js 강의를 보았다.(https://nomadcoders.co/nextjs-fundamentals/lobby)

Watch Now – 노마드 코더 Nomad Coders

그 중 Redirect and Rewrite라는 흥미진진한 강의를 보면서 이런게 있는지 몰랐구나! 라는 신세계를 경험했다.

Next.js로 개발을 하면서 왠만한 사용법은 거의 다 익혔다고 생각했다만, 역시 배울게 아직도 많구나... 라는 자기 반성도 하게 되었다.😂😂😂

 

How to Redirects in Next.js ?

지금까지 개발을 할 때는 Redirect를 사용하는 경우가 거의 없었다.

 

만약 있다고 해도 Login을 하지 않은 상태에서 내부 URL에 접근하면 JWT 토큰의 유/무 판단을 해서 없으면

Login 페이지로 이동하는 식? 아니면 Login을 완료 했다면 Main 페이지로 이동시켜주는 방식으로 개발을 했었다.

 

방식도 useEffect Hook과 Next.js Router를 사용하면서 페이지를 이동시켰었는데 확실히 경우에 따라 쓰임새는 다르겠지만 뭔가 Static한 페이지를 만들거나 아니면 기존에 있던 URL이 변경되었는데 사용자들이 잘 몰라서 예전 URL로 접근할 때 새로운 URL로 Redirect 할 수 있게 하는 기능이 있다는게 너무 신기했다.

 

next.config.js

next.config.js 파일에서 module.export Object안에 async redirects() 함수를 선언하고 Return Array안에 source(기존 주소), destination(이동할 주소), permanent(브라우저나 검색엔진이 계속 기억할 것인지)를 지정해 주면 된다.

 

간단한 예로, 사용자가 원래 알고있던 URL /about 이라는 주소로 접근 했을 때 메인페이지로 보일 수 있게 해준다는 뜻이다.

 

next.config.js

다음은 뒤에 :path*를 설정하여 Redirect 하는 방식이다.

만약 /old-blog/123 이라는 URL로 접근할 때 /blog/123 이라는 URL로 Redirect를 해준다.

구 URL에서 새로운 URL로 Redirect를 자동적으로 시켜준다.

 

맨 뒤에 *을 붙여주는 것은 모든 Query String을 Catch해준다는 뜻이다.

예를들어 /old-blog/123?key=123 이런식의 URL도 /blog/123?key=123으로 Redirect 시켜준다는 뜻이다.

모든 URL을 Catch해 준다.

 

그 외 헤더, 쿠키 및 쿼리가 일치할 때 Redirect 방식이라든지 i18n 지원으로 Redirect를 해주는 방식 등 여러가지 Redirect 방식이 제공된다.

 

후기

다음번에는 Rewrite의 사용법의 대해서 간단하게 정리할 생각인데 무엇보다 next.config.js에서 이런 설정들이 가능한 것의 대해서 다시 한번 신기함과 동시에 깊은 반성을 느낀다...

 

next.config.js의 사용법의 대해서 더더욱 공부를 많이 해야겠다.

 

 

 

 

 

출처 : https://nextjs.org/docs/api-reference/next.config.js/redirects