Space
반응형
article thumbnail
[NextJS] Parallel Routes
React & NextJS 2024. 5. 9. 15:59

Before you learn🔗 [NextJS] hard / soft navigation🔗 [NextJS] Intercepting Routes[NextJS] Parallel RoutesNextJS의 13.3 버전에 추가된 기능입니다. 영상 instagram의 사진을 눌렸을 때 모달이 나타나지만,해당 모달이 나타났을 때 새로고침을 하면 해당 사진 페이지로 이동합니다. Intercepting Routes와 Parallel Routes를 사용하면 instagram의 모달처럼 구현할 수 있습니다.장∙단점굳이 Parallel Routes를 사용할 필요는 없다.직접 페이지에 컴포넌트를 여러 개 넣으면 되기 때문이다.하지만, Parallel Routes를 사용하면 각각의 Loading 파일을 작성하기에 용이하다...

article thumbnail
[NextJS] Intercepting Routes
React & NextJS 2024. 5. 5. 15:50

Before you learn 🔗 [NextJS] hard / soft navigation [NextJS] Intercepting RoutesNextJS의 13.3 버전에 추가된 기능입니다. 영상 윗 영상은 Intercepting Routes만 사용하였습니다. instagram의 사진을 눌렸을 때 모달창이 나타나지만,해당 모달창이 나타났을 때 새로고침을 하면 해당 사진 페이지로 이동합니다. Intercepting Routes와 Parallel Routes를 사용하면 instagram의 모달처럼 구현할 수 있습니다.Intercept 사전적 의미말 그대로 Intercepting Routes는 특정 경로를 가로채서 다른 경로를 표현할 때 사용합니다.  예를 들어,/feed에서 사진을 클릭하면,/photo/1..

article thumbnail
[NextJS] Route Handlers
React & NextJS 2024. 4. 16. 10:09

[NextJS] Route Handlers 설정 // app/api/route.ts import { NextRequest } from "next/server"; export async function GET(request: NextRequest) { } app 디렉터리 내의 route.ts (js) 파일로 정의됩니다. app 디렉터리 내에서 route.ts로 파일이름을 설정하면 NextJS가 알아서 API Router로 인식합니다. 라우터 핸들러는 app 디렉터리 내에서만 사용할 수 있습니다. HTTP 메서드 POST, GET, PUT, PATCH, DELETE, OPTIONS,... 등이 지원됩니다. 지원되지 않는 메서드를 호출하면 405번 에러가 발생합니다. (Method Not Allowed) 예시..

반응형