정확한 세그먼트 이름을 미리 알지 못하고 동적 데이터에서 경로를 생성하려는 경우 요청 시 채워지거나 빌드 시 미리 렌더링되는 동적 세그먼트를 사용할 수 있습니다. Convention 동적 세그먼트는 폴더 이름을 대괄호로 묶음으로써 생성할 수 있습니다: [folderName]. 예를 들어 [id] 또는 [slug]입니다. 동적 세그먼트는 레이아웃, 페이지, 경로 및 generateMetadata 함수에 params 소품으로 전달됩니다. Example 예를 들어 블로그에는 app/blog/[slug]/page.js 경로가 포함될 수 있습니다. 여기서 [slug]는 블로그 게시물의 동적 세그먼트입니다. /* app/blog/[slug]/page.js */ export default function Page({..
앱 디렉토리에서는 중첩된 폴더가 일반적으로 URL 경로에 매핑됩니다. 그러나 폴더를 Route 그룹으로 표시하여 해당 폴더가 경로의 URL 경로에 포함되지 않도록 할 수 있습니다. 이를 통해 URL 경로 구조에 영향을주지 않고 라우트 세그먼트와 프로젝트 파일을 논리적으로 구성할 수 있습니다. 라우트 그룹은 다음과 같은 경우에 유용합니다: 사이트 섹션, 의도 또는 팀별로 경로를 구성 할 때 동일한 라우트 세그먼트 수준에서 중첩된 레이아웃을 활성화 할 때 여러 루트 레이아웃을 포함하여 동일한 세그먼트에 여러 중첩 레이아웃 만들기 특정 세그먼트를 레이아웃으로 선택 할 때 💡 Next.js에서 "의도(Intent)"란 사용자가 애플리케이션에서 수행하려는 작업이나 목적을 나타냅니다. 일반적으로 사용자가 웹 애플리..
Next.js 라우터는 클라이언트 측 탐색과 함께 서버 중심 라우팅을 사용합니다. 즉각적인 로딩 상태 및 동시 렌더링을 지원합니다. 이는 내비게이션이 클라이언트 측 상태를 유지하고 비용이 많이 드는 재 렌더링을 피하며, 중단 가능하며, 경쟁 조건을 발생시키지 않는다는 것을 의미합니다. 라우트 간 이동하는 두 가지 방법이 있습니다: 컴포넌트 useRouter 훅 컴포넌트 은 Next.js에서 라우트 간 이동을 위한 주요 방법입니다. 은 HTML 요소를 확장하여 라우트 간의 사전 로드(prefetching)와 클라이언트 측 탐색을 제공하는 React 컴포넌트입니다. 를 사용하려면 next/link에서 가져와서 컴포넌트에 href 속성을 전달하세요: /* app/page.tsx */ import Link fr..
Next.js 13 내부의 앱 라우터는 페이지(page), 공유 레이아웃(layout) 및 템플릿(template)을 쉽게 생성하기 위한 새로운 파일 규칙을 도입했습니다. 이 페이지는 Next.js 애플리케이션에서 이러한 특수 파일을 사용하는 방법을 안내합니다. 페이지(Pages) 페이지는 경로에 고유한 UI입니다. 페이지를 정의하기 위해 page.js 파일에서 컴포넌트를 내보내는 방식을 사용할 수 있습니다. 중첩된 폴더를 사용하여 경로를 정의하고, route와 page.js 파일을 사용하여 해당 경로에 대해 공개적으로 접근할 수 있도록 만들 수 있습니다. Good to know: 페이지는 항상 route subtree의 leaf 입니다. 그래서 컴포넌트 계층을 보면 페이지 컴포넌트가 가장 안쪽에 있는 ..
모든 어플리케이션의 뼈대는 라우팅입니다. 이번 페이지에서는 웹 라우팅의 기본적인 컨셉과 NextJS에서 라우팅을 어떻게 사용하는 소개합니다. 용어(Terminology) 설명서 전체에서 아래 이미지에 있는 용어가 사용됩니다. Tree (트리): 계층 구조를 시각화하기 위한 관례입니다. 예를 들어, 부모 및 자식 컴포넌트로 이루어진 컴포넌트 트리, 폴더 구조 등이 있습니다. Subtree (서브트리): 새로운 루트(첫 번째)에서 시작하여 잎(마지막)에서 끝나는 트리의 일부입니다. Root (루트): 트리나 서브트리에서의 첫 번째 노드로, 루트 레이아웃과 같은 역할을 합니다. Leaf (리프): 자식이 없는 서브트리의 노드로, URL 경로에서의 마지막 세그먼트 등이 있습니다. URL Segment (URL ..
React Essentials Next.js로 애플리케이션을 구축하려면 Server Components와 같은 React의 최신 기능에 익숙해지는 것이 도움이 됩니다. 이 페이지에서는 서버 컴포넌트와 클라이언트 컴포넌트의 차이점, 사용 시기 및 권장 패턴을 살펴봅니다. 서버 컴포넌트 서버 및 클라이언트 컴포넌트를 사용하면 개발자가 서버와 클라이언트에 걸쳐 있는 응용 프로그램을 구축하여 클라이언트 측 앱의 풍부한 상호 작용과 기존 서버 렌더링의 향상된 성능을 결합할 수 있습니다. 서버 컴포넌트에 대한 생각 React가 UI 구축에 대한 생각 방식을 어떻게 바꾸었는지와 유사하게 React Server Components는 서버 와 클라이언트를 활용하는 하이브리드 애플리케이션 구축을 위한 새로운 정신 모델을 ..
이 글은 2022년 7월에 작성된 것으로, RN으로 작업한 Inline Styling 방식이 Next.js로 진행된 웹 페이지의 스타일 작업 방식에 그대로 적용되었습니다. 그러나 RN과는 달리 디자인 요구 사항이 고도화되면서 Inline Styling 방식만으로는 스타일 코드를 관리하는 것이 어려워질 것으로 예상되어 팀 내에서 문제를 제기하고 다양한 해결 방안을 도출한 과정을 문서화한 것입니다. 현재 진행 중인 웹 프로젝트 CSS 적용 상태 날것 그대로의 Inline Styling 페이지단위로 styled component로 감싼 후 class 생성 같은 스타일인데 이름만 다른 class가 생성되는 경우 같은 이름의 class인데 스타일이 다른 경우 같은 스타일 & class이지만 여러 페이지, 컴포넌트..
이 글은 2021년 5월 1일에 작성되어 레거시 내용이 포함되어 있습니다. 최신 Next js Image 공식 문서를 확인 해주세요 서론 Next.js는 버전 10.0.0부터 이미지 태그를 자동으로 최적화는 next/image를 제공하고 있습니다. next/image의 는 HTML의 를 최신 웹 용으로 확장합니다. 를 사용하면 자동으로 크기를 최적화하는 WebP 같은 최신 형식의 이미지를 제공받을 수 있습니다. 이는 더 작은 장치의 화면에서 큰 이미지가 전송되는 것을 방지할 수 있습니다. 또한 Next.js가 향후 이미지 형식을 자동으로 채택하고 해당 형식을 지원하는 브라우저에 제공할 수 있습니다. 는 모든 이미지 소스에서 작동합니다. 이미지가 CMS와 같은 외부 데이터 소스에서 호스팅 되는 경우에도 여..
