Link
-
[Next.js] next/link - <Link> 태그Front-End(Web)/React - 프레임워크(React, Next) 2022. 10. 3. 14:20
🤔 서론 본래는, Next 스터디를 진행하면서 에 Styled-Components를 적용하며 겪었던 이슈를 정리하려는 포스팅이었다. 그런데, Next를 처음 공부할 때에도 next/link를 정리한 적이 없어 이번 기회에 한 번 전체적으로 제대로 공부해보고자 한다! 🤍 next/link 및 태그 Next.js에서 페이지 간의 링크전환에 태그를 주로 사용한다. 페이지 리렌더링 없이 이동시켜주는 SPA 동작을 담당하며, 태그로 전환되어 SEO에 적합하거나 다음 페이지를 prefetch 하는 등의 장점이 있다. 그렇기에 네비게이션 바에서 많이 볼 수 있으며, 아래와 같이 사용될 수 있다. (pages 폴더 내 index.tsx, about/index.tsx, blog/[slug].tsx 세 가지 페이지에 대한..
-
[Next.js] Dynamic Routes(페이지 이동)Front-End(Web)/React - 프레임워크(React, Next) 2021. 7. 1. 21:32
오늘은 next.js의 주요 기능 중 하나라고 할 수 있는, 페이지의 구성과 이동(라우팅)에 대해 포스팅하려고 한다. 사실, React에서도 라우팅에 관한 서드파티를 지원한다.(React-Router-DOM) 이를 통해, 라우터 경로별로 컴포넌트를 그린다. Next도 비슷한 원리로 라우팅을 지원할 것이며, React-Router와는 다른 차이점 혹은 장점이 있기에 사용되는 걸거라 예상된다. 사용법과 그 장점에 대해 한 번 학습해보겠다! 🤍 Pages & Dynamic Routes Next.js 프레임워크의 사용규칙 중 하나는 바로, 페이지 컴포넌트들은 반드시 Pages 디렉토리에 담아야한다는 것이다. 그 이유는, 이 Pages 디렉토리 경로값이 곧 우리가 이동할 페이지 컴포넌트의 경로값이 되기 때문이다!..