김재욱의 이모저모

Next.js 에서 Next/Link 를 사용하여 외부 링크로 접속하기 본문

Front-end/Next.js

Next.js 에서 Next/Link 를 사용하여 외부 링크로 접속하기

kjyook 2023. 6. 7. 14:22
728x90

 

https://nextjs.org/docs/pages/api-reference/components/link

 

Components: <Link> | Next.js

is a React component that extends the HTML element to provide prefetching and client-side navigation between routes. It is the primary way to navigate between routes in Next.js. Good to know: tag attributes such as className or target="_blank" can be added

nextjs.org

 

Next/Link의 사용법

import Link from "next/Link";

...
<Link href="/">
	<p>go main</p>
</Link>

 이렇게 사용을 하면 프로젝트의 / 페이지로 간다. 이거는 프로젝트 페이지 안에서만 돌아다닌다. href="/setting"으로 작성하면 프로젝트의 setting 페이지로 이동하게 된다.

 근데 나는 프로젝트 폴더 내부가 아니라 외부 링크로 접속하고 싶었다. 그래서 처음에는 href="www.naver.com"라고 해봤는데 그렇게 작성을 하면 프로젝트 폴더에서 www.naver.com   페이지를 찾아서 404 페이지가 나옵니다...

 그래서 이를 해결했던 방법은 디게 간단했는데 https 등 도메인의 풀 주소를 적어줘야 했습니다...

 

import Link from "next/Link";

...
<Link href="https://www.naver.com">
	<p>go main</p>
</Link>

이렇게 작성하면 www.naver.com  으로 잘 이동이 됩니다.

 

Next/Link 에서 색상 없애는 법

Link 컴포넌트는 a태그로 만들어진 컴포넌트이다. 그래서 나의 컴포넌트에 Link 컴포넌트를 입히니까 색상이 보라색으로 변했다.

안에 색상은 검은색이여 하는데!! 그래서 Link가 a 태그 여서 색상을 바꾸고 싶으면 a 태그에 대해 스타일링해주면 된다

 

a {
        color: black;
    }

이렇게 작성하면 색상을 검은색으로 바꿀 수 있다.

 

잘 바뀐 모습이당. 호호호

 

Next/Link 에서 새 창으로 열기 구현하는 법

나는 외부 링크가 열리는데 같은 창에서 열리는 것보다 새 창에서 열리는 것이 좋은 것 같아서 새 창에서 열기 기능을 지원하고 싶었다. 방법은 간단하다 그냥 target속성에 _blank를 추가해 주면 된다.

import Link from "next/Link";

...
<Link href="https://www.naver.com" target="_blank">
	<p>go main</p>
</Link>

 

728x90
저작자표시