넥스트 JS의 또 하나의 장점으로는 API 라우트 기능을 통해 API 엔드포인트를 클라이언트 코드와 함께 작성할 수 있다는 점이다. 물론 한 곳에서 작성만 할 수 있을 뿐이지 백엔드에서 실행되어야 할 코드가 클라이언트에서 실행되는 것은 아니다. 해당 라우트에 작성한 코드들은 클라이언트 번들 사이즈에 포함되지 않기 때문에 추후 별도로 배포를 할 수도 있고 serverless 함수 형식 구글의 cloud function이나 aws의 lambda)처럼 관리할 수도 있다. API Routes 사용해서 REST API 구현해보기 기존 예제 프로젝트에서는 JSON placeholder REST API포인트에 요청해서 포스트를 불러오는 방식으로 진행했는데 이번에는 API Routes를 사용해서 직접 엔드포인트를 구축..

개인적으로 Next JS를 처음 접했을 때 가장 흥미로웠던 건 이미지 최적화 (Image Optimization) 관련 부분이었다. 그냥 React로 이미지 처리를 해야할 경우 뷰포트에 따라 resizing 작업 및 이미지가 뷰포트에 들어와야 로딩이 되도록 lazy loading 등, 성능 향상을 위해 신경써야할 부분을 꽤 있는데 이걸 기본으로 처리해준다. eslint를 사용하고 있다면 next js에서 기존 태그를 사용했을 시 아래와 같은 경고를 봤을 수도 있을 것이다 Do not use . Use Image from 'next/image' instead. See https://nextjs.org/docs/messages/no-img-element.eslint@next/next/no-img-elemen..

오늘은 Next JS에서 공통된 레이아웃 (Header, Footer 등 여러 페이지에서 반복적으로 사용되는 컴포넌트)를 정의하는 방법에 대해 설명해보려고 한다. 보통 React의 경우, import Navbar from '/Navbar' export default function Layout({ children }) { return ( {children} ) } 이런 식으로 Layout이라는 페이지 컴포넌트(이름은 상관없음)를 정의하고 그 안에 공통적으로 사용될 컴포넌트를 넣어주는 방식을 사용한다. 주로 Navbar, SideBar, Footer 이런 컴포넌트와 함께 공통적으로 들어갈 스타일링이 있다면 같이 해준다. // ...생략 // App.js export default const App = ()..

예전부터 꼭 배워보고 싶은 Next JS 프레임워크에 드디어 입문했다. 여태까지 관리자 페이지나 랜딩페이지를 만들다 보니 CSR(Client Side Rendering)로도 충분했지만 현재 SEO과 원할하게 이루어져야 하는 프로젝트에 투입되어 SSR을 지원하는 넥스트 JS를 배우고 있다. React 자체적으로도 SSR (서버 사이드 렌더링)이 가능하긴 하지만 생각보다 복잡하기 때문에 이왕 배우는 거 넥스트 JS를 배우고 있다. 일단 CRA(Create React App)처럼 create-next-app으로 간단하게 넥스트앱 프로젝트를 생성할 수 있다 npx create-next-app # 또는 yarn create-next-app 폴더 구조 .next build/배포 시 필요한 파일들이 담겨있는 폴더 c..