[Next.js] Next.js 13에서 pages 디렉터리 사용 시 url 값 변경해주기

{/* url에 query값만 숨겨주기 */}
<Link as="pages/shorts" href={{pathname:"./pages/shorts",query: {title:"aaa"}}}>링크</Link>

next/link 의 기능 중 하나닌 as 를 사용하면 사용자에게 url을 보여주는 곳 에서 state 값을 숨긴 채 노출시켜줍니다.

 

{/* 잘못된 경우 */}
<Link as="shorts" href={{pathname:"./pages/shorts",query: {title:"aaa"}}}>링크</Link>

하지만 위의 방법처럼 사용하면 요청하는 경로가 href의 pathname을 보는 게 아닌 as 의 경로를 바라보게 됩니다.

왜 그런건지... 아직도 공부가 부족하네요...

 

{/* next.config.js */}
/** @type {import('next').NextConfig} */

const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/:path*',
        destination: '/pages/:path*',
      },
    ];
  },
};

module.exports = nextConfig;


{/* 해당 링크를 작성해줄 파일 */}
<Link as="shorts" href={{pathname:"/shorts",query: {title:"aaa"}}}>링크</Link>

해결방법은 위의 코드처럼 pages 디렉터리를 default 로 잡아주는 방법으로 해결했습니다...