Next.js 에서 a태그(Link) 사용

Apr 13, 2022

Link

pages 폴더 내부에 있는 파일들의 이름을 기준으로 자동으로 페이지가 생성이 된다.

폴더 구조

- pages
	- index.tsx
	- about.tsx

Next Link 사용
- SPA 에서의 Router 와는 다르게 next에서 제공하는 next/link 를 사용한다.

import Link from 'next/link'

// index(main)페이지 이동
<Link href="/">
	main
</Link>

// about 페이지 이동
<Link href="/about">
	about
</Link>

passHref

passHref 는 next Link에서 하위 컴포넌트로 href 속성을 전달해주는 역할을 한다.
외부링크 사용 및 a Tag 에 스타일을 입힐경우에 자주 사용한다.

외부링크 사용시

<Link href="https://www.naver.com/" passHref>
	<a target="_blank" rel="noopener noreferrer">
		외부링크
	</a>
</Link>

a Tag 스타일 입히기
- emotion/styled 및 styled-components 사용 시
styled.tsx

// style
import styled from '@emotion/styled';

export const StyledLink = styled.a`
	width: 20px;
	height: 20px;
	font-size: 14px;
	color: #fff;
	text-align: center;
	background: #111;
`;

Test.tsx

import Link from 'next/link';
import {StyledLink} from './styled.tsx'

<Link
	href="/about"
	passHref
>
	<StyledLink target="_blank" rel="noopener noreferrer">
		About
	</StyledLink>
</Link>

참고사이트

Next 공식 홈페이지에 들어가면 더 자세한 설명이 나와 있습니다.

next/link