next.js21 [Next.js] Link 컴포넌트에 속성 설정 방법(className, target, rel 등) # Next.js의 Link 태그에 속성 설정 방법 Next.js 에서 태그는 새로고침없이 페이지를 이동하는 client-side navigation을 위해 사용된다. 만약 컴포넌트에 className, target, rel 등의 속성을 주고 싶다면, 컴포넌트에 직접 주는게 아니라, 태그 하위에 태그를 삽입하여 속성을 설정 주면 된다. import Link from 'next/link' export default function LinkAttr() { return ( // Link 태그 내부에 a태그를 삽입하고, a태그에 속성을 설정한다. 링크 ) } * 참고 : rel 속성으로 noopener noreferrer 를 설정해줘야 보안상 유리하다. 참고로 공식문서의 원문을 첨부한다. If you need .. 2022. 8. 21. [Next.js] pages 라우팅 파일명, 컴포넌트 이름 작성 방법 Next.js 는 File System Routing 을 제공한다. 즉, pages 경로에 위치한 폴더 및 파일명 자체가 접속 경로로 라우팅된다. 1. pages/파일명.tsx : /파일명 접속 라우팅 2. pages/폴더/파일.tsx : /폴더/파일 접속 라우팅 3. pages/폴더/[쿼리].tsx : /폴더/모든경로 접속 다이나믹 라우팅. useRouter().query 로 경로 취득 * index.tsx 는 파일명을 제외한 / 경로로 인식. * 타입스트립트 확장자는 tsx, 자바스크립트 확장자는 js를 사용 그런데 라우팅되는 파일의 파일명과 컴포넌트 명은 달라도 상관없다. 이 글에서는 이에 대해 간략하게 정리한다. # pages 라우팅 파일명, 컴포넌트 이름 작성 방법 - pages 경로의 라우팅 .. 2022. 8. 21. [Next.js] Link 라우팅 : 현재경로 active CSS 스타일링 React 에서는 네비게이션 라우팅 구현시, NavLink 를 사용하면, 해당 네비 메뉴가 선택됐을 때 자동으로 className에 active가 생겨서 선택된 네비 메뉴에만 스타일을 주기가 편했다. 하지만 Next.js 에서 Link 를 사용하면, 이 기능이 제공되지 않는다. 따라서 네비 메뉴가 선택되면, 직접 className에 active 값을 추가해줘야 한다. # Next.js에서 Link 선택 시, Active 효과 부여 방법 => 현재 경로가 선택된 메뉴와 동일할 때만 class에 active를 설정해주고 스타일링한다. 1. 컴포넌트 JS 코드 1) useRouter() 를 통해 현재 경로를 취득한다. 2) 현재 경로가 선택된 네비 메뉴와 동일할 때만 className에 active를 설정한다.. 2022. 8. 14. 이전 1 2 3 다음
