Link 및 props 사용법을 Next.js에서 효과적으로 활용하기

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

Next.js를 사용하는 웹 개발자 (중급 이상, 라우팅/네비게이션 이해 필요)

핵심 요약

• href는 반드시 포함해야 하며, replace를 사용하면 브라우저 히스토리가 대체됨
• prefetch={true}는 사용자 경험 향상에 유리하지만, prefetch={false}는 네트워크 리소스 절약에 효과적
• locale 속성은 다국어 지원을 위해 next.config.js에 i18n 설정이 필요

섹션별 세부 요약

1. Link 컴포넌트 소개

• next/link에서 Link를 임포트하여 사용
• 태그 대신 사용하며, 클라이언트 사이드 네비게이션 및 prefetch 기능 제공
• 예시: import Link from 'next/link';

2. props 사용법

• replace: true일 경우 브라우저 히스토리 대체 (이전 페이지로 돌아갈 수 없음)
• scroll: true일 경우 뷰포트 위치 유지, false일 경우 페이지 상단으로 스크롤
• prefetch: 기본값 true, false로 설정 시 미리 로드하지 않음

3. prefetch 기능

• 브라우저가 컴포넌트를 뷰포트에 진입할 때 자동으로 JavaScript/정적 자원 미리 로드
• prefetch={false}로 설정 시, 페이지 진입 시만 로드 (개발 모드에서는 비활성화)

4. `passHref`와 `shallow` props

• passHref: 태그를 감싸는 커스텀 컴포넌트에 href 전달
• shallow: true일 경우 경로만 업데이트, 데이터 fetching 없음 (기본값 false)

5. `locale` 속성 및 다국어 지원

• next.config.js에 i18n 설정 필요:

```js

module.exports = {

i18n: {

locales: ['en', 'bn'],

defaultLocale: 'en',

},

};

```

• locale={true}: 경로에 언어 코드 추가 (예: /en/about)

6. 이벤트 핸들러 (`onNavigate`)

• 클라이언트 사이드 네비게이션 시 실행되며, preventDefault()로 네비게이션 중단 가능
• onClick과 달리 외부 링크 또는 download 속성을 가진 링크에 반응하지 않음

7. 새 탭 열기 (`target` 속성)

• 태그의 target='_blank'와 동일한 방식으로 target 속성 사용 가능
• 예:

결론

• replace는 로그인/로그아웃 후 이전 페이지로 돌아가지 않도록 설계할 때 유용
• prefetch는 사용자 경험 향상에 기여하지만, 과도한 미리 로드는 네트워크 리소스 낭비 유발
• locale 설정은 다국어 지원을 위한 필수 구성 요소로, next.config.js에서 정확히 정의해야 함