본문 바로가기

nextjs2

route handlers next.js 는 풀스택을 지원하는데, route hander는 API 요청에 대한 내용을 작성하여 백엔드 로직을 수행한다. app 디렉토리 하위에 route.js(ts) 파일을 만나면 next.js 는 route handlers로 인식한다. 보통 app/api/ 의 경로에 폴더별로 구분하여 구성한다. 아래는 todo list를 만들면서 작성한 route 파일과 폴더 구조이다. route 파일 안의 함수명은 POST, GET, PUT, DELETE 등의 메소드 이름으로 대문자 형식으로 만들어야 컴포넌트에서 보낸 요청이 연결된다. app/api/todos/route.ts export async function GET(request: Request) { try { const response = await f.. 2024. 3. 15.
next.js 기초 이번주부터 nextjs에 돌입했다. nextjs의 기초적인 내용을 다뤄보자. next.js란? next.js는 react.js 기반으로 만들어진 프레임워크이다. 풀스택 개발이 가능하여 백엔드 + 프런트엔드 배포를 하나로 할 수 있다. vercel에서 만들어서 배포도 vercel로 하면 편하게 할 수 있다. 제일 큰 변화가 2022 v13 버전인데 이때, 앱 라우팅 기술이 나왔다. fetch 함수가 next.js에서 기능이 확장되며 여러 옵션을 지원하는데, 렌더링 4가지 방식과 관련이 있다. 4가지의 렌더링 방식을 지원한다. (SSR, ISR, SSG, CSR) 기본적으로 코드 스플리팅을 지원한다. route handler 기술로 백엔드 개발이 가능하다. 앱 라우팅 app 폴더 하위의 폴더명을 기반으로 자.. 2024. 3. 13.