[Next.js] 링크 정보 숨기기 ( masking )

Router as, Link as, rewrites 란?

실제 URL정보를 사용자가 보지 못하도록 숨겨주는 Next.js 기능

 

Router as 사용법

import Router from 'next/router'

function handleClick(){
  Router.push('실제로 이동할 주소', '사용자에게 보여줄 주소')
}

 

Link as 사용법

<Link as="사용자에게 보여줄 주소" href="실제 이동할 주소">
  <a>Drive</a>
</Link>

 

rewrites 사용법

next.config.js 파일에 설정해준다.

const path = require("path");

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  // rewrites 사용
  async rewrites() {
    // array 반환
    return [
      {
        // "/contact2" 주소로 접속하면 ( 사용자에게 보여줄 URL )
        source: "/contact2",
        // 네이버 주소로 이동한다. ( 목적지 URL )
        destination: "https://www.naver.com/",
      },
    ];
  },
};

module.exports = nextConfig;

사용자에게 네이버 주소를 숨겼다!