nextjs

개요Nextjs의 routes를 이해하기 위해선 HTTP URL의 기본 구조에 대해 알아야 하기에 잠깐 확인해보고 가도록 하자.  URL의 구조는 schema://domain:port/path/parameters#anchor 를 갖는다.⇒ (ex) https://devleoper.mozilla.org/ko/docs/search?q=URL 이라는 주소가 있을 때,”/ko/docs/search”가 path 가 되고, ? 기호 뒤로부터 이루어진 “q=URL”는 search parameter 가 된다.   Routes (라우팅 시스템)How to route in Next.jsNextjs의 route는 심플하다. Nextjs에서는 라우팅 URL은 app 디렉토리 하위 구조의 폴더명에 따른다.//Exampleroo..

Application을 build 할 때 Header, Layout, Sidebar, Footer 등의 화면과 같이 모든 파일에 컴포넌트를 복사하지 않고도 어느 위치에서나 계속해서 재사용해야하는 화면들이 존재한다. 이렇게 반복적으로 사용되는 화면들을 위한 Next.js의 레이아웃 시스템(Layout System)을 알아보자.   LayoutsNext.js에서는 Layout 컴포넌트의 export default 된 Layout Component를 먼저 렌더링 한 후, 접속 URL을 확인하여 URL의 Target Component를 Layout 컴포넌트의 child로 렌더링 한다. 설명이 장황하니 Layout 컴포넌트를 코드로 살펴보자.//Layout.tsx...export default function L..