Next.js에서는pages 폴더 내부에 있는 파일들의 이름을 기준으로 자동으로 페이지가 생성이 된다.
실습환경 디렉토리 구조 & 레이아웃
Next.js 13 이상의 환경
디렉토리 구조레이아웃
<a> 태그
a태그를 사용해 링크를 연결하면, 해당 링크로 들어갔을 때 바뀌어야 하는 페이지 외의 변화가 없는 layout 같은 다른 부분들도 전부 처음부터 끝까지 요청 보내서 다운로드 받게 된다.
아래의 예시는 html 페이지와 css 페이지 이동시 개발자도구 - 네트워크 탭의 내용이다.
페이지 이동 예시1페이지 이동 예시2
매번 서버로부터 html을 받아오기 때문에 비효율적이고, 리소스를 많이 사용하게 된다.
<Link> 태그
a태그를 Link태그로 바꾸고 클릭하면 내가 이동하려는 페이지만 요청이 들어가게 된다.
하지만, 이조차도 이미 클릭해서 요청이 들어간 적이 있는 페이지는 다시 다운로드 받지 않고 바로 페이지가 렌더링 된다.
즉, <a>태그를 <Link> 태그로 바꾸는 것만으로도 Single Page Application을 구현할 수 있다.(엄청 간편하다)
(실제 Link 태그는 빌드 후, a tag로 자동 변환된다.)
※ 주의: 다만, dev 환경(npm run dev) 에서는 nextjs에 업데이트가 있었는지 개발환경에서는 미리 데이터를 읽어오는 prefetch 기능이 작동하지 않는다. 대신 npm run build && npm run start를 해서 배포판을 실행하면 화면에 링크가 노출되는 것만으로도 미리 데이터를 받아오는 prefetch이 동작한다!
<a> 태그에 비해 소요되는 리소스가 확연히 줄어든 모습이다.
📝 정리
1. <a> 태그
html 전체가 relaod 되기 때문에, 외부 링크 일때 사용하며, 일반적으로 내부 링크 이동시에는 의도한 경우가 아니고서는 사용을 지양하는 것이 좋다.
2. <Link> 태그
SEO 최적화, prefetch 가능, 우클릭 기능 사용 가능 등 <a>태그의 장점을 가지고 있다.
이동할 주소가 정해져 있는 경우 사용하며, 내부 페이지로 이동 시, SPA 방식으로 전체 html중 필요한 부분만 리렌더링 한다.
