프로젝트 설치
$ npx create-next-app
다이나믹 라우팅
- 유저마다 폴더를 생성할 순 없다. 변동 값일 떄 [username] , [id](글 주소) 로 설정한다.
- 왜 page.tsx가 두개냐?
- 게시글 화면, 프로필 화면으로 두개
📌 만약 다이나믹 라우팅에 사용되는 폴더명과 다이나믹 라우팅이 아닌 폴더명이 동시에 존재한다면, 다이나믹 라우팅의 폴더명은 최후순위가 된다.
✔️ [username] 폴더와 home 폴더가 app 폴더 아래에 존재했을 때 유저명이 ‘home’일 경우 → 동적 세그먼트는 최후순위이기 때문에 유저 프로필 페이지가 아닌
home
페이지가 보여지게 된다. 따라서 동적 세그먼트에 사용되는 params 들이 다른 라우팅과 겹치지 않도록 하는 것이 제일 좋다.
폴더 구조
라우트 그룹
- 폴더명을 괄호로 묶어 생성하면 url 경로 구조에 영향을 주지 않고 그룹화하여 경로를 구성할 수 있음. ex) app/afterLogin)/home은 브라우저에서 /home으로 보여짐
template
- 페이지를 넘나들 때 리렌더링이 안되게 하고 싶으면 layout 되게 하고 싶으면 template
- 리렌더링 보다는 새롭게 마운트 된다는 의미가 더 적절
📌 템플릿 레이아웃과 유사하지만, 사용자가 템플릿을 공유하는 경로 사이를 탐색할 대 구성 요소의 새 인스턴스가 마운트되고 DOM 요소가 다시 생성되며 상태가 유지되지 않고 다시 동기화된다.
useEffect (ex. 페이지 보기 로깅) 및 useState (ex. 페이지별 피드백 양식)에 의존하는 기능의 경우 템플릿이 더 적합하다.
템플릿과 레이아웃은 같이 사용되지 않는다.
redirect
redirect 함수는 다른 URL로 유저를 리다이렉트 시킬 수 있다.
redirect(path, type) // 형식
//(beforeLogin)/login/page.tsx
import {redirect} from "next/navigation";
export default function Login() {
redirect('/i/flow/login')
}
기본적으로 use server 를 사용한 서버 액션에서는 type은 push가 기본 값이며 브라우저 기록 스택에 리다이렉트 되는 URL이 추가되고, 그 외의 경우에는 replace 타입이 기본 값이므로 브라우저 기록 스택의 현재 URL을 대체한다.
===출처 ===
https://www.inflearn.com/course/next-react-query-sns%EC%84%9C%EB%B9%84%EC%8A%A4#