👩‍🎤 프론트엔드/nextjs

[Next.js][react-query] API Routes 사용시 무한 request 발생 이슈

Next.js의 API Routes 대부분 프로젝트 진행 시, 백엔드 API 개발보다 프론트엔드 개발이 더 빨리 되는 경우가 많다. API 개발 완료 전 테스트할 수 있는 mockAPI가 필요하다. Next.js의 API Routes 기능을 이용해 간단한 mockAPI를 구현할 수 있다. pages/api 폴더 내부에 있는 파일들은 모두 /api/* 로 요청할 수 있다. // api/reviews/[reviewId] import { NextApiRequest, NextApiResponse } from "next"; export default function handler(req: NextApiRequest, res: NextApiResponse) { if (req.method === "GET") { co..

[Nextjs] Linking & Navigating

Next 라우터는 서버 중심의 라우팅과 클라이언트 사이드 네비게이션을 사용한다. 즉각적인 로딩 상태와 concurrent 렌더링을 지원한다. 즉, 네비게이션은 클라이언트 상태를 유지하고, 비용이 많이 드는 재렌더링을 피하고, 중단할 수 있으며 race condition을 유발하지 않는다. 컴포넌트 HTML 요소를 확장한 것으로 prefetching과 클라이언트 사이드 네비게이션을 제공한다. Next에서 네비게이션에 주로 사용하는 방법이다. 특정 상황이 아니라면 컴포넌트를 사용하는 것을 권장하고 있다. import Link from 'next/link'; export default function Page() { return Dashboard; } next/link에서 import해서 href를 설정해주면..

[NextJS] Pages, Layouts

Next 13은 pages, layouts, templates를 쉽게 만드는 새로운 파일 컨벤션을 도입했다. Pages page는 route에 유일한 UI이다. 기본적으로 서버 컴포넌트로 구성되지만 클라이언트 컴포넌트로 설정할 수 있다. 데이터를 패치할 수 있다. Layouts 여러 pages 간에 공유되는 UI이다. layout은 상태를 보존하고, 인터랙티브를 유지하고 재렌더링을 하지 않는다. layout.js 파일에서 default export로 정의할 수 있다. child 레이아웃이나 child 페이지가 있는 경우에, 항상 children props를 설정해야한다. // app/dashboard/layout.tsx export default function DashboardLayout({ child..

[NextJS] Routing

React Router와는 다르게 Next는 파일 시스템 기반 라우팅으로 작동한다. 기본 라우팅 app 디렉토리 내부의 폴더들은 자동으로 라우팅된다. 폴더 내부에 page.js가 있어야 URL 경로로 접근이 가능하다. // dashboard/page.js export default function Page() { return ( Page ); } 중첩 라우팅 폴더를 중첩해서 중첩 라우팅을 사용할 수 있다. 동적 라우팅 []를 사용해서 폴더 이름을 감싸주면 된다. // app/blog/[slug]/page.js export default function Page({ params }) { return My Post; } params를 사용해서 URL에 지정한 slug 값을 가져올 수 있다. /blog/a 경..