Next.js

Next.js에서 특별하게 사용하는 타입은 많지 않기 때문에 공식문서만 읽어보아도 충분합니다. 이번 레슨에서는 공식 문서의 내용을 기반으로 타입을 활용하는 방법에 대해서 알아보도록 하겠습니다.\_app.tsx 파일에선 웹사이트 전체에 공통적으로 렌더링 되는 App이라는

학원API이제부터 사이트에 API를 연동해 볼 건데요. 아래 두 문서를 참고해서 API를 연동해 보겠습니다. 필요할 때마다 아래 API 문서를 찾아보면서 웹사이트를 구현해 보세요.Codeitmall API 문서Watchit API 문서

Next.js에서는 페이지를 만드는 것처럼 간단하게 백엔드 API를 만들 수 있는데요. 사실상 작은 Node.js 서버를 구현할 수 있습니다. 백엔드 개발자 없이 간단한 API도 개발하고 싶고, 프론트엔드도 개발하고 싶은 사람들에게 유용한 기능이겠죠? 이번 레슨에서는

이번 레슨에서는 Image 컴포넌트, Head 컴포넌트, 그리고 빌드와 실행하는 방법에 대해 간단히 정리해보고 넘어가겠습니다.Next.js에서는 이미지를 사용할 때 Next.js 서버를 한 번 거쳐서 이미지 최적화를 한 다음 사용할 수 있도록 해 주는데요. 그래서

요즘 구글 폰트를 사용한 사이트를 많이 볼 수 있는데요. 무난한 디자인에 구글에서 적용할 수 있는 코드도 제공하기 때문에 많은 곳에서 활용하고 있죠. Next.js에서는 구글 폰트를 위한 기능도 제공하는데요. 구글 폰트를 편하게 쓰는 것뿐만 아니라 여러 가지 최적화도

이번 레슨에서는 Image 컴포넌트, Head 컴포넌트, 그리고 빌드와 실행하는 방법에 대해 간단히 정리해보고 넘어가겠습니다.Next.js에서는 이미지를 사용할 때 Next.js 서버를 한 번 거쳐서 이미지 최적화를 한 다음 사용할 수 있도록 해 주는데요. 그래서

프리 렌더링을 하면 검색 엔진 최적화(SEO)에 도움이 되고, 페이지의 로딩 속도가 빠르다는 장점이 있다고 배웠습니다. 정적 생성과 서버사이드 렌더링 두 가지 선택지가 있었는데요. 이 두 가지를 언제 어떻게 사용하는 것이 좋을까요? 이번 레슨에서는 앞에서 만들었던 페이

웹 브라우저가 페이지를 로딩하기 이전에 렌더링하는 걸 말합니다. 크게 정적 생성(Static Generation)과 서버사이드 렌더링(Server-side Rendering)으로 나뉩니다. Next.js에서는 기본적으로 모든 페이지를 정적 생성합니다.프로젝트를 빌드하는

예를 들어서 /api/short-links로 들어오는 리퀘스트를 처리하려면 /pages/api/short-links.js 또는 /pages/api/short-links/index.js 경로로 파일을 만들고 아래처럼 함수를 default export하면 됩니다.함수 체이

가장 먼저 mongoose.connect() 함수를 사용해서 커넥션을 만들고 사용합니다. 이때 Next.js 환경에서 커넥션을 불필요하게 여러 개 만들 수 있기 때문에, 캐싱 기법을 사용하는데요. 조금은 복잡할 수 있기 때문에 공식 리포지터리에 있는 코드(next.js