[Next.js] 딥링크, Next/Link에서 이슈

next.js 와 딥링크

이슈

import Link from 'next/link';

// 버튼 컴포넌트
<Link href='twitter.link://my-box'>
	<a>지금 바로 쿠폰 확인하기</a>
</Link>

아래와 같이 // → / 로 바뀌어서, 렌더링되어 링크 동작을 하지 않음.

 

원인

Next/Link 패키지를 까보자.

// node_modules/next/dist/client/link.js:  Link 컴포넌트 패키지
const { href , as  } = _react.default.useMemo(()=>{
	const [resolvedHref, resolvedAs] = (0, _router).resolveHref(router, hrefProp, true);
	return {
			href: resolvedHref,
			as: asProp ? (0, _router).resolveHref(router, asProp) : resolvedAs || resolvedHref
	};
}, [
        router,
        hrefProp,
        asProp
]);

// node_modules/next/dist/shared/lib/router/router.js
function resolveHref() {
	// filter 1
	const urlProtoMatch = href.match(/^[a-zA-Z]{1,}:\\/\\//);
	// filter 2
	if ((urlParts[0] || '').match(/(\\/\\/|\\\\)/)) {
        console.error(`Invalid href passed to next/router: ${urlAsString}, repeated forward-slashes (//) or backslashes \\\\ are not valid in the href`);
        const normalizedUrl = (0, _utils).normalizeRepeatedSlashes(urlAsStringNoProto);
        urlAsString = (urlProtoMatch ? urlProtoMatch[0] : '') + normalizedUrl;
    }
}

1. Link 컴포넌트는 prop로 받은 href 값을 resolveHref로 정제하여 사용함
2. 만약 href 에 scheme(:// 이전)가 형식에 맞는지 판단하여, 맞지 않다면 normalizeRepeatedSlashes 처리함. 이과정을 통해
3. twitter.link:// → twitter.link:/ 변환된다. 만약 scheme이 twitter:// 라면 변환되지 않음

해결책

Next/Link는 애초에 빌드된 Next App 내부에서 페이지 갱신 없이 라우트 간 이동을 위한 기능이다. deep link는 외부 이동이므로 순수 a태그를 쓰는게 맞다.