7. API Routes Next.js는 Node.js의 서버리스 함수로써 API 앤드포인트를 생성하기 위한 API 라우트 기능을 지원한다. 사실 튜토리얼이니까 간단히 정리하고 넘어가겠지만, 공식문서를 꼭 읽어보길 바란다 (사실 지금까지 만들어온 블로그 앱에선 써먹을 구석도 없어서 예시를 들기도 어렵다) 7.1 API Routes 만들기 API Routes는 말 그대로 API 앤드포인트를 만들 수 있게 해주는데, pages/api 디렉토리에다 아래 포맷의 함수를 만들면 된다. 이 함수는 람다라고도 알려진 서버리스 함수로 배포할 수도 있다. // req = HTTP incoming message, res = HTTP server response export default function handler(re..

4. Pre-rendering 여기에서 이미 언급한 바 있지만, Next.js는 기본적으로 모든 페이지를 사전 렌더퓨 링suppre-render/sup한다. 즉, 각 페이지에 관련된 HTML을 사전에 만들어서 제공한다는 뜻으로 더 나은 성능과 SEO를 보장한다. 이렇게 생성된 HTML은 해당 페이지에 필요한 최소한의 JS코드와 연결되고, 브라우저가 페이지를 로드하면 이 JS코드를 실행해 페이지를 완전히 동적인 페이지로 바꿔놓는다(이 과정을 hydration이라고 부름) 4.1 SSG, SSR 사전 렌더링의 형태는 두 가지 SSG와 SSR이 있는데, 둘을 나누는 기준은 언제 HTML이 생성되느냐이다. SSG(여기선 Static Generation이라고만 쓰고있긴 한데 아무튼)는 HTML을 build tim..

리액트로 온전한 웹 앱을 밑바닥부터 만드려면 고려해야할 세부 사항들이 꽤나 많다.웹팩같은 번들러로 코드를 번들링하고, 바벨같은 컴파일러로 코드를 변환해야 함코드 스플리팅같은 프로덕션 최적화 작업을 해줘야 함앱 성능과 SEO를 위해 일부 페이지를 정적으로 pre-render할 것인지 결정해줘야 함리액트 앱을 데이터 스토어와 연결하기 위해 일부 서버 측 코드를 작성해햐할 수도 있음 물론 프레임워크를 적절히 잘 선택하면 이러한 문제들을 해결할 수 있다. 그러나 실제로 쓸법한 프레임워크가 되려면 적절한 수준의 추상화가 이뤄져있어야 하며, 좋은 개발자 경험도 제공해줘야 하므로 여간 쉬운 일이 아니다. Next.js는 리액트 프레임워크로써 위에서 언급한 모든 문제들의 솔루션을 제공한다. Next.js는 최고의 개발..