komponents

외부링크와 내부링크를 자동으로 탐지하기 w/ NextJSAutomatically detects external and internal links w/ NextJS

// 컴포넌트/앵커.tsx

import Link from 'next/link';

interface 앵커프롭스 {
  주소: string;
  [key: string]: any;
}

const 도메인정규식 = /http[s]*:\/\/[www.]*domain\.com[/]?/;

const 앵커: React.FC<앵커프롭스> = ({ 주소, ...rest }) => {
  const 도메인비교 = 도메인정규식.test(주소);
  let h = 주소;
  if (도메인비교) {
    h = h.replace(도메인정규식, "/");
  }

  if (href.startsWith("/")) {
    return <Link href={h} {...rest} />;
  }

  if (!h.startsWith("http")) {
    return <a href={h} {...rest} />;
  }

  return (
    <a href={h} target='_blank' rel='noopener noreferrer nofollow' {...rest} />
  );
};

export default 앵커;

// components/Anchor.tsx

import Link from 'next/link';

interface AnchorProps {
  href: string;
  [key: string]: any;
}

const domainRegex = /http[s]*:\/\/[www.]*domain\.com[/]?/;

const Anchor: React.FC<AnchorProps> = ({ href, ...rest }) => {
  const sameDomain = domainRegex.test(href);
  let h = href;
  if (sameDomain) {
    h = h.replace(domainRegex, '/');
  }

  if (href.startsWith('/')) {
    return <Link href={h} {...rest} />;
  }

  if (!h.startsWith('http')) {
    return <a href={h} {...rest} />;
  }

  return <a href={h} target="_blank" rel="noopener noreferrer nofollow" {...rest} />;
};

export default Anchor;

import 앵커 from '@/컴포넌트/앵커';

export default function 홈() {
  return (
    <앵커 주소=`링크 경로`>헬로 월드</앵커>
  );
}

import Anchor from '@/components/Anchor';

export default function Home() {
  return (
    <Anchor href=`LinkUrl`>Hello world</AnchorLink>
  );
}