Je개발 일지

빌드 전 정확한 Segement 의 이름을 모르거나, 동적인 데이터로부터 경로를 만들고 싶을 때, 요청시에 채워지거나 빌드 타임에 미리 렌더링되는 Dynamic Segement 를 사용할 수 있다. 1. 규칙 동적 Segement 는 대괄호로 폴더의 이름을 감싸면 된다. 예를 들면 [id], [slug] 동적 Segement 는 layout.js, page.js, route.js 및 generateMetadata 함수의 params 속성으로 전달된다. 2. 예시 예를 들면, 블로그는 다음과 같은 경로를 포함할 수 있다. `app/blog/[slug]/page.js` 여기에서 [slug] 가 블로그 게시물을 위한 동적 Segment 다. export default function Page({ params ..

경로 폴더와 파일 규칙 을 제외하고는 Next.js 는 개발자가 프로젝트 파일을 어덯게 구성하고, 파일을 동일한 위치에 둘 것인지 간섭하지 않는다. 1. 안전한 동일 위치 파일 구성(기본) app 디렉토리에서는 중첩된 폴더 계층 구조가 실제 경로를 정의한다. 각각의 폴더는 경로의 Segement 를 표기하고 이는 URL path 의 Segement 를 표시한다. 하지만 이 경로 구조가 폴더로 정의된다 하더라도, 실제 해당 경로는 page.js 파일이나 route.js 파일이 없으면 사용자에게 공개되지 않는다. 그리고 해당 경로가 공개적으로 접근 가능하다 하더라도 page.js 혹은 route.js 에서 반환된 내용만을 클라이언트로 보낸다. 이것이 의미하는 바는, app 디렉토리 내부에서 파일들을 개발자 ..

app 디렉토리에서, 중첩 폴더는 기본적으로 URL 경로와 매핑된다. 하지만, 경로 그룹(Route Group) 을 활용하면, URL 경로와 매핑하는 것을 피할 수 있다. 이런 방법은 경로 Segement 를 구성하고 프로젝트 파일을 URL 경로 구조에는 영향을 주지 않은 채 로직들을 묶을 수 있도록 도와준다. 1. 규칙 폴더의 이름을 괄호로 묶으면 경로 그룹을 만들 수 있다. (폴더이름) 2. 예시 2-1) URL 에 영향을 주지 않고 경로(Route)구성하기 URL 에 영향을 주지 않고 경로를 구성하려면, 그룹을 만들어야 한다. 괄호 안의 폴더는 URL 에서 생략된다. (marketing), (shop) 폴더가 URL 계층 구조에서 공유되고 있지만, 각 그룹에 대해 다른 레이아웃을 구성할 수도 있다...

1. redirect() 함수 **redirect** 함수는 사용자를 다른 URL 로 리다이렉션 할 수 있게 한다. 리다이렉션은 **Server Components**, **Route Handlers**, **Server Actions** 에서 호출할 수 있다 **redirect** 는 일반적으로 mutation 또는 이벤트 후에 사용된다. 예를 들어서 게시물을 생성하는 경우, 다음과 같은 코드로 만들 수 있다. 'use server' import { redirect } from 'next/navigation' import { revalidatePath } from 'next/cache' export async function createPost(id: string) { try { // 데이터베이스 호출..